I am trying to deploy to Netlify through github my static generated app made with Nuxt JS, and the issue I am having is with the API_KEY variable inside my .env file, even though I added them to the environement variables available on my Netlify Project Settings, I am still getting a 404 error and undefined api key on my app console log.
If you intend use the env variables in your app (outside of the nuxt.config.js), then you might want to switch to runtimeConfig.
//nuxt.config.js
export default {
publicRuntimeConfig: {
baseURL: process.env.BASE_URL
}
}
//in your app
this.$config.baseURL
Related
I'm using a file named .env.local in dev environment, and all env vars work fine!
When I pushed it to Netlify, they aren't located, is there some specific way of setting them?
I also seted them in Netlify.
But, I keep getting this error log:
What can I do?
I am getting 500 internal server error after deploying a Next.js app to Vercel. The project works in the local machine but isn't working in the URL to which it is deployed to.
I have used environment variables in Vercel, which might be related to the issue.
I added these 4 env variables - NEXTAUTH_URL, NEXTAUTH_SECRET, TWITTER_CLIENT_ID, TWITTER_CLIENT_SECRET.
In my project, I've created a separate file '.env.local' which contains all of my project-related keys and URLs.
At first, this env variable 'NEXTAUTH_URL' was pointing to 'http://localhost:3000/'
NEXTAUTH_URL = http://localhost:3000/
And then, after deploying my app in Vercel, I updated that variable with the deployed URL in my project as well as in Vercel.
NEXTAUTH_URL = https://twitter-clone-seven-coral.vercel.app/
I have also added the above URL in 'Twitter's Developer Portal' in 'OAuth 2.0' in the 'Callback URI/Redirected URL' section:
Before deploying my app in Vercel, the CALLBACK URI/REDIRECT URL was pointing to https://localhost:3000/api/auth/callback/twitter
and WEBSITE URL was pointing to https://test.com
which I then updated after deploying the app initially.
This is the first time I'm working with Environment variables, so I do not have much idea on how to proceed with this error.
Package.json for reference:
Yes, have to set the Environment Variable , tried it with vercel but didnot supported or maybe missed something, but works fine with netlify, just deploy with the environment variable, from your project .env.local files, get the keys and values give also provide the NEXTAUTH_URL properly , then it should run
Had faced same problem and find out solution after a long research
The Trick is you have to set environment variable to vercel or any host platform
how to set environment variable in vercel
how to set environment variable in heroku
I have set some environment variables in the Netlify UI.
See here:
I am trying to use them in my code like this:
console.log("AUTH0_DOMAIN:");
console.log(process.env.AUTH0_DOMAIN);
console.log("AUTH0_CLIENT_ID:");
console.log(process.env.AUTH0_CLIENT_ID);
console.log("AUTH0_AUDIENCE:");
console.log(process.env.AUTH0_AUDIENCE);
When starting up the CLI local dev server using ntl dev it looks like the environment variables are injected:
But they all come through as undefined as shown here in the console:
So what am I doing wrong?
Why are they coming through as undefined?
P.S. I know I should not be using secret keys here because they will be exposed, but I still want to know how to do it for non-secret stuff.
UPDATE: The environment variables are also undefined after deploying live to Netlify. So it's broken on the live version and dev version.
UPDATE 2: Assigning it to a variable, as per below, also doesn't work:
const a_d = process.env.AUTH0_DOMAIN;
console.log(a_d); // This prints undefined
I am building a Vue app.
Turns out all Vue env variables need to be prefixed with VUE_APP_ inside the code and the Netlify UI.
So for example, it becomes const authDomain = process.env.VUE_APP_AUTH0_DOMAIN; in the code and you also have to use VUE_APP_AUTH0_DOMAIN in the Netlify UI.
This solved it for me:
netlify link
The netlify link command will link your local project to Netlify. See docs.
I did not think it was necessary to use netlify link because I already installed the Netlify CLI and was deploying my site automatically with GitHub but apparently it's needed.
I am trying to use environment variables in a react app created on WSL. I cannot access the variables from my app.
Here is what I did:
Create a .env file at the root folder of my react app (within a client folder of a Rails app)
Create a variable: REACT_APP_API_URL=http://localhost:3000/api/v1/
Log the variable in my console: console.log(process.env.REACT_APP_API_URL)
Restarted the server
I keep getting an undefined variable.
Am I missing anything related to WSL maybe? I am a bit clueless as I cannot find a similar problem online.
Thank you!
I think your file is in the wrong directory. See here: Environment variables are always undefined in VueJs application (possible duplicate of your question).
I am building an app using node.js + vue.js and was wondering if anyone knows how I can load environment variables into my vue.js components? Right now I'm loading environment variables in my server side code using the dotenv package but it doesn't seem to work for vue.js..
Thanks in advance!
You can expose environment variables from NodeJS like this:
console.log(process.env.EXAMPLE_VARIABLE);
More details on process.env: https://nodejs.org/api/process.html#process_process_env
To expose your environment variables to the client-side in Vue (or any Javascript framework for that matter), you could render a JSON response from NodeJS that is ingested via an AJAX call.
Using Vue Cli 3, You can load your environment variables like this
Create a .env file in the root directory of your application.
In the .env file, prefix your environment variables with VUE_APP_.
Example: VUE_APP_SECRET=SECRET.
Now you can access them with process.env.THE_NAME_OF_THE_VARIABLE in your application code.
Example: console.log(process.env.VUE_APP_SECRET) // SECRET
You can read more here