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?

— 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

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.

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

"properties-reader": "0.0.16"

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

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

Leia o arquivo de propriedades

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

Importe esta constante como configuração

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

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

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

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