Efficient React Project Setup: Developing a Boilerplate for Every Create-React-App Project with Automation

2022-11-30

Efficient React Project Setup: Developing a Boilerplate for Every Create-React-App Project with Automation

Creating a new React project from scratch can be a tedious task, especially when it comes to setting up the project structure and installing all the required dependencies. Through the years, I have been trying different ways to make this as fast and easy as I can until I found a way I’m better pleased with. In this article, we will discuss an approach to developing a boilerplate for every React project started with Create React App, which will programmatically execute all the steps a developer must follow until they have everything configured as they need it.

The Wrong Approach

Before we dive into the approach I like the most to develop a boilerplate for every React project, let's first discuss the one I’ve been using lately. It consists of having a project repository fully configured and starting forking it to start new projects. While this approach might seem convenient, it can quickly become a maintenance nightmare. Dependencies do not get updated, and we need to spend time maintaining the boilerplate instead of focusing on developing new features.

The Right Approach

For me, the most convenient approach to developing a boilerplate for every React project has been to automate the setup process programmatically. This approach involves writing a shell script to execute all the necessary steps to set up a new React project with all the required dependencies.

To get started, we need to create a new shell script file, let's call it create-react-app.sh where we can add all the steps we need to execute.

The first thing we need to add is to create a new React project by running the following command:

npx create-react-app $1


This command will create a new React project in a directory with whatever name we pass as the first argument.

Now, let's move into the my-app directory by running the following command:

cd $1

Here, we could remove all the files we don’t need by adding:

rm -rf $1/src/App.js
rm -rf $1/src/App.css
rm -rf $1/src/App.test.js


We can now start installing all the required dependencies for our project:

npm install –save react-router-dom styled-components styled-system
npm install –save-dev eslint eslint-plugin-react eslint-config-airbnb @babel/eslint-parser @babel/preset-react env-cmd eslint-plugin-import

We can now add some basic configuration to our project by creating a .env file and adding the following code:

REACT_APP_VARIABLE1 = "LOCAL"

This code will set an environment variable named REACT_APP_VARIABLE1 to the value “LOCAL”.

We could also have this file in a GitHub repo and fetch it right into the project folder by executing something like this:

curl -O https://raw.githubusercontent.com/<user | org>/cra-builder/master/enviroments/.env.local


We could even add layout templates and base components by importing them from the remote repository:

# - components/layout/Footer
curl --create-dirs https://raw.githubusercontent.com/<user | org>/cra-builder/master/app-template/components/layout/Footer/index.js -o ./components/layout/Footer/index.js
curl --create-dirs https://raw.githubusercontent.com/<user | org>/cra-builder/master/app-template/components/layout/Footer/Footer.js -o ./components/layout/Footer/Footer.js
# - components/layout/Header
curl --create-dirs https://raw.githubusercontent.com/<user | org>/cra-builder/master/app-template/components/layout/Header/index.js -o ./components/layout/Header/index.js
curl --create-dirs https://raw.githubusercontent.com/<user | org>/cra-builder/master/app-template/components/layout/Header/Header.js -o ./components/layout/Header/Header.js
# - components/layout/Layout
curl --create-dirs https://raw.githubusercontent.com/<user | org>/cra-builder/master/app-template/components/layout/Layout/index.js -o ./components/layout/Layout/index.js
curl --create-dirs https://raw.githubusercontent.com/<user | org>/cra-builder/master/app-template/components/layout/Layout/Layout.js -o ./components/layout/Layout/Layout.js

Finally, we can start our React project by running the following command:

npm start

This command will start the development server, and we can now start building our React application.

Putting it All Together

Now, our create-react-app.sh file can look similar to the following:

#!/bin/bash 
# Create a new React project 
npx create-react-app $1

# Move into the project directory 
cd $1 

# Remove template files
rm -rf $1/src/App.js
rm -rf $1/src/App.css
rm -rf $1/src/App.test.js

# Install required dependencies 
npm install –save react-router-dom styled-components styled-system
npm install –save-dev eslint eslint-plugin-react eslint-config-airbnb @babel/eslint-parser @babel/preset-react env-cmd eslint-plugin-import
# Add environments configuration 
curl -O https://raw.githubusercontent.com/<user | org>/cra-builder/master/enviroments/.env.local

# Add layout templates
# - components/layout/Footer
curl --create-dirs https://raw.githubusercontent.com/<user | org>/cra-builder/master/app-template/components/layout/Footer/index.js -o ./components/layout/Footer/index.js
curl --create-dirs https://raw.githubusercontent.com/<user | org>/cra-builder/master/app-template/components/layout/Footer/Footer.js -o ./components/layout/Footer/Footer.js
# - components/layout/Header
curl --create-dirs https://raw.githubusercontent.com/<user | org>/cra-builder/master/app-template/components/layout/Header/index.js -o ./components/layout/Header/index.js
curl --create-dirs https://raw.githubusercontent.com/<user | org>/cra-builder/master/app-template/components/layout/Header/Header.js -o ./components/layout/Header/Header.js
# - components/layout/Layout
curl --create-dirs https://raw.githubusercontent.com/<user | org>/cra-builder/master/app-template/components/layout/Layout/index.js -o ./components/layout/Layout/index.js
curl --create-dirs https://raw.githubusercontent.com/<user | org>/cra-builder/master/app-template/components/layout/Layout/Layout.js -o ./components/layout/Layout/Layout.js

# Start the development server 
npm start

To use our shell script, we need to make sure it is executable by running the following command:

chmod +x create-react-app.sh

We can now create a new React project by running the following command:

./create-react-app.sh my-app

This command will create a new React project in a directory called my-app.

One more thing

We could separate the script into different subscripts and then run them in the main scripts in the needed order. For example:

  • node ./environments.js
  • node ./layout.js

Finally, we can push all the scripts to a GitHub repo and execute it remotely like this:

bash <(curl -s https://raw.githubusercontent.com/<user | org>/cra-builder/master/cra-boilerplate.sh) <app-name>


You can also look into a full previous version I’ve worked with here: https://github.com/zizeron-tech/cra-builder/blob/master/cra-boilerplate.sh