javascript - Package.json - NODE_ENV to proddeployment - Stack Overflow

admin管理员组

文章数量:1355540

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!

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!

• javascript
• reactjs
• react-router

Share Improve this question Follow edited Sep 29, 2018 at 5:16 Thành Tài 311 silver badge11 bronze badge asked Sep 28, 2018 at 22:24 TimTim 2,42177 gold badges2626 silver badges4747 bronze badges 7

• works on my machine, question, did you save the file? – rc_dz Commented Sep 28, 2018 at 22:32
• @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 Commented Sep 28, 2018 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 Commented Sep 28, 2018 at 22:38
• @rc_dz Correct, I'm not putting a space between start and prod I'm running npm run start:prod – Tim Commented Sep 28, 2018 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 Commented Sep 28, 2018 at 22:41

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 5

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

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

https://github./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.

Create .env.qa1 and add build script:

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

本文标签： javascriptPackagejsonNODEENV to proddeploymentStack Overflow