# 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

```javascript
npx create-react-app custom-build-cra
```

Now that you've initiated, get into the folder
```javascript
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: 

```javascript
code .
```

In the file panel, click to view `package.json`. Observe the `scripts` section has:
```javascript
"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. 

```javascript
npm install @craco/craco
```

You can read more about  `craco` on [github](https://github.com/gsoft-inc/craco).

### 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

```javascript
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: 

```javascript
"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:

```javascript
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/`