Блог

Главная - Вопросы по программированию - Доступ к переменным среды из приложения на стороне клиента

Доступ к переменным среды из приложения на стороне клиента

#javascript #reactjs #webpack #environment-variables #dotenv

#javascript #reactjs #webpack #переменные среды #dotenv

Вопрос:

Я хочу получить доступ к переменным среды из моего файла .env, расположенного в корневом каталоге, и использовать их в моем App.js Файл реакции с использованием dotenv. Однако я не могу получить к ним доступ. на стороне клиента (App.js ).

Структура файла:

Переменные, которые я хочу использовать: root/.env
Файл, в котором я хочу их использовать: root/client/src/App.js

.env-файл:

 PORT=5432  
TEST=911  
REACT_APP_WEATHER=12345678

App.js файл

 import './App.css';
require("dotenv").config();

// Doesn't show the variables in the .env file
console.log(process.env);

function App() {
  return (
    <div className="App">
      Hello
    </div>
  );
}

export default App;

Я читал, что dotenv (который установлен в моем корневом каталоге) не работает на стороне клиента и только на стороне сервера, используя переменные среды в React. Нужно ли мне устанавливать этот веб-пакет? Я попытался установить его в своем клиенте, но это создало много ошибок.

Примечание: я хочу сохранить переменные среды моего сервера и клиента в одном файле .env

Комментарии:

1. На клиенте нет process , и переменных среды тоже нет. Если вы хотите передать значения с сервера на клиент, сделайте это обычным способом.

2. Вы не используете dotenv на стороне клиента. Используете ли вы create-react-app ?

3. @Jayce444 да, я использовал npx create-react-app client для создания клиентской папки. Итак, как мне получить доступ к этим переменным

4. @Bergi Я следил за документацией React для доступа к переменным среды, таким как process.env.NODE_ENV

Ответ №1:

При create-react-app этом вам не нужно использовать dotenv библиотеку чего-либо подобного. Для чтения из .env файла все, что вам нужно сделать, это добавить к имени всех переменных префикс REACT_APP_ . Например:

 REACT_APP_PORT=5432  
REACT_APP_TEST=911  
REACT_APP_WEATHER=12345678

create-react-app автоматически сделает его доступным для вас во время сборки. В вашем приложении react из любого места вы можете console.log это:

 console.log(process.env.REACT_APP_PORT); //5432