2.2.6: Eject CRA

Learning Objectives

1. Create React App (CRA) simplifies our development environment to help us learn React

2. Ejecting CRA allows us to customise tools in our development environment such as Webpack, Babel and ESLint

3. Rocket recommends sticking with CRA's default setup for as long as possible until we have no choice but to eject

Introduction

Create React App (CRA) bundles relatively complex frontend tools into a simple package to make it easier for us to learn React. When our apps get complex enough and require more custom configuration, we can "eject" our CRA apps to generate a collection of config files for CRA's dependencies, including Webpack, Babel and ESLint. We can then edit those config files to customise our development environment.

Read Create React App's official docs on ejecting CRA.

Available Scripts | Create React App

Create React App official docs on ejecting CRA

Rocket discourages us from ejecting our CRA apps because the CRA configuration should work for our use cases at Rocket, and the ejected CRA configuration is relatively complex.

However, it is helpful to know what CRA does under the hood to compile our React apps into static files that our browsers can render, and we will explore the key technologies below.

Webpack

Webpack is a module bundler that converts 1 or more files in an app into a minimal "bundle" of files with minimal size that can be efficiently distributed to and read by browsers. In addition to compressing our files, Webpack is also configurable to translate (aka compile, transpile) our potentially more modern but less-supported code syntax (e.g. JSX and SASS) into languages that are more widely-supported by browsers, i.e. vanilla HTML, CSS and JS.

Webpack is often used together with tools such as Babel and SASS Loader that compile latest versions of JavaScript and CSS respectively into more widely-supported versions. CRA uses both Babel and SASS Loader with Webpack to compile JSX and SASS into vanilla HTML, CSS and JS.

Babel

Babel is a JavaScript compiler that compiles the latest versions of JavaScript (and JSX) into versions more widely-supported by browsers. This is helpful for developers that prefer to code in the latest syntax but still want their code to work for most people. Babel works with a wide range of build systems and frameworks; Webpack is one of the most common.

ESLint

ESLint is a JavaScript linter that enables us to detect syntax errors and standardise code formatting and style in our JS and JSX files. Developers often use ESLint in their IDEs like we do with VS Code, but ESLint can also be used with tools such as Webpack and Git to prevent building or committing when ESLint detects errors. CRA uses ESLint with Webpack to prevent builds when ESLint detects errors in our JS or JSX files.

Exercise

We will not eject CRA for any projects at Rocket (except your capstone if you like pain), but it could be helpful for us to see what configurations are like in an ejected CRA app that contains all of CRA's under-hood configurations.

1. Clone Rocket's Eject CRA repo

2. Notice this is the same base CRA repo Rocket uses for our exercises and projects, except with an eject script in package.json that is built-in to CRA that Rocket removed in our CRA template but have added back to this repo for this exercise.

3. Run npm run eject in the root of the cloned Eject CRA repo, and enter y to confirm

4. Notice the configuration files in config folder and scripts in scripts folder. CRA has been using those configurations and scripts to run our apps.

5. Open config/webpack.config.js. This is the config file that specifies everything Webpack does to compile and bundle our files for browsers.

   1. Notice where it mentions babel. This is where Babel compiles our JS and JSX into browser-readable code.

   2. Notice where it mentions sass. This is where SASS Loader compiles SASS to CSS.

6. Open scripts/start.js. This script runs every time we run npm start. It launches a "Webpack dev server" that runs Webpack every time we change a file that our app depends on and restarts our app. scripts/build.js does something similar except without the file watching and dev server functionality to run our app locally, watch and restart on file changes.

This is a large amount of configuration and scripting that we avoided by using CRA. If we were to build a React app from scratch, we would likely build something simpler than CRA did, but it likely would not have all the conveniences that CRA provides us out of the box. Thank you CRA team for making our lives easier!