Как получить env переменную?

Question

[Isaac Clark]

Здравствуйте.
Есть env переменная, в командной строке, если написать echo $TEST, то выводит данные.
Мне в приложении нужно получить эту переменную для endPoint, чтоб делать запросы.
Подскажите пожалуйста, как можно получить эту переменную, что использовать ее дальше на фронтенде?
Приложение использует webPack и Реакт

Answer 1

[Антон Спирин]

webpack.DefinePlugin

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      __API_URL__: JSON.stringify(process.env.API_URL),
    });
  ],
};

Comments

[Isaac Clark]

подскажите пожалуйста, DefinePlugin нужно установить?

[Антон Спирин]

Isaac Clark, нет, он входит в библиотеку webpack.

[Isaac Clark]

Антон Спирин, а как потом обратиться к переменной __API_URL__? после того, как я добавил, то что вы написали и снова стартанул Вебпак, то у меня undefined выводиться
Нужно импортировать переменную __API_URL__? или можно к ней напрямую обращаться?

[Антон Спирин]

Isaac Clark, а что вы в нее передаете? process.env.API_URL я для примера написал.
Да, обращаться надо напрямую.

[Isaac Clark]

Антон Спирин, простите, может я неправильно написал
Сейчас если в терминале написать
echo $DJANGO
то возвращается 55.55.55.123
Этот url каждый раз может меняться, поэтому в endPoint мне нужно добавить именно переменную $DJANGO.
Соответсвенно, я сделал, как вы написали

new webpack.DefinePlugin({
      $DJANGO: JSON.stringify(process.env.$DJANGO)
    }),

но при обращении в самом JS таким образом
console.log( process.env.$DJANGO)
мне приходит undefined

[Антон Спирин]

Isaac Clark,
process.env.DJANGO
символ $ в консоли используется.

[Isaac Clark]

Антон Спирин, не совсем вас понял, то есть, нужно переименовать переменную без символа $?

[Антон Спирин]

Isaac Clark, переменная к которой вы обращаетесь в консоли:
echo $DJANGO имеет имя DJANGO.
В коде к ней надо обращаться:
process.env.DJANGO

[Isaac Clark]

Антон Спирин, не помогло, все равно undefined
заменил

new webpack.DefinePlugin({
      DJANGO: JSON.stringify(process.env.$DJANGO)
    })

и таким образом пробовал

new webpack.DefinePlugin({
      DJANGO: JSON.stringify(process.env.DJANGO)
    })

и в JS обращаюсь
console.log( process.env.DJANGO)
все равно undefined

[Антон Спирин]

Isaac Clark, вы похоже суть не поняли. Под консолью я имел ввиду command line.
Правильно так:

new webpack.DefinePlugin({
  DJANGO: JSON.stringify(process.env.DJANGO)
}),

[Isaac Clark]

Антон Спирин, я так тоже делал
после чего, заново запустил ВебПак и в JS добавил
console.log( process.env.DJANGO)
И все равно undefined

[Isaac Clark]

Антон Спирин, может это поможет
вот так была добавленна эта переменная
в командной строке написали
export DJANGO=http://55.55.55.123/

[Isaac Clark]

Антон Спирин, а если просто написать в консоль лог process.env, то возвращается пустой объект

[Антон Спирин]

Isaac Clark, вы в разных окнах задаете переменную и вызываете webpack?
Как вы вообще сборку запускаете?
Пишу к shell:
export DJANGO=http://55.55.55.123/
В том же окне shell запускаю webpack и получаю:

console.log(process.env.DJANGO); // http://55.55.55.123/

[Isaac Clark]

Антон Спирин, так и запускаю, в том же окне пишу
export DJANGO=http://55.55.55.123/
потом в том же окне пишу
webpack-dev-server --open
после чего в JS добавляю
console.log(process.env.DJANGO);

[Антон Спирин]

Isaac Clark, а сборку webpack где вы делаете? webpack.DefinePlugin надо писать в webpack.config.js

[Isaac Clark]

Антон Спирин, так и пишу, в конфиг

[Антон Спирин]

Isaac Clark,

после чего в JS добавляю

После запуска webpack-dev-server добавляете или все-таки до?

[Isaac Clark]

Антон Спирин, спасибо, вопрос решен )