How to Access Vue.js (or Express) env variables in an API endpoint

Question

I have a folder called /api in the root of the application where I access an endpoint from the Frontend /src to send an email. I'd like to call an environment variable here but it is not working with process.env.VUE_APP_APIKEY. What is the right way to do this?

This is the endpoint I am calling the env variable from. This is using express:

let endpoint = function(app) {
  app.post('/send-mail', function(req, res) {
    sgMail.setApiKey(process.env.VUE_APP_APIKEY);
    sgMail
      .send(req.body)
      .then(() => {
        // do something
      })
      .catch(error => {
        // do something
      });

    return res.send(req.body);
  });
};

That sgMail is sendgrid, hence the API key I'm calling is for that service.

Are you getting any errors? Is VUE_APP_APIKEY defined as an environment variable? — Cisco
– Cisco, Commented Jun 18, 2018 at 13:31
No, the env variable works in the frontend correctly, but since /api is not inside /src then I think Vue env variables aren't available. — Edgar Quintero
– Edgar Quintero, Commented Jun 18, 2018 at 15:41
Yes that is correct. Your Vue app is running on an entirely different process than your Express application. So you need to define them in both places. — Cisco
– Cisco, Commented Jun 18, 2018 at 16:12

rphonika · Accepted Answer · 2018-06-18 13:49:50Z

1

You have to define your env vars somewhere. process.env returns an object containing all the user environment.

You can define your env vars when you run node, by doing something like this:

MY_VAR=my_value node server.js

An easy way to manage your environment variables with Node.js is to use dotenv.

Create a .env file at the root of your repo or anywhere (depending on your needs) and add your env vars like this:

VUE_APP_APIKEY=[API KEY VALUE]

Then add the following line of code into your server.js or index.js (where your Express is instantiated):

require('dotenv').config()

Hence you should be able to use your env vars by using your existing code: process.env.VUE_APP_APIKEY.

answered Jun 18, 2018 at 13:49

rphonika

1,12110 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Edgar Quintero Over a year ago

Thanks, do you know of anyway to do this natively with Vue?

rphonika Over a year ago

Based on the name of your env var, you're using Vue CLI, right? In that case, you can add your env vars within a .env file (without using dotenv) and prefix all of them by VUE_APP_.

Edgar Quintero Over a year ago

Thanks but doesn't work, I think it needs to be inside /src folder for it to work.

Edgar Quintero Over a year ago

Thanks, fyi just had to use env package and created a file and it's being read globaly. So I guess I'm stuck with Vue env variables for front end stuff, and a regular .env file for API stuff.

rphonika Over a year ago

Yes, your .env file must be into the root folder of your frontend code, /src in your case. Cool if everything works ;-)

Collectives™ on Stack Overflow

How to Access Vue.js (or Express) env variables in an API endpoint

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related