Why eject your create-react-app project

If you are new on React world, eventually you used CRA to create your react applications.

Most of beginners in react are wondering why use eject script present in package.json when they create your react apps, this article is for explaining the reason I eject my react apps sometimes, and learn together the world of possibilities that is created when we eject our react apps.

First of all, we need to install globally using npm the create-react-app package, you can do this, running npm install -g create-react-appin your terminal, after this we can create our react application using create-react-app myejectedapp

Navigating in the application, we can see our package.jsonlike this:

package.json

In our start, build and test scripts, we can see react-scripts handling all the responsability of starting the application, building an running tests, and plus, we see this eject command here.

To explain whats CRA eject script does, we have this official github part of README.md:

No Lock-In: You can “eject” to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off.

The first thing we can see here, is the philosophy: you can make it very simple, if you want this.

Now , let`s see what happens if we run npm run eject (you can use yarn or other of course), this is our package.json

After eject package.json file

Now, CRA delivered to us, all responsability of configuration in our project, we can:

• Add and remove dependencies
• Setup our styles as we need (Add and remove configs, Styled Components)
• Edit webpack configurations (Build configs, provide alias to specific paths, etc)
• Edit eslint presets and configuration as we need
• And remove unused dependencies as well.

Note, now project tree has a config and scripts folder, when is located our build and start scripts and our configs (webpack, jest, etc).

Long story short, now you have the power in your hands, if you need an type of “scaffold” but your project need specific configs and optimizations, use this! But remember:

mea-culpa: This is my first medium article!