No more React boilerplates! Long live to React App Blueprint

After several years using React Slingshot and other boilerplates for my applications, I decided to create a configuration script without falling in a new React boilerplate. This article intends to describe my journey to create a clean & reusable react setup script!

TL;DR

This Article shows how to set up a new React project installing the must-have libraries for a real application. Our goal is to create an auto-update and reusable script without worry for dependencies or node version updates.

We will define those steps as a pre-built house. So, What is the first step to making a house?

Setup Node environment

Photo by Guilherme Cunha on Unsplash

You can’t build a great building on a weak foundation. You must have a solid foundation if you’re going to have a strong superstructure.
Gordon B. Hinckley

Creating a flexible environment for future Node version updates could be covered using a Node version manager. In this case, I will use NVM library. Please check out NVM installation section for more details.

Since this script should always take the latest release on execution, Node version is requested using a community API endpoint service.

$ wget -qO- --wait=20 https://resolve-node.now.sh/lts
-> v10.16.0

The version received from service can be verified using the official Node Release Page.

https://nodejs.org/en/about/releases/
$ nvm install 10.16.0

Then activate it for the local terminal session.

$ nvm use 10.16.0

Note: if you don’t want to run nvm use every time in your projects folders, try avn to check automatically.

React App in one single line

https://www.buildpmb.com/

Create a React with boilerplate includes some file structures never used or not necessary during development. Here’s a list of some of them:

  1. Webpack configuration files. Required only for advanced customization in project performance or behavior.
  2. Utils folders. Most of the time deleted after cloning boilerplate
  3. Unnecessary project structure.
  4. Too many unknown dependency libraries installed in your package.json

The script intent is the simplest path to a basic folder app absent the files described above. This approach comes from a great facebook team project called Create React App (a.k.a. CRA). CRA generates apps without any config folder or other library dependencies.

Using npx command (installed along with Node) to create a new React base project.

$ npx create-react-app .

Here’s the output for this command.

https://facebook.github.io/create-react-app/docs/getting-started#output

Finally, create a .nvmrc file in the root folder. It should include Node version selected in previous steps.

$ echo "10.16.0" > .nvmrc

Then activate in your root folder.

$ nvm use

Check that everything is set up correctly.

Since this project has multiple developers, we would like to be sure everyone is using the same node version to avoid deprecated methods and malfunction when running our app. therefore, we will use check-engine.

Check-engine requires use engine options from package.json documentation.

...
"engines": {
"node": ">=10.15" //latest dubnium version
},
...

Now, set a preinstall script to check node version before installing dependencies.

...
"scripts": {
"preinstall": "npx check-engine",
...
},
...

This should be the output each time npm install is performed. 🎉

Now spin up our app to be sure everything was set up correctly.

npm run start
Localhost:300 CRA vanilla app

Yay 🎉, we have our house but this is an unfinished home. Some extra steps will polish it into a home!

Install custom CSS styles libraries

Photo by Alfonso Cenname on Unsplash

The styled-components library is the CSS style format approach, in this case, enabling us to create the most reactive CSS style. Why styled-component instead a CSS files/styles-tag way? This library helps to avoid inline style and separate rules CSS files. This strategy helps to talk always in terms of components, whether they are functional or styles. I’m talking from my personal experience, so I suggest looking at this article for a detailed explanation.

Install styled-components library

$ npm install -s styled-components

Let’s try converting app.css to styled components.

In the root file, create a new file called components.js. This file name will be used to include all the styled components for each react component file (in this case for App.js).

Component.js

Converted app.css CRA vanilla to styled components

After removing app.css, App is ready to export the new styled components inside App.js.

In the end, the application has not visual changes at all, but our components are using a class id reference to link the styled component rules created in component.js

Reset and Normalize CSS

CRA already includes a normalize in its CSS tools, so we only need to install reset-css library.

$ npm install -s reset-css

After that, go to index.js and include this:

import "@csstools/normalize.css";
import "reset-css";
import "./index.css"; //this line should be remove using GlobalStyled.

What About Global Styles?

Let’s create a file called globalStyles.js in the root folder and then just copy and paste index.css styles there:

Transformed index.css style to styled components

After removing index.css from index.js, modify App.js with these lines.

Our painted house looks great 🖌! So now, it’s ready to install the doors🚪.

Setup React Routes

Photo by matthaeus on Unsplash

React Router is a collection of navigational components that compose declaratively with your application.

Note: From this level, We’ll add some additional files to have a well-configured application such as routes, actions, and some other pages. It may change in the future.

Installing react-route and react-router-dom

$ npm install -s react-router react-router-dom

Now, we’ll create a new pages folder with a Home component.

components/pages/Home.js

Additional step: The Link component from components.js will be replaced with StyledLink to avoid name conflicts with react router Link component.

Now modify App.js to include Routes

The door installation has been accomplished 🚪! So it’s time to wire up our house.

Wire Redux state up

Why do we use redux? The app should manage its information in a single place and afford simplicity in use with our components. Also, it’s the most used tool for community support and issues solutions. Check this article Why use Redux? Reasons with clear examples.

Note: If you have a better idea to manage state and dispatch it into the components (maybe hooks), let me know in the comments section. Thanks.

Install Redux tools

$ npm i -s redux react-redux redux-thunk connected-react-router

Create BrowserHistory instance using history library (introduced with react-router) in line to include router state into Redux store.

Now, create ./reducers/index.js file and include history object into redux.

Then, create ./store.js.

After store instance is ready, the App requires wiring the store with react components. Therefore, edit index.js component and include as a react provider.

For now, nothing has changed at this point in the app, but we need to try out the house network. So, let’s do it with a simple color service 🔴 🔵 ⚪️.

Give me colors!

To have consistency between reducing and action types in the actions, we recommended creating actionTypes constants to include our type references.

./actionTypes/index.js

export const UPDATE_COLOR = "UPDATE_COLOR";

Now, go and create a new action in ./actions/index.js.

I should create a colorAction.js file and reference it into index.js but, since this is a test action, I will use actions/index.js for this case.

If you want more details about actions and reducers and how it works, we recommend following this link.

With color action created, it’s time to change the color based in our store using ./reducers/colorReducer.js.

After that, include your new color reducer into ./reducer/index.js

The section below describes how to connect color and fetchColor action into App.js component.

That should be enough. Now we can go into the app and enjoy 😉.

House is ready for the Home inspector 🎉

https://www.realtor.com/advice/buy/hire-home-inspector/

Every application needs a way to validate syntax errors and poor code practices. It helps if developers follow a strict and unique pattern across the system. CRA comes with Eslint helping us to make a more consistent code, but to have a properly setup linter for our added libraries, additional plug-ins are required.

Install Eslint processor for styled-components

$ npm i -D stylelint stylelint-processor-styled-components  stylelint-config-styled-components stylelint-config-recommended

Create our style lint configuration.

.stylelintrc

{
"processors": ["stylelint-processor-styled-components"],
"extends": [
"stylelint-config-recommended",
"stylelint-config-styled-components"
]
}

Now, include lint:css script for package.json .

...
"scripts": {
...
"lint:css": "stylelint './src/**/*.js'"
},
...

Now go to your terminal and run npm run lint:css

For this article purpose, the example above raised an error issue when one color CSS rule has a typo with extra s

Consistency is excellent, but what about seeming… pretty

Install prettier and Eslint-config-prettier to dev dependencies.

$ npm i -D prettier eslint-config-prettier

Then, update eslintConfig using prettier as an Eslint module in package.json

...
"eslintConfig": {
"extends": [
"react-app",
"plugin:prettier/recommended"
],
"plugins": [
"prettier"
],
"rules": {
"prettier/prettier": "error"
}
},
...

In the end, we will create a Lint script to run Eslint + Prettier validation together and fix format issues if it’s possible.

...
"lint:fix": "npm run lint:css && eslint './src/**/*.js' --fix"
...

The Inspector gives his approval 🎉. It’s almost there. Let’s make some small changes to polish this a little bit more.

No more relative path mess!

import something from "../../../../../../utils/whatever"

I’ve addressed this concern using `babel-plugin-module-name-mapper` to map my root folders. But, I noticed that CRA uses jsconfig.js to set the root folder in the app and, it looks like a great solution without adding a new dependency to my package.json.

The presence of jsconfig.json file in a directory indicates that the directory is the root of a JavaScript Project. The jsconfig.json file specifies the root files and the options for the features provided by the JavaScript language service.

{
"compilerOptions": {
"baseUrl": "src",
},
"include": ["src"]
}

Now we can change our relative import to an absolute one.

example reducers/color.js .

// Replace import { UPDATE_COLOR } from "../actionTypes";
import { UPDATE_COLOR } from "actionTypes";

Everything should run smoothly 🎉 ⚛️ 🚪 💅!!

The script contains the exact steps detailed above in this article. The goal of reducing set-up time and effort is accomplished.

So if you want to follow the same setup you need to run this in your terminal:

wget -qO- https://raw.githubusercontent.com/charly-palencia/create-react-app-blueprint/master/install.sh | bash -s [folderPath]

You should see all the steps one by one running on your computer, Now you’re ready to start your new project.

Photo by Teddy Kelley on Unsplash

OMG, Are you still here? 😍 Thank you so much for reading all of this article. Let me know if you have comments or suggestion. If you are interested in using this setup, please feel free to use my CRA blueprint command from this repository :

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store