Nuxt dotenv-module and deploying to Netlify

beardedpayton
0
beardedpayton
commented 17 days ago

Version

1.3.0

Reproduction link

https://github.com/beardedpayton/paytonburdette.com-v2

Steps to reproduce

Install module

npm i nuxtjs/dotenv

** cant include the @ symbol here, it thinks I'm trying to tag a user in the issue

Require module in nuxt.config.js

require('dotenv').config()

Add module to modules array in nuxt.config.js

modules: ["@nuxtjs/dotenv"]

Use "module in codebase with process.env.ENVVARNAME

What is expected ?

Works as expected locally. I can read from my .env file fine.

When deploying to Netlify and using build environment variables, I should be able to read from those variables within my project.

What is actually happening?

I cannot read variables from my build environment variables established with Netlify. I can only read from them if a .env file is present.

bug
0
nyl-auster
58
nyl-auster
commented 12 days ago

My previous answer was incorrect ( I deleted it) and probably does not fix your issue.

You probably want to set your env property in nuxt.config.js, for example:

module.exports = {
  env: {
    LAMBDA_FUNCTIONS_BASE_URL: process.env.LAMBDA_FUNCTIONS_BASE_URL,
    CONTACT_FORM_TO: process.env.CONTACT_FORM_TO
  },
  // ...

In your component, you can now use them :

      sendMail({
        to: process.env.CONTACT_FORM_TO,
        email: this.inputs.email,
        message: this.inputs.message
      })

Your .env file won't be available on Netlify server as it is not versioned by default (see Nuxt .gitignore file). But Netlify environment variables are accessible simply with process.env.YOUR_VARIABLE.

On your local machine, the code above will still use the variables from your .env file. (thanks to @nuxtjs/dotenv module)

Note that process.env.YOUR_VARIABLE is normally only accessible from server side. That's why we need to use the env property from Nuxt config file , so that process.env.XXX can be replaced with the right values on client side too.

@nuxtjs/dotenv does this automatically from .env file, but as we do not have .env file on Netlify server, it can help us on Netlify.

@nuxtjs/dotenv is not a way to access environment variables, but a way to create environment variables from you .env file

0
Informations
Bug Report โ€ข Open
#c20 - Created 17 days ago