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

2022-11-30

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

You start a new React project. You spend the first hour installing the same dependencies, deleting the same files, copying the same folder structure from the last project. Then you do it again next month. And the month after that.

I used to maintain a boilerplate repo — a fully configured starter project that I'd fork for every new app. It worked until it didn't. Dependencies went stale. The boilerplate drifted from how I actually set up projects. Maintaining it became its own chore.

The better approach: don't maintain a project. Maintain a script.

A Script, Not a Repo

A shell script that runs create-react-app, deletes what you don't need, installs what you do, and pulls in your templates. Every project starts fresh with the latest versions. No stale dependencies. No drift.

npx create-react-app $1

Move into the directory:

cd $1

Remove the files you never keep:

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

Install your stack:

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 environment config:

REACT_APP_VARIABLE1 = "LOCAL"

Or fetch it from a remote repo:

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

Pull in 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

The Full Script

#!/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

Make it executable and run it:

chmod +x create-react-app.sh
./create-react-app.sh my-app

One More Thing

Push the script to GitHub and run it remotely:

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

One command. Fresh dependencies. Your exact setup. No repo to maintain.

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