Use custom build output folder when using create-react-app

Use Custom Build Output Folder When Using Create-React-App

If you’re using Create-React-App to build your React application, you might have noticed that the default build output folder is build. However, there might be scenarios where you want to customize the build output folder to better suit your project’s needs. In this blog post, we’ll explore different solutions to achieve this customization.

Solution 1: Modifying the package.json File

One way to change the build output folder is by modifying the package.json file of your Create-React-App project. Locate the scripts section within the file and modify the build script to include the --output-path flag followed by the desired output folder path. Here’s an example:

{
  "scripts": {
    "build": "react-scripts build --output-path=dist"
  }
}

After making this change, running the npm run build command will generate the build output in the dist folder.

Solution 2: Using the React-App-Rewired Package

If you prefer a more flexible approach, you can use the react-app-rewired package to override the default configuration of Create-React-App. Here’s how:

Install react-app-rewired as a dev dependency by running the following command:

npm install react-app-rewired --save-dev

Create a config-overrides.js file in the root of your project and add the following code:

const path = require('path');

module.exports = function override(config) {
  config.output.path = path.join(__dirname, 'dist');
  return config;
};

Update the scripts section in your package.json file to use react-app-rewired instead of react-scripts:

{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }
}

With these changes in place, running the npm run build command will generate the build output in the dist folder.

Solution 3: Using the CRACO Package

Another option to customize the build output folder is by using the craco package, which stands for Create React App Configuration Override. Here’s how to set it up:

Install craco as a dev dependency by running the following command:

npm install @craco/craco --save-dev

Create a craco.config.js file in the root of your project and add the following code:

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      webpackConfig.output.path = 'dist';
      return webpackConfig;
    },
  },
};

Update the scripts section in your package.json file to use craco instead of react-scripts:

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  }
}

After these changes, running the npm run build command will generate the build output in the dist folder.

Conclusion

By following one of the solutions outlined in this blog post, you can easily customize the build output folder when using Create-React-App. Whether you choose to modify the package.json file, use the react-app-rewired package, or opt for the craco package, you’ll have the flexibility to define a custom build output folder that suits your project’s requirements.

Use custom build output folder when using create-react-app