I have a project that I built with Angular. I want to host it but it makes calls to an API with an API KEY. From my understanding, there is no way to secure your keys from the client. I have been researching how to accomplish this, but I cannot find anything useful.
I want to deploy this small app to Heroku to learn how to do this. In my environment.ts file Should I replace the values with the variables in the .env file, build the application, then just add the key/value pairs to Heroku's Config Vars?
You can create two environment files. One for development and one for production:
environment.dev.ts:
export const environment = {
API_KEY: "XXX"
};
environment.prod.ts:
export const environment = {
API_KEY: process.env.API_KEY
};
Define these files in angular.cli.json:
"environments": {
"dev": "environment.dev.ts",
"prod": "environment.prod.ts"
}
Add --prod to postinstall script for Heroku deploys in package.json:
"postinstall": "ng build --aot --prod"
And finally, add Config Vars in Heroku dashboard or using heroku-cli:
heroku config:set API_KEY=PROD_XXX
Have you considered creating a backend for the API call? Your server could function as a middleman to authenticate your user and only make API calls your code intended to make. It is not clear what kind of API is used in your app but it can be dangerous to expose API keys not intended for public use (unlike Firebase API keys which are meant to be public).
Anyway, you should never store credentials hard-coded or commited to repository through configuration files. The basic steps are:
Create a .env file in your project root and add it to .gitignore. This is for local development.
Set production config vars in Heroku CLI or Dashboard.
Update environment.ts:
export const environment = {
...rest,
exampleApiKey: process.env.EXAMPLE_API_KEY,
};
How to use multiple .env config files correctly for development / stage / production. I realize I need a .env file, use dotenv (at least), but when I start hosting my app (React), I use localhost: 5000 urls, but I have to use some service-host urls which I use.
Your .env file is not commited.
So on you production build, you will configure your .env file to contain your production details. Again, .env files are private.
Your development .env file will contain details that you use for your localhost.
You can also, set a variable called to say PROD_BASEURL and then utilize an IF statement in your code.
if(PROD_BASEURL) {
do stuff
}
To answer your question. No, you won't use multiple .env files to separate PROD/UAT/DEV
Why do you want to use multiple .env files ?
The general recommendation is to have one unique .env file.
Should I have multiple .env files?
No. We strongly recommend against having a "main" .env file and an
"environment" .env file like .env.test
link : https://github.com/motdotla/dotenv#should-i-commit-my-env-file
Use a package like dotenv to manage your env variables. There are other package that do the same thing.
And you define your production env variables on your other, production server. The general recommendation is to have one .env file per host.
If you still need to however, you can use the following dotenv configuration :
require('dotenv').config({ path: '/custom/path/to/.env' })
Remember to not store any secret in your .env file in your react app.
I'm trying to run db-migrate for postgres on heroku but cannot seem to figure out why it doesn't have the right env variables. Hoping for some guidance if someone else has encountered a similar problem.
I created a next.js app. Locally, I have a .env file with DATABASE_URL, etc. The app and migrations work just fine.
I pushed my app to heroku. The env variables are all defined in the heroku app config vars, so the app is working as expected. However, when I try to run db-migrate up or down, I get "Could not find database config file '/app/database.json'". I looked at the source and this only happens when process.env.DATABASE_URL is not defined. However, it is in my heroku app config vars, so I am confused as to why the migration cannot find the database URL. I thought the config vars would be pushed into node's process.env.
I am working around this by creating a new .env file in heroku every time I deploy but would prefer to fix this properly.
I am planning on deploying a MERN stack app to heroku (followed Traversy Media on youtube) and I was wondering if what is the best practice to hide api keys (google map) in the client side?
I know how to add env variable to the server side of MERN in heroku but is it possible to add env variable to the client side of MERN?
yes you can add .env file in the root ...
remember you dont need to install any npm package , because .env already comes with react js
create a .env file and define your variable in it
must define .env in the .gitignore file
use your .env variables using process.env.VAIRIABLE_NAME
Just create a .env file in your react app's root folder and you are golden. You can access the env variable using process.env.Var_name.
I am a java script full stack developer.
In the vue js I create two files in the root.
env.development
env.production
In my main.js file, I can access environment variables like this
process.env.VUE_APP_MY_VARIABLE_X
How production and development differs in the vue js is,
if I use npm run serve project loaded the development environment variables. If I use npm run build it takes production environment variables. That's all in vue.
But in my expressjs project,
"start": "nodemon server.js --exec babel-node -e js",
This command will always responsible for the run project. I couldn't find two commands like in vue. I go though the tutorials every body says use the package called dotenv.
I couldn't figure out that how could this package identify the environments this is production and this is development.
End of the day I want to set my db password to 123456 in my local machine and root#123456 in the server. How could I achieve this?
Vue.js handles modes automatically, depending on the command (e.g. serve sets NODE_ENV=development, while build sets NODE_ENV=production).
Depending on the mode, it also automatically loads files with variables from disk.
Environment variables in Node.JS
However, Node.JS does not do that by default, and you have to set up your application to handle environment variables.
In Node.JS you can pass variables via the shell command, for example:
MY_VARIABLE=x node myapp.js (by prepending the command with variables), and that will give you process.env.MY_VARIABLE inside your myapp.js application.
Following this behavior, there's a consensus on using NODE_ENV variable for setting up the environment mode.
For production use, you'd start your application using NODE_ENV=production node myapp.js, while for development NODE_ENV=development node myapp.js.
Of course, if your machine already has these environment variables set up (for instance in .bash_profile) you do not need to prepend your command with them.
As a practice, in development machines, you'd have these variables already set up on your machine, while production machines (e.g. docker containers, etc) start clean and you pass the environment variables when starting your application.
For example, Heroku (and other deployment services) allow you to set up environment variables which are set at machine start.
There's also the method of storing variables in files (such as the .env, or other files), but those you'd have to read from disk when your application starts.
And this is where dotenv (and config package) come in play.
What dotenv does, is it reads .env file stored in your application execution path (root of the app), and sets any variables defined there into process.env for Node.JS to use.
This is extremely useful for development machines, but on production it's recommended to not have files that store sensitive information in variables, but rather use system environment variables.
There is also the option, for production machines, to construct or load into the machine an .env file at machine setup time, into the app directory.
Note:
never commit .env or config files that store passwords and sensitive information, to your repository
never store development and production variables in the same file
The dotenv approach
The best way to go about it, would be to use dotenv, and have different .env files, one on your development machine, and a different one on your production machine. That way, when your application starts, it reads the variables that are stored in the adjacent .env. This is the most secure and reliable way, in absence of means to pass environment variables to your production machine from a machine management application/interface.
The easiest way to set up your app with dotenv would be to set your start command to something like:
"start": "nodemon --exec \"node -r dotenv/config\" server.js"
and then in the .env file stored on your local/development machine you'd have something similar to:
DATABASE_PASSWORD=1235
DATABASE_USERNAME=joe-dev
...
and in the .env file on your production machine (server):
DATABASE_PASSWORD=root#1235
DATABASE_USERNAME=root
...
according to my understanding
you don't have created and setup a config file and required it in your app.js or any other file. let see for example create config file
const config = {
"development":{
"host":"localhost",
"dbport":"27017",
"port":"",
"username":"",
"password":"",
"userdb":"",
"passworddb":"123456",
"authSource":"",
"database":"devDB"
},
"staging":{
"host":"",
"dbport":"",
"port":"",
"username":"",
"password":"",
"passworddb":"#123456",
"database":"stageDB",
},
"production":{
"host":"",
"dbport":"",
"port":"",
"userdb":"",
"passworddb":"#123456",
"username":"",
"password":"",
"database":"prodDB",
}
};
module.exports = config;
then you have you setup a variable in your .env file like NodeENV = 'prod'
then import it into your files like
var config = require('./config')["process.env.NodeENV"];
and one more last thing dotenv is only used to loads environment variables from a .env file into process.env.