What would be the best way to pass environment variables to my react application?

How to Use GitLab
1

So locally, I have a .env file that I’m injecting into my react application via the dotenv plugin like so

const dotenv = require('dotenv').config({ path: __dirname + '/.env' });

and then passing it to webpack like this

module.exports = {
  ....
  new webpack.DefinePlugin({
    'process.env': dotenv.parsed
  })
  ....
}

This works fine in development mode but when I push my code to my gitlab repo and it goes through my CI pipeline, the app once pushed to production will not have any of the environment variables setup because the .env file is being ignored in my .gitignore file. This brings me to my actual question. How do I ensure that these environment variables are available in production when I deploy the app? In my repo, I have a .env-example file with the environment variables set to an empty string. I was thinking of doing something like this in the build stage in my gitlab-ci.yml

stages:
  - build
  ....

Build_Site:
  ....
  stage: build
  before_script:
     .env-example > .env // create .env file
     // somehow initialize each environment variable to their corresponding value.
  script: npm build
  ....

Though I’m not sure if it is possible to do this in gitlab ci. Any help or tips would be vastly appreciated.

2

would also like to know this. have you found a solution?

3

I 'm super interested to hear about this solution.