Como armazenar o arquivo de configuração e lê-lo usando React

101

Sou novo no react.js, implementei um componente no qual estou buscando os dados do servidor e o uso como, 

CallEnterprise:function(TenantId){


    fetchData('http://xxx.xxx.xx.xx:8090/Enterprises?TenantId='+TenantId+' &format=json').then(function(enterprises) 
    {
        EnterprisePerspectiveActions.getEnterprise(enterprises);
    }).catch(function()
    {
        alert("There was some issue in API Call please contact Admin");
        //ComponentAppDispatcher.handleViewAction({
        //    actionType: MetaItemConstants.RECEIVE_ERROR,
        //    error: 'There was a problem getting the enterprises'
        //});
    });
},

Quero armazenar o Url no arquivo de configuração, então quando implantar isso no servidor de teste ou na produção, preciso apenas alterar o url no arquivo de configuração, não no arquivo js, ​​mas não sei como usar o arquivo de configuração no react.js

Alguém pode me orientar como posso conseguir isso?

javascript reactjs configuration webpack flux Dhaval Patel
fonte
1
Você usa webpack ou alguma ferramenta para compilar o código js?
Petr Bela
Seria comum enviar esse valor, definir e ler de uma variável de ambiente para a página da web como um valor global disponível em seu JavaScript. Em seguida, use-o para buscar dados.
WiredPrairie 01 de
1
@PetrBela: sim, estou usando o webpack para construir bundle.js, mas estou falando sobre um arquivo de configuração como web.config em .net
Dhaval Patel

Respostas:

123

Com o webpack você pode colocar configurações específicas de env no externalscampo emwebpack.config.js

externals: {
  'Config': JSON.stringify(process.env.NODE_ENV === 'production' ? {
    serverUrl: "https://myserver.com"
  } : {
    serverUrl: "http://localhost:8090"
  })
}

Se você deseja armazenar as configurações em um arquivo JSON separado, isso também é possível, você pode exigir esse arquivo e atribuir a Config:

externals: {
  'Config': JSON.stringify(process.env.NODE_ENV === 'production' ? require('./config.prod.json') : require('./config.dev.json'))
}

Então, em seus módulos, você pode usar a configuração:

var Config = require('Config')
fetchData(Config.serverUrl + '/Enterprises/...')

Para React:

import Config from 'Config';
axios.get(this.app_url, {
        'headers': Config.headers
        }).then(...);

Não tenho certeza se cobre seu caso de uso, mas tem funcionado muito bem para nós.

Petr Bela
fonte
2
De nada. BTW, desde então aprendemos que é melhor usar JSON para evitar erros de sintaxe. Eu atualizei o código de acordo.
Petr Bela
2
Hmm, não percebi que o require analisa o arquivo JSON. Como externalsespera que um código seja avaliado, você precisa sequenciar o JSON.
Petr Bela
21
isso não funciona para mim, recebo este erro: [Erro: Não é possível encontrar o módulo 'Config'] ao usar require ('Config')
amgohan
4
E se eu quiser que o webpack não empacote um arquivo de configuração separado em output.bundle.js? Se for um pacote separado, ainda posso exigir ('Config')? Obrigado
Barny de
3
Como algum de vocês fez isso funcionar? Eu faço exatamente como sugerido e estou recebendo 'Não é possível localizar o módulo' Config '', igual a @amgohan.
ceebreenk de
67

Se você usou Create React App, pode definir uma variável de ambiente usando um arquivo .env. A documentação está aqui:

https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables

Basicamente, faça algo assim no arquivo .env na raiz do projeto.

REACT_APP_NOT_SECRET_CODE=abcdef

Você pode acessá-lo de seu componente com 

process.env.REACT_APP_NOT_SECRET_CODE
surge
fonte
24
lembre-se de que o nome da variável deve começar comREACT_APP_
Tomasz Madeyski
Eu tenho um aplicativo ASP.NET Core criado com o modelo React e tudo que fiz foi adicionar um arquivo vazio na pasta 'ClientApp' e colocá REACT_APP_MYSETTING=value-lo, em seguida, referir-se a ele como process.env.REACT_APP_MYSETTINGem meu código JSX e funcionou. Obrigado!
Neo
.env não funciona comigo no projeto criar-reagir-app
user8620575
1
Você terá que reiniciar seu projeto em npm depois de adicionar .env ao seu diretório raiz
foyss
2

Você pode usar o pacote dotenv independentemente da configuração que usar. Ele permite que você crie um .env na raiz do seu projeto e especifique suas chaves como tal

REACT_APP_SERVER_PORT=8000

No arquivo de entrada de seu aplicativo, basta chamar dotenv (); antes de acessar as chaves assim

process.env.REACT_APP_SERVER_PORT
Joshua Underwood
fonte
1
embora eu ache que você precisa especificar suas chaves começando comREACT_APP_
HenryM
1

Caso você tenha um arquivo .properties ou um arquivo .ini

Na verdade, se você tiver algum arquivo que tenha pares de valores-chave como este:

someKey=someValue
someOtherKey=someOtherValue

Você pode importar isso para o webpack por um módulo npm chamado properties-reader

Achei isso muito útil, pois estou integrando o react com a estrutura Java Spring, onde já existe um arquivo application.properties. Isso me ajuda a manter todas as configurações juntas em um só lugar.

  1. Importe isso da seção de dependências em package.json

"properties-reader": "0.0.16"

  1. Importe este módulo para webpack.config.js no topo

const PropertiesReader = require('properties-reader');

  1. Leia o arquivo de propriedades

const appProperties = PropertiesReader('Path/to/your/properties.file')._properties;

  1. Importe esta constante como configuração

externals: { 'Config': JSON.stringify(appProperties) }

  1. Use-o da mesma forma mencionada na resposta aceita

var Config = require('Config') fetchData(Config.serverUrl + '/Enterprises/...')

Fangming
fonte
3
Sua etapa 2 sobre webpack.config.js, se alguém estiver usando create-react-app, então não há configuração do webpack (ou está oculto). Como proceder nesse caso?
joedotnot