Nuxt dotenv-module and deploying to Netlify

beardedpayton
0
beardedpayton
commented 3 months 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 2 months 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 not 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
mornir
0
mornir
commented 2 months ago

@yann-yinn Whoa! Thank you! I've spent quite some time figuring out why I was getting errors when navigating to new pages on my website. The first page rendered on the server was fine, but then the process.env variables were undefined.

@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.

I don't fully understand this sentence. Did you mean nuxtjs/dotenv cannot help us on Netlify?

So did I understand this correctly: when the page is rendered on the server, Netlify is able to replace the process.env variables. But when the web-app turned into a SPA after the first navigation, Netlify have "no more control". That is why we have Netlify store the process.env variables in the nuxt.config.js file, so that they can be accessed throughout the web-app?

0
nyl-auster
58
nyl-auster
commented 2 months ago

@mornir sorry I made a typo, i should have wrote "it can not help us on Netlify". I corrected the sentence on the above post.

You got it :) process.env is only for the server. This is not supposed to work at all on client side; but Nuxt provides us a way to make it work on client side by using the env property of nuxt.config.js file. ( using webpack to replace variables from client code at compile time i guess)

0
Informations
Bug Report โ€ข Open
#c20 - Created 3 months ago