Nuxt dotenv-module and deploying to Netlify #25
Comments
ghost
added
the
|
My previous answer was incorrect ( I deleted it) and probably does not fix your issue. You probably want to set your 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 On your local machine, the code above will still use the variables from your Note that
|
|
@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.
I don't fully understand this sentence. Did you mean 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? |
|
@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 :) |
|
I guess I missed that one in the docs, thanks guys ! 🍉 💚 |
|
@JulienTant can closed? |
|
It is not working in one of my projects. It is very particular to this project and I don't know what Im doing wrong. I did not deploy my .env file as always. I have also configured properly all the env variables in netlify. To test the problemOpen the console and refresh the page. I have printed 3 ENV Variables that were available and configured in Netlify during the build.
Locally I can see that Webpack exposed the variables to my client//DEV //BUILD Netlify ENV Variables
This is my project dependencies "dependencies": {
"@nuxtjs/auth": "^4.9.1",
"@nuxtjs/axios": "^5.3.6",
"@nuxtjs/moment": "^1.6.0",
"@nuxtjs/pwa": "^3.0.0-0",
"bootstrap-vue": "^2.12.0",
"js-yaml": "^3.13.1",
"nuxt": "^2.12.2",
"randomstring": "^1.1.5",
"vue-mermaid": "0.0.12",
"vuex-persist": "^2.2.0"
},
"devDependencies": {
"@nuxtjs/dotenv": "^1.4.1",
"@nuxtjs/eslint-config": "^2.0.0",
"@nuxtjs/eslint-module": "^1.0.0",
"@vue/test-utils": "^1.0.0-beta.27",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.1.0",
"eslint": "^6.1.0",
"eslint-plugin-nuxt": ">=0.4.2",
"jest": "^24.1.0",
"vue-jest": "^4.0.0-0"
}This is my nuxt.config/* eslint-disable no-unused-vars */
/* eslint-disable nuxt/no-cjs-in-config */
/* eslint-disable object-shorthand */
const path = require('path')
const fs = require('fs')
const env = process.env.NODE_ENV
const envPath = path.resolve(process.cwd(), '.env')
if (env !== 'production' && envPath && fs.existsSync(envPath)) {
require('dotenv').config({
path: envPath
})
}
console.log('NECESSARY ENV ENVIRONMENTS')
console.log(process.env.GHCI)
console.log(process.env.GHCS)
console.log(process.env.GHRU)
module.exports = {
mode: 'spa',
server: {
port: 3000
},
env: {
GHCI: process.env.GHCI || '19c1497ec754bc87217e',
GHCS: process.env.GHCS || '86be62ff07d9f829898a4a4e8ddc9684a198f285',
GHRU: process.env.GHRU || 'http://localhost:3000/workflows'
},
/*
** Headers of the page
*/
head: {
title: process.env.npm_package_name || '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{
rel: 'stylesheet',
type: 'text/css',
href:
'https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css'
}
],
scripts: [
{
src: 'https://code.jquery.com/jquery-3.2.1.slim.min.js',
integrity: 'sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN'
},
{
src: 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js',
integrity: 'sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q'
},
{
src: 'https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js',
integrity: 'sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl'
}
]
},
/*
** Customize the progress-bar color
*/
loading: { color: '#fff' },
/*
** Global CSS
*/
css: [
'~/assets/css/main.css',
'~/assets/css/dark.css',
'~/assets/css/light.css'
],
/*
** Plugins to load before mounting the App
*/
plugins: [
{ src: '~plugins/vue-mermaid.js', ssr: false },
{ src: '~/plugins/vuex-persist', ssr: false }
],
/*
** Nuxt.js dev-modules
*/
buildModules: [
'@nuxtjs/eslint-module',
'@nuxtjs/moment',
'@nuxtjs/dotenv'
],
/*
** Nuxt.js modules
*/
modules: [
'@nuxtjs/axios',
'@nuxtjs/pwa',
'bootstrap-vue/nuxt'
],
dotenv: {
systemvars: true
},
/*
** Axios module configuration
** See https://axios.nuxtjs.org/options
*/
axios: {
proxy: true,
browserBaseURL: process.env.BASE_URL,
retry: false,
progress: false
},
/*
** Build configuration
*/
build: {
/*
** You can extend webpack config here
*/
analyse: true,
extend (config, ctx) {
}
}
}Nuxt and Webpack versions
Netlify Build Log. In this image you can see clearly that the env variables were available.
Netlify Full Build Log |
|
I Just did a test that points to a Netlify bug. |
|
@AllanOricil Netlify can't really have a delivery JS bug because it's not executing anything.
I've just written a blog post on how the Nuxt js system passes environment variables. You can check that out if you want https://dev.to/deeja/nuxt-js-environment-variables-without-dotenv-4oj8 |
Hi @deeja I discovered that Netlify is caching some files to deploy it faster. When I created a new project on Netlify, and deployed the same code, without changing anything, the new environment variables were there. |
|
Please try again but using the Nuxt runtimeConfig: https://nuxtjs.org/blog/moving-from-nuxtjs-dotenv-to-runtime-config#migrating-to-the-nuxtjs-runtime-config-from-nuxtjsdotenv |
this is a savior. day closed |
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.ENV_VAR_NAME
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.
The text was updated successfully, but these errors were encountered: