Let's start by talking about how to perform an eject with Create React App. The process itself is actually simple enough: you just run npm run eject or yarn eject, and the process begins. This is also not quite enough information to be able to make an informed decision about when and where to eject with Create React App, so we'll actually explore the results of running the command. We'll start off by moving this into a new branch in our source control of choice (or, if you're not using one, copy the directory somewhere, so that you can play with this without fear of losing your project).
We get the following output:
$ yarn eject
yarn run v1.12.3
$ react-scripts eject
? Are you sure you want to eject? This action is permanent. (y/N)
If you answer yes, you'll see a ton of output:
Ejecting...
Copying files into /Users/brandon/Documents/dev/create-react-app-book/code/todoifier
Adding /config/env.js to the project
Adding /config/paths.js to the project
Adding /config/webpack.config.dev.js to the project
Adding /config/webpack.config.prod.js to the project
Adding /config/webpackDevServer.config.js to the project
Adding /config/jest/cssTransform.js to the project
Adding /config/jest/fileTransform.js to the project
Adding /scripts/build.js to the project
Adding /scripts/start.js to the project
Adding /scripts/test.js to the project
Updating the dependencies
Removing react-scripts from dependencies
Adding ...lots of packages... to dependencies
Updating the scripts
Replacing "react-scripts start" with "node scripts/start.js"
Replacing "react-scripts build" with "node scripts/build.js"
Replacing "react-scripts test" with "node scripts/test.js"
Configuring package.json
Adding Jest configuration
Adding Babel preset
Adding ESLint configuration
Running yarn...
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Ejected successfully!
Please consider sharing why you ejected in this survey:
http://goo.gl/forms/Bi6CZjk1EqsdelXk1
Done in 14.39s.
Wow! A lot happens when you eject! It creates roughly 13 new scripts, most of which are either helper/utility JavaScript files or configuration files for things like Webpack, Babel, or Jest. A lot of this is the process of allowing you to continue to use your project as if it were already a major Create React App project, despite the fact that you just ejected. For example, most of our commands should work identically. If I run yarn test, for example, I should still get a full Test Suite running and passing:
$ yarn test
yarn run v1.12.3
node scripts/test.js
PASS src/NewTodo/NewTodo.test.js
PASS src/TodoList/TodoList.test.js
PASS src/Todo/Todo.test.js
PASS src/App/App.test.js
Test Suites: 4 passed, 4 total
Tests: 21 passed, 21 total
Snapshots: 3 passed, 3 total
Time: 5.939s
Ran all test suites.
Watch Usage: Press w to show more.
Similarly, if I run yarn start, I should be able to expect to use my React project in the same way that I always have:
$ yarn run v1.12.3
node scripts/start.js
Our browser should still spin up and open itself to http://localhost:3000/. We can also continue to run our own backend simulation server, with requests getting proxied appropriately! As you can see, the Create React App team did everything they could to make eject as painless and seamless a process as it possibly could be. We can even still build for production with yarn build.
We can also see the configuration files that are created for us, based on how Create React App structures its projects. We can see the Webpack configs, for example, in these files:
Adding /config/webpack.config.dev.js to the project
Adding /config/webpack.config.prod.js to the project
If you wanted to tweak your config in some custom way, this is where you'd do it, and you can base your configs off of the incredibly elaborate files that they've populated here.
You can also see how they've set up Jest to work so seamlessly, by looking at the scripts folder for scripts/test.js, as well as the Jest-specific configuration files located in config/.