Microfrontends: Integrating with a create-react-app (CRA) project without eject using CRACO (Create-React-App Configuration Override)

What is CRACO:

CRACO stands for Create-React-App Configuration Override. It is implemented as an easy way to override create-react-app configuration without mastering Webpack or ejecting.

Why CRACO:

CRA does not give you the freedom to configure Webpack outside CRA defaults. Also, the framework CRA uses is based on index.html, while client-side run-time composition microfrontends depend heavily on remote javascript files. The options available right now are:

1. Eject from CRA using eject script: Most developers are afraid to do so because of the complexity of configuring everything from scratch that CRA is taking care of. Also, we will use all sync with CRA updates
2. Updating node-modules/react-scripts/config/Webpack.config.js and copying back before running react-scripts: This solution works very well with some teams. However, it still requires strong knowledge of Webpack. Also, it will need some tweaks to work with Single SPA. This solution is used at Zulily for server-side composition microfrontends. Packages are stored on S3 buckets and routes are served by an Nginx server.
3. Create Single SPA over CRA and solve issues: this solution is explained in this article. However, so many issues to solve because of compatibility issues.
4. Use react-app-rewired: This package is not supported anymore and is risky to use
5. Use CRACO (Create-React-App Configuration Override): This is the solution I will explain in this article

=========================================

Install CRACO

1. Create a React App

npx create-react-app craco1        

Open it in Visual Studio Code

code .        

Add CRACO

yarn add @craco/craco        

Create an empty craco.config.js file in the root directory

add .env file to the root with the following in it to avoid version mismatch for dependencies

SKIP_PREFLIGHT_CHECK=true        

Update the existing calls to react-scripts in the scripts section of your package.json file

Update them to use the CRACO CLI instead, as follows:

This way, CRACO will update webpack.config.js with the configuration at craco.config.js before running react-scripts

Now, let's run the project and make sure everything works fine:

yarn run start        

This should open the default react page on port 3000 on the browser

========================================================

Add the first config override

Now, let's add the first config override. Let's change the port to 8001

in craco.config.js add the following:

module.exports = {
  mode: 'development',
  // Adding Server
  devServer: {
    port: 8001,
  },
};
        

A detailed explanation of webpack.config.js in the following article:

Start and start again (yarn run start) and note the port change

Congratulations! You have done the first config override :)