Как установить какое-либо значение в файле express backend server.js и использовать его в коде create-реакции-app?

Question

У меня есть простое приложение create-response-app с экспресс-бэкендом, содержащее только 1 файл (server.js), задача которого - просто запустить папку сборки и запустить веб-приложение.

код server.js выглядит следующим образом:

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)
})

Ниже показано, как запускается мое приложение реакции?

"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"
  },

Чего я сейчас пытаюсь достичь?

1.) Мое приложение create-реагировать на приложение имеет некоторые компоненты, такие как раскрывающиеся списки, переключатели и т. Д., И на основе некоторых вариантов выборки вызовы rest-api выполняются в коде реакции app.js и т. Д., И соответственно данные поступают в ответ загружен на страницу.

2.) Теперь есть две конечные точки rest-api. Один - разработчик, а другой - прод. Например: www.example-dev.com/ , www.example-prod.com/.

3.) Итак, исходя из того, какая облачная среда определена в коде server.js с использованием process.env.ENVIRONMENT_NAME === 'dev' ? env = 'dev' : env = 'prod', на котором запущено мое приложение create-реагировать, я хочу вызвать соответствующую конечную точку rest-api, например www.example-{env}.com/

4.) Итак, я хочу знать, как правильно установить это значение в server.js и использовать его в своем классе приложения-реактивов, где я хочу.

Например:

Ниже приведен фрагмент кода реагирующего компонента, в котором я хочу использовать значение env, установленное в server.js:

 handleOnChange = async selectedObj => {

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

Пожалуйста, помогите.

Answer 1

Есть несколько способов сделать это, вот несколько разных способов

1. Использование документов для создания реагирующих приложений REACT_APP
2. Использовать шаблонизатор для index.html
3. имеет конечную точку как / config
4. динамически создайте js-файл, включите его в ваш index.html

От 1 до 3 способов найти документ в Интернете

для 4-го пути вот как вы можете сделать

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

Убедитесь, что вы делаете это перед express.static

С вашим кодом выше, вот как это выглядит

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)
})

обновите ваш index.html, чтобы использовать наш новый файл js

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

в вашем реактивном компоненте, вы можете получить доступ по

console.log(window.SERVER_DATA)

рабочий пример:

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

Answer 2

Вы можете указать переменную окружения, которая начинается с REACT_APP_, например REACT_APP_ENVIRONMENT_NAME

И в вашем коде реакции вы можете получить к нему следующий доступ:

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

Вы также можете обновить скрипт сборки, чтобы передать переменную, подобную этой

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