How can I deploy a create-react-app website in development mode instead of production

Support
1

Site name jolly-haibt-87c88e // recoilize.io

The better the post - the faster the answer.

I am working on a landing page for a chrome dev tool that my team and I have created. Our landing page contains a sandbox intended to allow visitors to test our dev tool. Upon deployment, we realized that the dev tool won’t work with the sandbox, because the sandbox is deployed in production mode (minified/uglified component names, no access to fiber tree render properties). I’ve seen other posts talk about the performance issues that come from deploying in development mode, which I am not concerned about, and that shows me that it is possible. Our app is using Webpack to build the bundle, and Netlify to deploy. The website itself is built in React/Recoil.

Here’s a link to our repo just in case:

2

Just a guess:

Maybe, you can change your build command to webpack --mode development --watch (taken from your package.json)

OR

Maybe, environment variables will help: Build environment variables | Netlify Docs

You can try these till you get some more experienced answer.

3

When you run npm run build on a create-react-app project, the NODE_ENV variable will always be production.

You also won’t be able to use the --watch since Netlify doesn’t support running a server (which your webpack.config.js implies). You’ll probably want a third build script instead, where it builds your project without any minifications, etc.

That said, there is an issue around this exact question on the create-react-app repo here: https://github.com/facebook/create-react-app/issues/790

4

Found a workaround to solve this.

Just added --profile to the build script in package.json
“scripts”: {
“start”: “react-scripts start”,
“build”: “react-scripts build --profile”,
}