Package.json - NODE_ENV to prod/deployment

Question

I'm a newbie here with web-development and recently started pushing my simple web-app to a GitHub page. I quickly discovered that my page won't render after I integrated react-router with it because my dev and prod URL links are different.

My question is, how can I set up my package.json and .env such that it will correctly render my URLs?

My .env file looks like this:

REACT_APP_PUBLIC_URL="my-site"

and my package.json looks like:

"scripts": {
    "start": "NODE_ENV=development react-scripts start",
    "start:prod": "NODE_ENV=production react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  }

Inside my Index.js, I'm doing this:

if (process.env.NODE_ENV === "production") {
  require("dotenv").load();
}

console.log("PROCESS.ENV.NODE_ENV: ", process.env.NODE_ENV); // This prints "development"
console.log("PROCESS.ENV.PUBLIC_URL: ", process.env.REACT_APP_PUBLIC_URL); // This prints "my-site"

When I run npm run start:prod, I would think that it sets the NODE_ENV to production but it doesn't seem to be doing that.

Basically, what I want to do is during development, my process.env.PUBLIC_URL should be "" and during production, it should be "my-site". That way, my router can correctly render the corresponding views. Thanks for your help!

@rc_dz Yes, I saved it. I also realized I made a typo in the original post and edited it. The `console.log(process.env.REACT_APP_PUBLIC_URL)` prints `"my-site"` but `process.env.NODE_ENV` prints `development` when I expect it to print `production` even though I execute `npm run start:prod` — Tim, Sep 28 '18 at 22:34
another question, when calling `npm run start:prod`, are you sure there is no space or type between `start` and `prod`? If you type is as `npm run start prod` or `npm run start :prod` it will run the same as `npm run start` — rc_dz, Sep 28 '18 at 22:38
@rc_dz Correct, I'm not putting a space between `start` and `prod` I'm running `npm run start:prod` — Tim, Sep 28 '18 at 22:39
can you try switching to : ```"start": "NODE_ENV=production react-scripts start", "start:prod": "NODE_ENV=development react-scripts start",``` and see what happens — rc_dz, Sep 28 '18 at 22:41
@rc_dz With that combination, it still prints `NODE_ENV` is `development` :-( — Tim, Sep 28 '18 at 22:43
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/180967/discussion-between-rc-dz-and-tim). — rc_dz, Sep 28 '18 at 22:44

score 5 · Accepted Answer · answered Sep 28 '18 at 22:56

5

React-scripts sets NODE_ENV automatically, see article in medium.com. One of the options is using different env variables, case MY_APP_ENV

answered Sep 28 '18 at 22:56

rc_dz

461
4
20

I was able to resolve my problem by reading that article and splitting my `.env` files into a `production.env` and a `development.env` file :-) – Tim Sep 28 '18 at 23:11

score 2 · Answer 2 · answered Sep 28 '18 at 22:55

It's possible that react-scripts is just overriding it to be development. Here is some source I dug up :O

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/scripts/start.js#L11

Perhaps options you can consider is use a different env variable (you can define whatever you want quite honestly. Or you can just leave the production build to react-scripts/create-react-app since it seems like they have some internal logic to do this for you.

score 0 · Answer 3 · answered Jun 06 '21 at 16:14

0

Create .env.qa1 and add build script:

"build-qa1": "sh -ac '. .env.qa1; react-scripts start'"

answered Jun 06 '21 at 16:14

Idan

3,604
1
28
33

Package.json - NODE_ENV to prod/deployment

3 Answers3