如何在快速后端server.js文件中设置一些值并在create-react-app代码中使用它？

Question

I have a simple create-react-app with a express backend with only 1 file (server.js) whose job is to just execute build folder and start the web app.

server.js code looks like below:

const path = require('path')
const express = require('express')
const isProduction = process.env.NODE_ENV === 'prod'
const port = process.env.PORT ? process.env.PORT : 3000
const app = express()
var env = ""

// check below environment variable to identify on what environment on cloud service web-application is running
process.env.ENVIRONMENT_NAME === 'dev' ? env = 'dev' : env = 'prod'

// Add expressjs 'logger' plugin for printing logs and FE errors
app.use(
    logger({
        noop: isProduction
    })
)

app.use((req, res, next) => {
    // if i try to log env name like below i'm able to see the value
    // but if i try to log this anywhere like below in react code (it's always undefined)
    console.log(process.env.ENVIRONMENT_NAME);
})


// Serves static assets
app.use(express.static('./build'))
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, './build', 'index.html'))
})

app.listen(port, (error, result) => {
    if (!isProduction && error) {
        console.log(error)
    }
    console.log('Server running on port ' + port)
})

Below is how my react app starts?

"scripts": {
    "postinstall": "npm run build",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "start": "NODE_ENV=prod node server.js",
    "develop": "react-scripts start"
  },

What I'm trying to achieve now?

1.) My create-react-app is having some components like drop-downs, radio-buttons etc and based upon some selections fetch rest-api calls are done in react code app.js etc and accordingly data came in the response is loaded on the page.

2.) Now, there are two rest-api end-points. One is dev and one is prod. For eg: www.example-dev.com/ , www.example-prod.com/ .

3.) So, based upon what cloud environment is determined in server.js code using process.env.ENVIRONMENT_NAME === 'dev' ? env = 'dev' : env = 'prod' process.env.ENVIRONMENT_NAME === 'dev' ? env = 'dev' : env = 'prod' on which my create-react-app is running, i want to call respective rest-api end point like www.example-{env}.com/

4.) So, i want to know the right way to set this value in server.js and use it in the react-app some component class wherever i want.

For eg:

Below is some react component piece of code, where i want to use env value set in server.js:

 handleOnChange = async selectedObj => {

      let responseObj = await callRestAPI(`www.example-${env}.com`);
      this.props.onChange(selectedObj);
  };

Please help.

Answer 1

There are multiple ways to do this, here are few different ways

1. Using create react app docs REACT_APP thing
2. Use a templating engine for index.html
3. have endpoint as /config
4. create a js file dynamically, include it in your index.html

1 to 3 ways you can find doc online

for 4th way here is how you can do

fs.writeFileSync(path.join(__dirname, './build', 'config.js'), `window.SERVER_DATA = { env : ${process.env.ENVIRONMENT_NAME}}`);

Make sure you do this before express.static

With your code above, here is how it looks

const path = require('path')
const express = require('express')
const isProduction = process.env.NODE_ENV === 'prod'
const port = process.env.PORT ? process.env.PORT : 3000
const app = express();
const fs = require('fs');
var env = ""

// check below environment variable to identify on what environment on cloud service web-application is running
process.env.ENVIRONMENT_NAME === 'dev' ? env = 'dev' : env = 'prod'

// Add expressjs 'logger' plugin for printing logs and FE errors
app.use(
    logger({
        noop: isProduction
    })
)

app.use((req, res, next) => {
    // if i try to log env name like below i'm able to see the value
    // but if i try to log this anywhere like below in react code (it's always undefined)
    console.log(process.env.ENVIRONMENT_NAME);
})



fs.writeFileSync(path.join(__dirname, './build', 'config.js'), `window.SERVER_DATA = { env : "${process.env.ENVIRONMENT_NAME}"}`);

// Serves static assets
app.use(express.static('./build'))
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, './build', 'index.html'))
})

app.listen(port, (error, result) => {
    if (!isProduction && error) {
        console.log(error)
    }
    console.log('Server running on port ' + port)
})

update your index.html to use our new js file

<script src="./config.js"></script>

in your react component, you can access by

console.log(window.SERVER_DATA)

working example:

https://codesandbox.io/embed/express-5o8ei

Answer 2

You can provide an environment variable that starts with REACT_APP_ for example REACT_APP_ENVIRONMENT_NAME

And in your react code you can access it like this:

let env = process.env.REACT_APP_ENVIRONMENT_NAME;    
let responseObj = await callRestAPI(`www.example-${env}.com`);

You can also update the build script to pass the variable like this

"build": "REACT_APP_ENVIRONMENT_NAME=$ENVIRONMENT_NAME react-scripts build",