Access to environment variables in Vue app in Heroku

Question

I am building an app in Vue for the front and Node for the back and I am using environment variables for private API keys. The .env file are in the root for my global project and locally I am using Dotenv-Webpack to access them in my front.

Locally everything is working but when I am deploying the app in Heroku, the variables are undefined

Here is the structure of my project

client
  -> public
  -> src
     -> components
     -> assets
     ...
  ...
routes
services
tests
...
.env

And here is the configuration of my vue.config.js

const path = require("path");
const Dotenv = require("dotenv-webpack");

module.exports = {
  transpileDependencies: ["vuetify"],
  outputDir: path.resolve(__dirname, "../public"),
  devServer: {
    proxy: "http://localhost:5000"
  },
  configureWebpack: {
    plugins: [
      new Dotenv({
        path: "../.env", // load this now instead of the ones in '.env'
        systemvars: true
      })
    ]
  }
};

Does anyone have an idea ? Just to reminder, it can access my .env in my components locally but not when I deploy the app in Heroku

Answer 1

1 - you need to define your env vars in heroku. Check this out https://devcenter.heroku.com/articles/config-vars

2- don't commit your .env file in any way.

3- heroku doesn't use the .env file you use localy. So path property in your config have no effect.

4- keep the systemvars : true as it will load all the system vars which is the env vars you defined in heroku dashboard/CLI