Как передать переменную env клиентской стороне в рабочей области nx?

Question

Я запускаю приложение nextJS в рабочей области NX, и мне нужно получить доступ к переменным env на стороне клиента.

/apps/myproject/.local.env

      NEXT_PUBLIC_PROJECT=my-super-project

/apps/myproject/next.config.tsx

      module.exports = {
  publicRuntimeConfig: {
    PROJECT: process.env.NEXT_PUBLIC_PROJECT
  }
}

В моем следующем приложении JS я пробую несколько вещей:

/apps/myproject/pages/_app.tsx

      import nextConfig from 'next/config'
const { publicRuntimeConfig } = nextConfig()
// ...
console.log(process, publicRuntimeConfig)

Запуск приложения через nx serve myproject не дает мне никаких результатов на клиенте, но на стороне сервера я вижу NEXT_PUBLIC_PROJECTзначение. Я не совсем уверен, читает ли мой файл next.config.js вообще nx ...

Answer 1

Для тех, у кого все еще есть эта проблема.
Для загрузки переменных env в реактивный проект требуется следующее:

1. Создать .envфайл на уровне приложения.
   Пример: apps/myReactApp/.env
2. Добавьте переменную с префиксом NX
   . Пример: если вы можете использовать переменную с именем «APP_NAME» , добавьте в нее «NX_APP_NAME» .NX загружает только те переменные, которые имеют префикс «NX» .

Если вы хотите загрузить разные файлы env для разных конфигураций, вы можете сделать это следующим образом:

      For QA: `npx env-cmd -f apps/web-client/.env.qa nx run web-client:build:qa`,  
For staging: `npx env-cmd -f apps/web-client/.env.staging nx run web-client:build:staging`, 
NOTE: you need to install env-cmd package 

Подробнее о загрузке переменной окружения в их документации.

Answer 2

Когда ты бежишь npm build или же npm start, nx ​​- под капотом получает ваши переменные окружения и записывает их в скомпилированный код. Поэтому для доступа к ним не требуется никакой специальной логики.

Поэтому в файлах внешнего интерфейса просто обращайтесь к .env через process.env.SOME_CONST.

Кроме того, интересным фактом о скомпилированном коде является то, что при отладке у вас есть такие регистраторы:

      if(environment === 'development') {
  console.log('Log sample');
}

Затем этот код полностью исключается из скомпилированного кода, который сжимает ваши файлы dist.

---

Это может быть вам полезно: https://create-react-app.dev/docs/adding-custom-environment-variables/

---

С наилучшими пожеланиями, Евгений.