Question

ENV variables which work locally with a .env file, do not work on app platform at runtime

Posted February 25, 2021 4.8k views
Node.jsVue.jsDigitalOcean App Platform

The Problem

Our node.js Nuxt.js app uses env variables connected with dotenv. When running in dev mode and in production build locally with a standard .env file, our env’s work fine.

In Digital Oceans App Platform, we have added the env variables to the app level env settings and deployed the app:
API_BASE_URL = https://api.example.com

But the env’s dont seem to be working.

How we’ve tested this

In one of our main JS file we have console logged an env as follows:
console.log(process.env.API_BASE_URL);

This log returns the correct env locally both in build and dev mode. But in App Platform, it returns undefined. So this suggests, the unique way in which App Platform handles env variables is not working with our set up (which I would have thought was pretty standard practice with a normal .env file in the root and using dotenv

Primary Question

Does anyone know what else is needed to get Digital Oceans App Platform env variables to work correctly at runtime?

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

×
Submit an Answer
1 answer

Generally you don’t check in your .env file into source control, so I suspect that the dotenv plugin that is bundled with nuxtjs is not triggering to inject them into your nuxt.config.js.

The mapping of environment vars that get bundled is explicit in your nuxt.config.js under the env key. From what I understand, the dotenv plugin is a convenience to generate that list dynamically based on your local .env file. You should be able to configure it for app platform by listing them explicitly: https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-env/

Assuming you had set an environment variable called API_BASE_URL on your app or your component, you could reference it in your nuxt.config.js as follows:

...
env: {
  API_BASE_URL: process.env.API_BASE_URL,
},
...

Please let me know if you have any other questions.