Create multiple react builds, based on different configuration files

Question

I have a web app created with create-react-app. Instead of having just one build folder generated via "yarn build" I need to have multiple build folders each using a different configuration file (for database connection etc).

How can I do that?

score 0 · Answer 1 · answered Oct 18 '18 at 08:26

Yes, it is possible. Just define another build script.

Find script in package.json something like this:

"scripts": {
    "start": "node scripts/start.js",
    "build": "npm run git-info && node scripts/build.js",
    "test": "git-info && node scripts/test.js --env=jsdom",
    "git-info": "git log -1 --pretty=format:\"%h%x09%x09%ad%x09%s\" > src/static/gitInfo.txt"
},

You can define something like this:

"scripts": { 
    "build": "npm run git-info && node scripts/build.js && node scripts/build2.js && node scripts/build3.js", 
},

When you call yarn build , its called all commends in build section (npm run git-info && node scripts/build.js && node scripts/build2.js && node scripts/build3.js)

(yarn or npm...)

In your build script scripts/build.js, scripts/build1.js, ... you can define what you want (output folders, etc...)

@ynotu. `Build.js` is a file generated by `create-react-app`. See: https://pastebin.com/2NkTv3sM — JaLe, Oct 18 '18 at 09:14
Do I need to eject for that? How do I create different cfg files and how do I integrate them in the build process? — yN., Oct 19 '18 at 13:25

score 0 · Answer 2 · answered Jul 16 '21 at 23:07

Assuming you have one configuration file per environment, you could have a build script that takes the config as an argument or that reads from process.env and then you load the right .env file for each build.

"scripts": {
    "build": "dotenv-cli -e .env.production node build.js",
    "build:staging": "dotenv-cli -e .env.staging node build.js",
    "build:dev": "dotenv-cli -e .env.dev node build.js",
}

Here, build.js would be a custom JS file that you wrote and it would build your app.

Keep in mind that you'd need to output the built files in a way that they don't overwrite each other as you build for different environments.

Create multiple react builds, based on different configuration files

2 Answers2

Linked