$ crenv --target .env.production --public ./src/public -- [your after command here]

A file will be generated on your defined public path (./src/public/envs.js) with the variables that can be accessed on the client like this. You will just need to import the auto-generated file into your project, example:

<script src="public/envs.js"></script>

This is especially useful for SSR projects like those written in REACT and VUE where variables are loaded during build or when pages are rendered client-side and server-side.

This way we can access the client and server side variables automatically like this:

import env from "crenv";

// read client and server side environments
env.APPLICATION_ENV_HELLO

Then you no longer need to worry about dealing with process.env or knowing how and when you will need to access the environment variables in the client, everything will be done cross-environment and automatically.

Installation is easy with the npm command:

$ npm install --save crenv

If you only need the cli outside the project, you can install the lib globally:

$ npm install -g crenv

The cli allows the automatic generation of environment variables looking directly at the dotenv file which may vary in each your application environment.

Example: As long as you have an .env file:

// .env.production
MY_CROSS_ENV_ENVIRONMENT=production
MY_CROSS_ENV_API_URL=https://my-api.io
SECURITY_SERVER_KEY=88370f41-9204-43df-91a5-b089c6b3e89b

Some of your variables may need to be accessed server-side or client-side. When running:

$ crenv -e production --prefix MY_CROSS_ENV

A file will be generated with cross environments variables defineds with prefix MY_CROSS_ENV in its default public folder (./public/envs.js) and the client can consume it by importing the envs.js file into the page.

// public/envs.js

window.env = {
    MY_CROSS_ENV_ENVIRONMENT: "production",
    MY_CROSS_ENV_API_URL: "https://my-api.io"
}

Your project will automatically handle variables when you access them this way. On ssr pages for example, they will work in server-side as well as client-side rendering.

import env from "crenv"

export default () => (
  <div>
    <h1>My environment {env.MY_CROSS_ENV_ENVIRONMENT}</h1>
  </div>
);

// API client integration file
import env from "crenv"

export const getPosts = () => fetch(`${env.MY_CROSS_ENV_API_URL}/posts`);

OBS.:

• If no target dotenv file is defined or no environment is defined the crenv will read the environment variables from where it is running, from process.env.
• You need to define a prefix before running the command. If not defined, the default prefix is ​​APPLICATION_ENV. Only variables with the defined prefix are loaded, as in the example above.