react env
3.1.0
Preende seu ambiente a partir de arquivos .env em tempo de execução, em vez do tempo de construção .
.env . Este pacote gera um arquivo __ENV.js de vários arquivos .env que contêm variáveis de ambiente listadas em branco que têm um prefixo REACT_APP_ .
< script src =" /public/__ENV.js " /> No navegador, suas variáveis estarão disponíveis na window.__ENV.REACT_APP_FOO e no servidor process.env.REACT_APP_FOO . Incluímos uma função auxiliar para facilitar a recuperação de um valor:
# .env
REACT_APP_NEXT= " Next.js "
REACT_APP_CRA= " Create React App "
REACT_APP_NOT_SECRET_CODE= " 1234 "torna -se ...
import env from "@beam-australia/react-env" ;
export default ( props ) => (
< div >
< small >
Works in the browser: < b > { env ( "CRA" ) } </ b > .
</ small >
< small >
Also works for server side rendering: < b > { env ( "NEXT" ) } </ b > .
</ small >
< form >
< input type = "hidden" defaultValue = { env ( "NOT_SECRET_CODE" ) } />
</ form >
< small >
Entire safe environment:
< pre >
< code > { { JSON . stringify ( env ( ) ) } } </ code >
</ pre >
</ small >
</ div >
) ;Implementamos alguns padrões sensatos que têm a seguinte ordem de prioridade:
{path-to-file} // from the --path, -p argument.env.{key} // from the --env, -e argument.env.local.env Sua configuração está disponível no navegador e process.env no servidor. Sugerimos que você adicione .env.local a .gitignore .
Estruturas como a seguir permitem alguns bons padrões como .env.local, .env.production, .env . Isso tem a limitação em que você pode executar seu aplicativo em diferentes ambientes, como "estadiamento, integração, controle de qualidade", mas ainda construir um aplicativo "produção" com NODE_ENV=production . Com o react-env isso é possível:
# .env.staging
REACT_APP_API_HOST= " api.staging.com "
# .env.production
REACT_APP_API_HOST= " api.production.com "
# .env.qa
REACT_APP_API_HOST= " api.qa.com "
# .env.integration
REACT_APP_API_HOST= " api.integration.com "
# .env.local
REACT_APP_API_HOST= " api.example.dev "
# .env
REACT_APP_API_HOST= " localhost " Para encenação, você simplesmente definiria APP_ENV=staging onde você executa seu aplicativo:
{
...
"scripts": {
"start": "react-env --env APP_ENV -- next start" // where .env.${APP_ENV}
}
...
}
Assim, REACT_APP_API_HOST=api.staging.com em seu ambiente de estadiamento.
Lembre -se de que você precisa passar o nome de uma variável de ambiente para
--env, não o valor dele.
- ✔ Uso válido (macOS):
APP_ENV=staging react-env --env APP_ENV -- next start- Erro comum:
react-env --env staging -- next start
Você também pode especificar o caminho para um arquivo Env específico:
{
...
"scripts": {
"start": "react-env --path config/.env.defaults -- next start"
}
...
}
Você pode usar qualquer combinação desses dois argumentos junto com o padrão .env, .env.local para criar sua configuração de tempo de execução.
Você também pode especificar o prefixo de variáveis de ambiente listado em branco:
{
...
"scripts": {
"start": "react-env --prefix NEXT_APP -- next start"
}
...
}
# .env
NEXT_APP_NEXT= " Next.js "
NEXT_APP_CRA= " Create React App "
NEXT_APP_NOT_SECRET_CODE= " 1234 " Você precisa adicionar REACT_ENV_PREFIX Env variável antes do comando jest se você usar env() durante seus testes:
{
...
"scripts": {
"test": "REACT_ENV_PREFIX=NEXT_APP jest --maxWorkers=3"
}
...
}
É possível usar este pacote como um script de ENTRYPOINT dentro de um Dockerfile. Isso gerará seu arquivo de configuração __ENV.js quando o contêiner botas e permitirá que seus scripts package.json permaneçam inalterados. Obviamente, o binário node deve estar presente em seu contêiner.
FROM node:alpine
ENTRYPOINT yarn react-env --env APP_ENV
CMD yarn start$ react-env < args > -- < command ><command> Você pode passar um comando, como um arquivo de entrada do NodeJS para a ferramenta CLI react-env . next dev react-scripts next start
--env , -e (padrão: nulo) Especifique o nome de uma variável de ambiente existente, cujo valor é o nome de um ambiente que você deseja, para fazer com que o React-ENV analise um ambiente específico do ambiente. Por exemplo, você pode definir primeiro APP_ENV=staging e depois aplicar --env APP_ENV sinalizador. React-env carregaria .env.staging, .env.local, .env nessa ordem, com a última tendo prioridade.
--path , -p (padrão: nulo) Especifique um arquivo Env específico para carregar por exemplo, react-env --path .env.testing carregaria .env.testing, .env.local, .env nessa ordem com a última prioridade. Uma combinação de --env APP_ENV --path testing onde APP_ENV=staging carrega .env.testing, .env.staging, .env.local, .env como ordem de prioridade.
--dest , -d (padrão: ./public) Altere o destino padrão para gerar o arquivo __ENV.js .
--prefix (padrão: react_app) Altere o prefixo padrão para variáveis ENV listadas em branco. Para o Exemple react-env --prefix CUSTOM_PREFIX Will White-List Variáveis como: CUSTOM_PREFIX_PUBLIC_KEY=my-public-key
--debug (padrão: false) Habilite a depuração para o React-ENV. Isso registrará variáveis de ambiente do navegador carregado em seu console ao executar react-env --debug
Como uma mudança de ruptura significativa, retiramos a capacidade de especificar arquivos específicos por meio do argumento --env . Este argumento agora especifica o arquivo de ambiente a ser analisado, dependendo do ambiente de corrida. Por exemplo --env APP_ENV ou -e APP_ENV Where APP_ENV=staging lê em .env.staging . É muito comum que as plataformas tenham ambientes staging, qa, integration que ainda são incorporados no modo de "produção" com NODE_ENV=production . Isso permite a USECASE e muitos outros.
-Você ainda pode especificar arquivos por meio do argumento --path, -p .
Também caímos adicionando NODE_ENV por padrão, pois esse era um risco de segurança.
O arquivo agora é nomeado __ENV.js
O comando dendanda está agora no formato react-env <args> -- <command>
