Custom build output folder - create-react-app ๐
How to use Craco for a custom configuration. A tutorial!
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/