Customizing Сreate React App without Eject

Intro

Most of the developers often make a choice for the Create React App (CRA) when creating a new project. For sure, it’s a great tool that allows creating a React application without being distracted by the settings of webpack, babel etc.

However, it’s an imaginary simplicity. Why is that? Problems might directly appear as soon as a developer understands that the CRA doesn’t generally allow to configure an applications’ build.

Fortunately, the Create React App developers took care of us and added an “Eject“ option. If you run the “npm run eject” command in the terminal - it would copy all the config files and dependencies right into your project. Then you can manually configure your app with all sorts of tools to satisfaction.

And there’s another drawback… The usage of Eject solves a problem only partially because you won’t be able to use the CRA functions in the future. Moreover, you would have to “eject” in each of your projects where you might need a custom build. It becomes painful, believe me.

There is an eject alternative deprived of the described above cons. You only need to use one option parameter - “--scripts-version” at the project creation. I’m just kidding. It’s not that simple, let's sort it out together. Further, in this article, I will consider the ability to enable the ES7 Decorator’s syntax in the project. The proposed solution can be used for a very fine build configuration that will be limited only by your imagination.

Steps of customizing Сreate React App without Eject

1. Forking a repo

First of all open the “create-react-app” repo on Github and Fork it. You will find the button "Fork" at the up right corner of the webpage.

2. Enabling decorator syntax:

Clone the project that appeared in your repository to your computer. After that open the “Forked-create-react-app/packages/react-scripts” folder. The “react-scripts” folder contains scripts for building, testing and starting the app. In fact, here you can tweak, configure, add new scripts and templates.

In the “package.json” file you should add two lines:

• @babel /plugin-proposal-class-properties

• @babel /plugin-proposal-decorators to dependencies

"dependencies": {
  "@babel/core": "7.1.6",
  ...
  "@babel/plugin-proposal-class-properties": "^7.2.3",
  "@babel/plugin-proposal-decorators": "^7.2.3",
  ...
  "workbox-webpack-plugin": "3.6.3"
},

In the “react-scripts/config/webpack.config.js” file find the place where the “babel-plugin-named-asset-import” plugin is connected and then add the following plugins:

“@babel /plugin-proposal-class-properties”
“@babel /plugin-proposal-decorators”

You can check out the files that were changed here.

3. Creating an npm account

If you already have an account, just skip this step. Otherwise, please sign up.

4. Publishing custom react-scripts to npm:

Before publishing to npm, you need to change the value of the “name” key in the “package.json” file in a “react-scripts” directory to “2muchcoffee-react-scripts” (here you should write your name for the npm package). You should also change the version, description, repository etc.

Now, move to the “forked-create-react-app/packages/react-scripts” directory from your terminal and log in by running the “npm login” command.

Then, run the “npm publish” command in the terminal and if you have done everything correctly you would get the npm package with the name that you wrote in the “package.json file”. You can find the npm package that was created as an example here.

New project creation by using the CRA v.2 and the support of the decorator’s syntax

Head over to your terminal and run: (replace the “react-scripts-with-decorators” with your npm package name)

npx create-react-app test-app --scripts-version react-scripts-with-decorators

Updating the project created with the CRA v.2 for the decorator’s syntax support

You need to remove the “react-scripts” from the “package.json” file and node_modules. After that, you have to install the “2muchcoffee-react-scripts” (here you should write your name for the npm package) by running the command in the terminal.

npm install --save 2muchcoffee-react-scripts

Conclusion

In general, a project fork is a great option, but not an ideal one - it definitely has nuances. In addition, you'll have to maintain your fork and make sure it is synced within the upstream in order to have all the updates. Besides, there is a Backstroke - a bot that can help you to manage it.

Nevertheless, the CRA tool together with your custom “react-scripts” package currently is the best option for the build customization. It will help you and your team easily to add all necessary configurations that are absent in out-of-the-box solutions or don’t meet your initial requirements.

Liked that? We’ve done our best! Go to our blog to find more useful articles.