Create a react "development" build

Question

What's the best way to create a development build bundle for a create-react-app project?

npm run build builds something that's buggy in ways that development isn't and it ignores my NODE_ENV setting

Does this answer your question? How to create and run a development build of an application using create-react-app configuration — Sephyre
– Sephyre, Commented Apr 21, 2022 at 5:57
Thanks, that's not too promising. I guess I have to try to fix production issues — pguardiario
– pguardiario, Commented Apr 21, 2022 at 6:45

b4rtaz · Accepted Answer · 2022-10-31 11:14:35Z

4

This works for the react-scripts 5.0.1:

Install react-app-rewired: npm install react-app-rewired
Replace the build script in your package.json:

"scripts": {
  "build": "react-app-rewired build"
}

Create the config-overrides.js file in the root folder of your project.

module.exports = function override(config) {
  config.mode = 'development';
  config.optimization.minimize = false;
  return config;
};

If you want to create two build modes you can add a condition that checks the mode.

"scripts": {
  "build": "cross-env react-app-rewired build",
  "build:dev": "cross-env DEV_MODE=true react-app-rewired build",
}

module.exports = function override(config) {
  if (process.env.DEV_MODE) {
    config.mode = 'development';
    config.optimization.minimize = false;
  }
  return config;
};

answered Oct 31, 2022 at 11:14

b4rtaz

2712 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SkyNT Over a year ago

react-app-rewired worked for me for react-scripts 5 unlike many other solutions floating around. However, the part about cross-env DEV_MODE=true did not, so i was not able to reproduce the second half of this answer.

Tapan Dabhi Over a year ago

@SkyNT you would also need to install cross-env, i.e: npm install --save-dev cross-env

Collectives™ on Stack Overflow

Create a react "development" build

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related