How to inject environment variables in Vercel Non-Next.js apps?

Question

I deployed a regular React app to Vercel and would like to have a API_BASE_URL environment setting with different values for development, preview and production environments.

Typically, I'd use dotenv npm package with my webpack config setting up the variables for local or production depending on the build by looking into env.local and env.production respectively.

The env.production would look like this:

API_BASE_URL=#{API_BASE_URL}

Then, I'd have my deployment pipeline replace all instances of #{___} with the respective values available in the pipeline.

However, the regular way in Vercel seems to be to make a Next.js app and the environment variables in the project will be automatically available in the process.env variable in the backend code.

Is there anyway for us to have environment variables in a non-Next.js in Vercel?

I'm thinking I have 2 ways forward:

1. There is actually an easy way 🍀
2. Create my own build and deployment pipeline to replace the #{___} placeholders and deploy using vercel deploy command.

Answer 1

Had a similar issue on my SPA (React + Webpack) app on deployed on Vercel. This is what worked for me.

https://github.com/mrsteele/dotenv-webpack#properties

webpack.config.js

const Dotenv = require('dotenv-webpack');

module.exports = {

  // OTHER CONFIGS

  plugins: [
    new Dotenv({
      systemvars: true
    })
  ]
};

Doing it like this I was able to read env vars from:

• Vercel build runtime (ex: VERCEL_ENV)
• .env file in my src folder
• Env variables defined in Vercel console