Custom build output folder - create-react-app 🗂

In this post, you will learn to change existing configurations.

Whom is this post addressed to?

• You want a certain build folder structure of your React app.
• Go beyond SPA into the MPA realm with shared components.

Let's get to the building! 👷🏼‍♂️

Step 1: Initialize create-react-app.

Open Terminal in mac or command-prompt in Windows and type

npx create-react-app custom-build-cra

Now that you've initiated, get into the folder

cd custom-build-cra

You need to open this project folder into a code editor. You can open your project into the editor and skip the below step. Or, if you use VSCode like me you can just type this command:

code .

In the file panel, click to view package.json. Observe the scripts section has:

"start": "react-scripts start",
"build": "react-scripts build",

Step 2: Install @craco/craco

We will be overriding react-scripts with a new and different module which helps to create a custom configuration that appends to the current config provided by react-scripts.

To do that, we will go back into the terminal, the one already opened or you can open a new terminal in the editor.

npm install @craco/craco

You can read more about craco on github.

Step 3: Create config file - craco.config.js

Create a file in the root folder with the name craco.config.js and paste the following

const path = require("path");

module.exports = {
  devServer: (devServerConfig, { env, paths, proxy, allowedHost }) => {
    devServerConfig.writeToDisk = true;
    return devServerConfig;
  },
  webpack: {
    configure: (webpackConfig, { env, paths }) => {
      paths.appBuild = webpackConfig.output.path = path.resolve(
        __dirname,
        "build/main" // this will contain your /public/index.html of CRA
      );
      webpackConfig.output.publicPath = "./";
      return webpackConfig;
    },
  },
};

Step 4: Update package.json

Now that you have the config ready. It's time to update package.json scripts. Update the following:

"start": "craco start",
"build": "craco build"

You have just created a custom build folder. The above configuration will create a build folder in the root directory of the project and main folder inside it. It will then put all the other project assets inside the main folder specified.

From here you can continue to add any webpack configuration per your requirement in the craco.config.js file.

Further Configuring a different entry index_2.html

For example, If you want multiple entries to the app to create MPA. You need the html-webpack-plugin to process the HTML file. First, create the file. I have created in src/template/index_2.html.

Config would look something like:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  devServer: (devServerConfig, { env, paths, proxy, allowedHost }) => {
    devServerConfig.writeToDisk = true;
    return devServerConfig;
  },
  webpack: {
    plugins: [
      new HtmlWebpackPlugin({
        template: `./src/templates/index_2.html`,
        filename: `index_2.html`
      }),
    ],
    configure: (webpackConfig, { env, paths }) => {
      paths.appBuild = webpackConfig.output.path = path.resolve(
        __dirname,
        "build/main" // this will contain your /public/index.html of CRA
      );
      webpackConfig.output.publicPath = "./";
      return webpackConfig;
    },
  },
};

You'll notice now there is a file index_2.html inside /build/main/