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 yourpackage.json
file to usereact-app-rewired
instead ofreact-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 yourpackage.json
file to usecraco
instead ofreact-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.
Leave a Reply