Illustration Customizing Сreate React App without Eject

Customizing Сreate React App without Eject

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, indeed. Why? 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 a drawback again… 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.
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

StepsOfCRA
1. Forking a repo - open the “create-react-app” repo on Github
and fork it. You can find a screencast here.

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

npm install --save 2muchcoffee-react-scripts

command in the terminal.

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.

Rate this Article

( ratings, average: out of 5)

Twitter Facebook Google+