lesen Umgebung Vars in einer einfachen Reaktion App

Question

Ich erstelle eine App mit create-react-app Modul, und in einer Komponente, ich versuche ein env zu lesen. var, wie diese

<p style={textStyle}>Environment: { process.env.AWS_ENV || process.env.NODE_ENV }</p> 

beginne ich die App mit AWS_ENV=live npm start und es liest nie diese var. das Ergebnis ist immer development. Ich bemerkte, tho, wenn ich die App mit npm run build bauen, wird der Ausgang production, aber trotzdem kann ich nicht die AWS_ENV var

Answer 1

erstellen reagieren-Apphttps://github.com/motdotla/dotenv verwenden. So laden ENV in Webpack und es in Browser zu übergeben, führen Sie diese Befehle in der Konsole:

echo -e 'REACT_APP_AWS_ENV=live' > .env 
npm start 

Hinweis REACT_APP_ Präfix Besonderes create reagieren-App.

Dann in Ihre Komponenten:

... 
{ process.env.REACT_APP_AWS_ENV } 
... 

Answer 2

Sie sollten AWS_ENV var in Ihrem webpack.prod.js gesetzt lesen.

new webpack.DefinePlugin({ 
     'process.env': { 
     'NODE_ENV': JSON.stringify('production'), 
     'AWS_ENV': JSON.stringify('live npm start') 
     } 
    }),