I am trying to set some environment variables (for making API calls to dev/prod endpoints, keys depending on dev/prod, etc.) and I'm wondering if using dotenv will work.
I've installed dotenv, and I am using webpack.
My webpack entry is main.js
, so in this file I've put require('dotenv').config()
Then, in my webpack config, I've put this:
new webpack.EnvironmentPlugin([
'NODE_ENV',
'__DEV_BASE_URL__' //base url for dev api endpoints
])
However, it is still undefined. How can I do this correctly?
Sorry for picking up old question, but
react-scripts actually uses dotenv library under the hood.
With react-scripts@0.2.3 and higher, you can work with environment variables this way:
.env
REACT_APP_BASE_URL=http://localhost:3000
App.js
const BASE_URL = process.env.REACT_APP_BASE_URL;
See docs for more details.
The short answer is no. A browser cannot access local or server environment variables so dotenv has nothing to look for. Instead, you specify ordinary variables in your React application, usually in a settings module.
Webpack can be made to take environment variables from the build machine and bake them into your settings files. However, it works be actually replacing strings at build-time, not run-time. So each build of your application will have the values hard-coded into it. These values would then be accessible through the process.env
object.
var nodeEnv = process.env.NODE_ENV;
Additionally, you could use the DefinePlugin
for webpack which lets you explicitly specify different values depending on your build target (dev, prod, etc.). Note that you have to JSON.stringify
all values passed into it.
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
}),
This is fine for any sort of public details but should never be used for any sort of private keys, passwords or API secrets . This is because any values baked in are publicly accessible and could be used maliciously if they contain sensitive details. For those sorts of things, you need to write some server-side code and build a simple API which can authenticate with the 3rd party API using the secrets, then pass the relevant details along to your client-side application. Your server-side API acts as an intermediary, protecting your secrets while still getting the data you need.
Actually, you can use dotenv in your React app with webpack. Moreover, there are several ways of doing it. However, keep in mind that it's still a build-time configuration.
A similar way to the answer above. You import dotenv
in your webpack config and use DefinePlugin to pass the variables to your React app. More complete guide on how you can inject your .env
files depending on current configuration could be found in this blog .
Using a dotenv-webpack
plugin . I personally find it really convenient. Let's say you have environments: dev
, staging
and prod
. You create .env file for each environment ( .env.dev
, .env.staging
, etc). In your webpack configuration you need to pick a correct file for the environment:
const Dotenv = require('dotenv-webpack'); module.exports = (env, argv) => { const envPath = env.ENVIRONMENT ? `.env.${env.ENVIRONMENT}` : '.env'; const config = { ... plugins: [ new Dotenv({ path: envPath }) ] }; return config; };
When you build the app for a particular environment, just pass the environment name to webpack:
webpack --config webpack.config.js --env.ENVIRONMENT=dev
API_URL=http://localhost:8000
$ npm install --save-dev dotenv
const webpack = require('webpack'); const dotenv = require('dotenv'); module.exports = () => { // call dotenv and it will return an Object with a parsed key const env = dotenv.config().parsed; // reduce it to a nice object, the same as before const envKeys = Object.keys(env).reduce((prev, next) => { prev[`process.env.${next}`] = JSON.stringify(env[next]); return prev; }, {}); return { plugins: [ new webpack.DefinePlugin(envKeys) ] };
I Just created a config.json in the source folder:
{
"api_url" : "http://localhost:8080/"
}
then required it in the file I needed it
const config = require('./config.json');
and used config.api_url
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.