Quick way to set up custom React project without CreateReactApp
Create-react-app is awesome. It is the easiest way to set up React projects.
I want to set up a custom React project with minimum dependencies, but it is so much hassle to install Babel, Webpack every time…
What if there is a way to quickly set up all of the boilerplate with only the dependencies I want by running 1 command just like Create-React-App?
Long story short, yes there is a way!
This project react-template contains the minimum required dependencies such as Webpack 4, Babel 7, Eslint…etc and the associated .babelrc, .eslintrc .
Follow the README in the repo to start scaffolding new React projects!
Read on for the WHY and HOW I created this React project scaffolding tool.
WHY?
There is already awesome create-react-app, why bother?
It provides lots of tools out of the box, but most of the time, we don’t need that many functionalities and redundant dependencies. When I start a new React project, I like having the bare minimum setup and slowly add required dependencies as my project grows.
Furthermore, I want to have this minimum setup for all of my new React projects. When I run create-react {PROJECT_NAME} {TITLE}, a new React project would be automatically setup with my own custom dependencies!
HOW?
Good Old Bash!
Bash is the perfect choice for automating repetitive tasks.
First, I created a basic React scaffolding project with Webpack 4, Babel 7, Jest and Eslint with Airbnb style so that I have this project structure to be set up for future projects.
Here are the tasks that I would like to have done automatically:
- Copy the files (package.json, webpack.config.js, .babelrc, .eslintrc etc) to the new project directory
- Update the npm project name and the title on index.html
- Install the dependencies
In the shell script, we could save the project paths and custom variables such as name and title from command line arguments $1.
PROJECT_NAME=$1TITLE=$2DEST_DIR=$3
To copy the files,
# $DEST_DIR saves path to destination project
# SCRIPTPATH is the path where the template repo is # enable copy dot files
> shopt -s dotglob# copy all files to dest dir
> rsync -az $SCRIPTPATH/ $DEST_DIR/
To replace the project name and title using templates such as %NAME%
# package.json %NAME% as template
{ "name": "%NAME%",
"version": "1.0.0",
"description": "",
"main": "index.js",
...
}# index.html %TITLE% as template<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>%TITLE%</title>.....# To replace the project name and title with $PROJECT_NAME and $TITLEsed -e "s;%NAME%;$PROJECT_NAME;g" $SCRIPTPATH/package.json > $DEST_DIR/package.jsonsed -e "s;%TITLE%;$TITLE;g" $SCRIPTPATH/src/index.html > $DEST_DIR/src/index.html
Putting the above commands together and some error checking, we now have a script that automatically sets up the project!
https://gist.github.com/SherryH/20a48c7%C3%A545aac0fe9186d36c316967c1
This script assumes that it is inside the React scaffolding project such as my create-react-template repository.
To run the script from anywhere in the terminal, we can add an alias to the script in the shell’s configuration file, ~/.zshrc or ~/.bash_profile.
alias create-react='bash {PATH_TO_REPO}/create-react-template.sh'Don’t forget to restart the terminal after setting up the alias!
References:
Here are detailed posts on creating React apps from scratch using Webpack:
The above post used Babel 6 in the set up. For reference on setting up with Babel7 and webpack4. Please refer to