How To Do Create React App Customizations

Selen Şar
Cimri Engineering
Published in
4 min readJul 17, 2020

--

We all know that CRA configurations might be tedious even that it’s a good option that allows you to start a react app without messing with the configurations and it has become a pretty useful boilerplate with a lot of improvements that have been included in recent years.

Particularly if you’re a newbie creating a single page application, CRA will help you, unless you need some specific configurations.

For me, doing some CRA configurations was the first challenging mission in my internship at Cimri.com. There are some workarounds to make ESlint, Babel or Webpack config, while you’re working on a create-react-app project.

What you might need to configure about Eslint and how you can accomplish this?

ESlint is a linting utility that helps the developer to write JavaScript code within particular rules before executing it. This linting tool is kindly reminding you mostly about syntax errors and giving you safe and fast ride. You can configure your helper as how you’d like it.

To do that you can create .eslintrc or .eslintrc.json or .eslintrc.js files that ESlint can go and read automatically your preferences. With the latest version of CRA you can extend the ESlint script in package.json, but to be more accurate for ESlint, it’s better to create an extensional file.

In this file, you can configure all the default options like parser or environment options. This also helps ESlint to determine which option will assist you. Additionally, you can re-design all your linting rules as you’d like. For example, if you’re working with react hooks you can add its own rules or if you need the destructuring assignment you can specify it.

What about Babel or Webpack configurations?

This is a sort of area that might cause vicious and impulsive decisions. If you’ve already searched how to do babel configuration in CRA, you probably encountered the saints strolling site by site and warning you to avoid yourself from ejecting CRA. After seeing those warnings you’ll probably go and eject a little create react app immediately to silence your instincts. You’ll not be a sinner by ejecting a react app but you should accept the consequences.

Once you run this command npm run eject you’ll see a bunch of new folders which are mainly scripts and config, and everything that has been hidden in package.json will be unveiled.

This is the only gateway that you can reach out Webpack and then babel configurations under the config folder. But there is a significant tradeoff. Once you eject your app, you can’t undo it and once you choose it, you’re on your own which means that all configurations will be exposed as yours, your scripts will run but independently from create-react-app. You can’t update react-scripts versions or you should do any other configuration by yourself.

Is there any alternative way?

The React core team have already been aware of this demand coming from developers, but in this direction, their philosophy is “zero-config”. They aim to provide a compatible and steady ground for developers. If you were able to add more plugin or any extensional configuration, you would have to follow every single upgrade of each one of them to maintain compatibility. For this create-react-app project, they want to free the developers from this kind of arrangements and provide a simple, powerful, easy-to-upgrade boilerplate.

However, if it is still a need, as they recommend in their page Alternatives to Ejecting, you can fork create-react-app to your GitHub repo. Before they had moved the template in the cra-template package, you could just fork react-scripts and make some Babel or Webpack configurations in this folder. However, for now, you may need to fork the entire repo. You can find some instructions here.

The good news is that we don’t have to rely on only create-react-app, there are some better, faster and stronger ways such as react-app-rewired, customize-cra, rescripts, react-scripts-rewired. These options offer a solution that let you configure your dependencies, but they are completely independent and excluded the guarantees of CRA.

You can evaluate the options as which version of CRA you may want to rewire or which config you want to apply. Let’s try to create simply a .babelrc file.

First, install your dependencies:

npm install --save-dev @babel/preset-env @babel/plugin-proposal-nullish-coalescing-operator @babel/plugin-proposal-optional-chaining

Then, add customize-cra into package.json:

npm install --save-dev customize-cra react-app-rewired

Open the package.json directory and change the scripts:

"scripts": {"start": "react-app-rewired start","build": "react-app-rewired build","test": "react-app-rewired test"}

Create a config-overrides.js in your project root directory and add this hook into the file:

const { override, useBabelRc } = require("customize-cra");module.exports = override(useBabelRc());

Create a .babelrc.js file in the same directory:

const presets = [["@babel/preset-env", { useBuiltIns: "entry" }]];const plugins = ["@babel/plugin-proposal-optional-chaining","@babel/plugin-proposal-nullish-coalescing-operator",];module.exports = { presets, plugins };

Ready to launch.

Happy hacking

--

--