I do have a .env file in my react project and using dotenv package to read the environment variables. I did a console log of the environment variables. I had initialized few variables in the beginning in .env file and was being read perfectly.
Later I changed some data in the .env file and restarted the local server, but new changes were not being reflected. EVEN after deleting the .env file and starting the server, the same old variables are loaded.
I know it's a cache issue but could not figure out a way to reset it.
I am using npm start command to start the server.
Use REACT_APP prefix
You need to declare variables with REACT_APP prefix as per the documentation.
REACT_APP_API_KEY = 'XXXXXXXX'
REACT_APP_AUTH_DOMAIN = 'XXXXXXXX'
REACT_APP_DATABASE_URL = 'XXXXXXXX'
REACT_APP_PROJECT_ID = 'XXXXXXXX'
REACT_APP_STORAGE_BUCKET = 'XXXXXXXX'
REACT_APP_MESSAGING_SENDER_ID = 'XXXXXXXX'
REACT_APP_API_ID = 'XXXXXXXX'
REACT_APP_MEASUREMENT_ID = 'XXXXXXXX'
And similarly, access them with the prefix in your code
console.log(process.env.REACT_APP_PROJECT_ID);
Note: You need to restart the dev server every time you update the env file to consume the changes.
Changing env variables requires to restart node server to take the new values.
But sometimes , it doesn't work , so you mush apply a cache reset.
npm start --reset-cache
Related
I uploaded my repo and it has a database string named 'dbstring' which I do not want to share with anyone.
I created a repository secret on github and created a value named DBSTRING with its value but the thing is I dont know how to access it.
this is my uploaded code which reveals my dbstring.
const dbstring = mongodb+srv:/***********b.net
mongoose.connect(dbstring, { useUnifiedTopology: true, useNewUrlParser: true });
const db = mongoose.connection;
db.once('open', () => {
console.log('Database connected:', url);
});
How can I replace dbstring with secret value I created on my github repo?
What you need to do is to use Environment variables, where you can have a .env ( if you use dotenv ) for each environment. Then you keep your database credentials safe on your computer and on the server, this will also make it possible to target different environments like database production, dev, test, etc. Make sure you have .env file added in the .gitignore file.
It's also important that when you run this code it's executed on the server-side otherwise anyone with the dev tools open will be able to see the credentials as well. Then on your client side you make a request using axios to the URL related to that database connection.
If the ENV file works for you then what you can do is you can encrypt it before uploading it to the GitHub like creating an env-production file and encrypting it and once you use that repo you can decrypt it and you can also add that step to your CD/CI Line use this
I am building my web app in Next.js, and I have been doing some tests. What I am doing is to push my code to GitHub and from there deploy the project on to Vercel.
I am using Google APIs dependencies which require some Client ID and Client secret for me to be able to send emails using node-mailer from my client side to inbox (I'm doing this via a contact form).
However, on localhost everything is working fine but when I deploy onto Vercel, I am not able to make my contact form send mails (an issue that has to do with environment variables).
I tried Options A and B
Option A
Created a .env.local, added my variables there, then accessed them in next.config.js as shown in the code below (console log shows that I can access the variables anywhere on my app)
.env.local
env:{
CLIENT_URL:'vxcxsfddfdgd',
MAILING_SERVICE_CLIENT_ID:'1245785165455ghdgfhasbddahhhhhhhhm',
MAILING_SERVICE_CLIENT_SECRET:'Rdfvcnsf4263543624362536',
MAILING_SERVICE_REFRESH_TOKEN:'000000',
USER_EMAIL_ADDRESS:'yesyesyesyesyesyes#gmail.com',
}
next.config.js
module.exports = {
env:{
CLIENT_URL: process.env.CLIENT_URL,
MAILING_SERVICE_CLIENT_ID: process.env.MAILING_SERVICE_CLIENT_ID,
MAILING_SERVICE_CLIENT_SECRET: process.env.MAILING_SERVICE_CLIENT_SECRET,
MAILING_SERVICE_REFRESH_TOKEN: process.env.MAILING_SERVICE_REFRESH_TOKEN,
USER_EMAIL_ADDRESS: process.env.USER_EMAIL_ADDRESS,
}
}
If I do like Option A as per above, then send emails does not work on localhost neither does it work on Vercel.
Option B
I put my variables in next.config.js as below add the next.config.js to .gitignore then push to GitHub.
module.exports = {
env:{
CLIENT_URL:'http://localhost:3000',
MAILING_SERVICE_CLIENT_ID:'7777777777777777777777',
MAILING_SERVICE_CLIENT_SECRET:'R123456789',
MAILING_SERVICE_REFRESH_TOKEN:'1123456789',
USER_EMAIL_ADDRESS:'seiseibaba#gmail.com',
}
}
Option B works on localhost, but if I add environment variable on Vercel as shown in here then send mail does not work.
How can I set this to work properly for me?
Simply creating a .env.local (or .env) file with your environment variables should be enough to be picked by Next.js on the server. There's no need to add anything to your next.config.js.
# .env.local
CLIENT_URL=vxcxsfddfdgd
MAILING_SERVICE_CLIENT_ID=1245785165455ghdgfhasbddahhhhhhhhm
MAILING_SERVICE_CLIENT_SECRET=Rdfvcnsf4263543624362536
MAILING_SERVICE_REFRESH_TOKEN=000000
USER_EMAIL_ADDRESS=yesyesyesyesyesyes#gmail.com
However, if you need to expose a variable to the browser you have to prefix the variable with NEXT_PUBLIC_.
NEXT_PUBLIC_CLIENT_URL=vxcxsfddfdgd
This will be available on the browser using:
process.env.NEXT_PUBLIC_CLIENT_URL
For more details about environment variables in Next.js refer to https://nextjs.org/docs/basic-features/environment-variables.
The same principle applies to environment variables you create in Vercel (or any other hosting service), adding the prefix will make them available to the browser.
You can add environment variables in Vercel through the Environment Variables page of your Project Settings, that match the variables in your .env.local.
For more details about environment variables in Vercel refer to https://vercel.com/docs/concepts/projects/environment-variables.
I am building my web app in Next.js, and I have been doing some tests. What I am doing is to push my code to GitHub and from there deploy the project on to Vercel.
I am using Google APIs dependencies which require some Client ID and Client secret for me to be able to send emails using node-mailer from my client side to inbox (I'm doing this via a contact form).
However, on localhost everything is working fine but when I deploy onto Vercel, I am not able to make my contact form send mails (an issue that has to do with environment variables).
I tried Options A and B
Option A
Created a .env.local, added my variables there, then accessed them in next.config.js as shown in the code below (console log shows that I can access the variables anywhere on my app)
.env.local
env:{
CLIENT_URL:'vxcxsfddfdgd',
MAILING_SERVICE_CLIENT_ID:'1245785165455ghdgfhasbddahhhhhhhhm',
MAILING_SERVICE_CLIENT_SECRET:'Rdfvcnsf4263543624362536',
MAILING_SERVICE_REFRESH_TOKEN:'000000',
USER_EMAIL_ADDRESS:'yesyesyesyesyesyes#gmail.com',
}
next.config.js
module.exports = {
env:{
CLIENT_URL: process.env.CLIENT_URL,
MAILING_SERVICE_CLIENT_ID: process.env.MAILING_SERVICE_CLIENT_ID,
MAILING_SERVICE_CLIENT_SECRET: process.env.MAILING_SERVICE_CLIENT_SECRET,
MAILING_SERVICE_REFRESH_TOKEN: process.env.MAILING_SERVICE_REFRESH_TOKEN,
USER_EMAIL_ADDRESS: process.env.USER_EMAIL_ADDRESS,
}
}
If I do like Option A as per above, then send emails does not work on localhost neither does it work on Vercel.
Option B
I put my variables in next.config.js as below add the next.config.js to .gitignore then push to GitHub.
module.exports = {
env:{
CLIENT_URL:'http://localhost:3000',
MAILING_SERVICE_CLIENT_ID:'7777777777777777777777',
MAILING_SERVICE_CLIENT_SECRET:'R123456789',
MAILING_SERVICE_REFRESH_TOKEN:'1123456789',
USER_EMAIL_ADDRESS:'seiseibaba#gmail.com',
}
}
Option B works on localhost, but if I add environment variable on Vercel as shown in here then send mail does not work.
How can I set this to work properly for me?
Simply creating a .env.local (or .env) file with your environment variables should be enough to be picked by Next.js on the server. There's no need to add anything to your next.config.js.
# .env.local
CLIENT_URL=vxcxsfddfdgd
MAILING_SERVICE_CLIENT_ID=1245785165455ghdgfhasbddahhhhhhhhm
MAILING_SERVICE_CLIENT_SECRET=Rdfvcnsf4263543624362536
MAILING_SERVICE_REFRESH_TOKEN=000000
USER_EMAIL_ADDRESS=yesyesyesyesyesyes#gmail.com
However, if you need to expose a variable to the browser you have to prefix the variable with NEXT_PUBLIC_.
NEXT_PUBLIC_CLIENT_URL=vxcxsfddfdgd
This will be available on the browser using:
process.env.NEXT_PUBLIC_CLIENT_URL
For more details about environment variables in Next.js refer to https://nextjs.org/docs/basic-features/environment-variables.
The same principle applies to environment variables you create in Vercel (or any other hosting service), adding the prefix will make them available to the browser.
You can add environment variables in Vercel through the Environment Variables page of your Project Settings, that match the variables in your .env.local.
For more details about environment variables in Vercel refer to https://vercel.com/docs/concepts/projects/environment-variables.
My mongoDB connects just fine locally, then once I deploy to heroku, the connection URL becomes undefined. I have a .env file in my root directory, and a .gitignore which includes the .env. I need the mongo url to stay private, but I can only assume that this is why it shows as undefined in production...
Heres the error:
"MongooseError: The uri parameter to openUri() must be a string, got "undefined". Make sure the first parameter to mongoose.connect() or mongoose.createConnection() is a string."
Heres my require:
require("dotenv").config()
var url = process.env.MONGODB_URI
Heres my connection:
mongoose.connect(url, {
useNewUrlParser: true,
useUnifiedTopology: true
}).catch(e => {
console.error(e.message)
})
Thanks in advance for the help.
Two things you need to do, Make that .env available for the production code, It can't access your local .env file.
Second is your mongo running on production ? mean availabe and accessible for the app through 27017 port ?
don't say it is running on your local machine.
You need to setup your variables where your app is deployed. It is not accessible from your .env file that you used while developing on your local host. If you deployed to heroku - here is a documentation of what to do. If it's not deployed to heroku, you can get an idea what to do next to make it work.
I'm using this Dockerfile:
FROM node:8.4.0
COPY . /
ENV MONGO_URL=mongodb://mongo-container/data
ENV PORT=80
EXPOSE 80
CMD node /index.js
In the index.js file I want to check for the ENV variables. As the docker image is used in productive, I would run the app with development environment if the ENV variable is not set.
Something similar to this:
index.js
const mongoUrl = ENV.MONGO_URL || 'mongodb://localhost:3001'
Running the Docker image should use the productive mongoDB, running locally should use localhost DB
process.env object contains all the user environment variables. Check link for more info https://nodejs.org/api/process.html#process_process_env