Как мы можем передать переменные окружения или конфигурации во время выполнения в cra (createreactapp) - PullRequest
Новая
       33

Как мы можем передать переменные окружения или конфигурации во время выполнения в cra (createreactapp)

0 голосов
/ 06 ноября 2018

Как мы можем передать переменные окружения или конфигурации во время выполнения в cra (createreactapp). Я не хочу собирать для разных env, но использую одну сборку с разными конфигами в разных env

Ответы [ 2 ]

0 голосов
/ 06 ноября 2018

Мы создаем наши приложения создания-реагирования как статические веб-сайты и помещаем их непосредственно на простой веб-сервер. Вот почему вы не можете использовать переменные env там. Мы нашли хороший обходной путь, и мы планируем написать небольшой пост об этом:

1. Запустите ваше приложение с (одной) переменной среды

Предположим, у вас есть среда разработки, промежуточная и производственная среда, как и у большинства наших проектов.

Мы установили только одну переменную ENV REACT_APP_ENV в наших сценариях запуска. Каждая среда имеет свой собственный скрипт запуска и сборки. 

# package.json
# ...
"scripts": {
  "start": "REACT_APP_ENV=development react-scripts start",
  "start:staging": "REACT_APP_ENV=staging react-scripts start",
  "start:prod": "REACT_APP_ENV=production react-scripts start",
  "build:staging": "REACT_APP_ENV=staging react-scripts build",
  "build:prod": "REACT_APP_ENV=production react-scripts build"
},

2. Установочный конфигурационный файл

В вашем приложении для создания реакции вы сохраняете файл конфигурации под src/config/index.js. В этом конфигурационном файле вы можете определить значения в зависимости от среды. 

# src/config/index.js
const env = process.env.REACT_APP_ENV

export const appConfig = {
  api: {
    networkInterface: ({
      development: 'http://localhost:5000/graphql',
      staging: 'https://project-staging.herokuapp.com/graphql',
      production: 'https://project.herokuapp.com/graphql',
    })[env],
    // add more here
  },
}

export default appConfig

3. Использование

В приложении вы получаете доступ к конфигурации просто так: 

import config from './src/config'

# usage
config.api.networkInterface
0 голосов
/ 06 ноября 2018

Вы можете добавить 2 файла переменных среды в корневой каталог вашего проекта для разработки и производственных версий. Они должны быть названы;

.env.development - будет использоваться запуск npm (стадия разработки) .env.production - это будет использовать для сборки (этап prod)

Свойство можно добавить, как показано ниже, обратите внимание на префикс REACT_APP_ 

REACT_APP_PROPERTY1=some_value

И это свойство можно прочитать как 

<p>{process.env.REACT_APP_PROPERTY1}</p>
...