A common use case you may have in your web app is sharing some environment variables between your server-side and client-side code.
Hopefully, you are already following best practices and have these environment variables stored inside a .env
file:
HOST=https://myapp.com
APP_ID=my-new-app
REST_API_ENDPOINT:https://myapp.com/api
On the server, you can use the dotenv npm module to read your .env
file and put all the information in process.env
.
const dotenv = require('dotenv');
dotenv.config();
console.log(process.env)/*
Console log: { HOST: "https://myapp.com", APP_ID: "my-new-app", REST_API_ENDPOINT: "https://myapp.com/api" }
*/
You can’t use dotenv on the client because it has a dependency on the file-system. If you aren’t using NextJS, you will have to update your Webpack config to inject the environment variables so they are available globally.
However, if you are using NextJS, there is a simpler way. You can add the environment variables to your next.config.js
file:
module.exports = {
publicRuntimeConfig: {
appId: process.env.APP_ID,
host: process.env.HOST,
restAPIKey: process.env.REST_API_KEY,
}
};
Then, you can call these variables from some client-side code:
import getConfig from "next/config";
const { publicRuntimeConfig } = getConfig();// Here, publicRuntimeConfig contains `appId`, `host`, `restApiKey`export default publicRuntimeConfig;
This is an easy way to:
- Keep all your environment variables in one place (your
.env
file), - Explicitly specify which of them should be exposed to the client
- Not fiddle with Webpack config (who enjoys doing that?)
PS: If you are using Create React App on the frontend, there’s an even simpler way. You can prefix all your variables inside the .env
file with REACT_APP
.
Originally published at http://tilomitra.com on August 15, 2019.