how to configure a react app for production

0
votes

I want to deploy my react app to production (using heroku). When the app is deployed, React dev tools indicates that my app is running in development mode

I pushed the application to heroku : https://lesamisdhubert.herokuapp.com/

I tried to set an environment variable : heroku config:set NODE_ENV=production

however, when I console.log(process.env.NODE_ENV), It returns development

I also tried npm run build before pushing to production but it hasn't worked

here are my scripts in the package.json file :

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

however console.log('node env --->', process.env.NODE_ENV); returns 'development'

Does anybody knows how I can set my react app into production mode ? Is this a problem with npm run build ? Thanks a lot, I really don't understand where this can come from ...

2
reactjsheroku
Did you install create-react-app buildpack on heroku? - Udit
I think I didn't : I did a npm run build I followed the steps in the Usage section of this article : github.com/zhukmj/… - Jonas

2 Answers

1
votes

I replaced in package.json :

"scripts": {
    "dev": "react-scripts start",
    "start": "serve -s build",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "heroku-postbuild": "npm run build"
  }

I also created a new heroku app and it seems to work

0
votes

When configuring enviroment vars in heroku you have to append REACT_APP_VARIABLENAME and then set its value otherwise you can't have access to the env variable.

take a look at: https://github.com/mars/create-react-app-buildpack#compile-time-configuration

you can do this in the heroku client