2

У меня такой вопрос, я пытаюсь понять, как запустить react приложение(созданное через create-react-app) c разными профайлами. То есть, допустим у меня есть несколько окружений(local, dev, prod) и у меня есть fetch, который обращается на backend(который развернут на другом сервере). И у backend есть свои адрес для каждого окружения. То есть мне нужно как-то установить глобально переменную, которую я давать fetch и все будет работать. например в Springboot это можно делать через application-"profile".properties. Запускаю я приложение через npm install -g serve & serve -s build. Как это сделать?

2 ответа 2

2

Вы можете обратиться к переменной окружения NODE_ENV, и проверять ее состояние:

const serverUrl = process.env.NODE_ENV === 'development'
        ? 'http://localhost:4000'
        : 'http://youdomain.com:4000'

Или использовать компонент dotenv, и создать файл .env, в него записать все необходимые переменные окружения, например

REACT_APP_GOOGLE_CLIENT_ID = XXX-YYY-ZZZ.apps.googleusercontent.com
REACT_APP_API_PROTOCOL = http:
REACT_APP_API_HOST = localhost:3000
NODE_PATH = src/scripts
PORT = 9001

А потом запускать

"start": "react-scripts start dotenv_config_path=.env",
"build": "react-scripts build dotenv_config_path=.env.production",

И ваше переменные будут свойствами объекта process.env

1

Я нашел ответ на свой вопрос. Для того, чтобы это организовать нужно в корень проекта добавить два файла:

.env

REACT_APP_BACKEND_DOMAIN=http://localhost:8080

.env.production

REACT_APP_BACKEND_DOMAIN=http://app.com

и после этого в коде в нужном месте достаете переменную process.env.REACT_APP_BACKEND_DOMAIN:

return fetch(process.env.REACT_APP_BACKEND_DOMAIN + '/topics', {
    method: 'GET'
}).then((response) => response.json());

При локальном запуске npm run react достанет переменную с файла .env. При продакшн запуске serve -s build, react достанет переменную уже с файла .env.production.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.