Using environment Variables in Javascript file when deploying it on Heroku - javascript

I have an app written in JS,HTML and CSS which uses an API KEY. I have used environment variables locally to use API KEY. I have deployed it to heroku and while pushing to gitlab, I have added .env to gitignore and now after deployment, map is not visible because it can not access API KEY for maps.
I want to ask how to use environment variables in production (in Heroku deployment)?

You can either use their online dashboard or the CLI to add env vars.
See their docs here:
https://devcenter.heroku.com/articles/config-vars#managing-config-vars

Related

How to read environment vars for both python and javascript in Flask

My app is to be deployed on Heroku. I set up environment variables in .env in my root directory.
Testing locally with Flask, I have Python accessing env vars using the dotenv package with no issues. I run into trouble when trying to access the environment variables with Javascript.
I read Node.js has it's own dotenv dependency to access environment variables in JavaScript using process.env.ENV_VAR. I installed the package into my virtual environment and started my js script with require('dotenv').config(), but when running the Flask app, the console returns:
Uncaught ReferenceError: require is not defined
This tells me I'm not accessing the node.js dependencies through Flask and gives me the suggestion it might not be possible.
Is there a way to access env vars through Javascript and Python for a Flask app?
After some further researching, I came across
Everything that goes to client side doesn't belongs to you only. It is unrelated to Flask because it is server-side framework.
Turns out, looking into my API key I was trying to hide from the app is a Public Key that only provides read-access. There is no harm in publishing the key.

How to use environmental variables in a static Netlify page

So i have a static Webpage which uses some API. There's app.js file that has API key in it stored in an object property.I need to hide it using Netlify dev. How do I do that? How do I use Netlify dev tools in native js? I most probably need node js installed as well but this topic is not entirely clear to me... Could someone make a step by step tutorial for me?
If it's a static site, it won't be able to directly access the hidden netlify env variables.
If you are hosting the app.js file along with your static site then it will be easy for someone to browse to it and see the API key you are trying to hide.
One solution though is to define a Netlify Function that does the API call, and then the JS in your static site can call that function.
Your Netlify Function will be effectively a backend for your app, and can access the ENV variables you set in the Netlify UI, via process.env.
See this tutorial for a step-by-step guide.
Update re the new gatsby-build information in comments.
You can put variables in a git-ignored .env file, which means they will not end up on git, but will still get pulled in and included in the gatsby production code, which will be visible to the client, so isn't recommended for API access keys. Ideally you should connect via a backend to secure those keys, as in the above original answer.
However, instead of using a .env file, if you are using the Netlify Dev CLI then this will automatically pull down any env vars you have set in the online Netlify settings, and allow you to use those in your local environment.
From the cli docs:
Netlify Dev brings the functionality of your Netlify production environment directly to your local machine. This includes custom headers/redirects and environment variables.

Use env variables with BitBucket

Stuck with Bitbucket pipelines.
In my code i have some secret info
apiKey: process.env.apiKey,
authDomain: process.env.authDomain
But bitbucket pipeline during build can't access them.
Have set up variables via Bitbucket Env variables UI
In yml file i can access variables via $Variable, but how to do this with code?
Thanks
You can set up environment variables in Bitbucket, and access them via $variableName in the YAML build file.
Bitbucket uses the environment variables recorded in Bitbucket when running your build pipeline. But it only does this inside your YAML build file. It won't do anything with environment variables referenced in the rest of your code.
For the rest of your codebase, environment variables are worked out on the hosting server at runtime. So if you use environment variables elsewhere in your code (e.g. in your app.js), you need to configure these in your hosting environment.
This should provide more context for your use case - bitbucket docummentation
Create the environment variable in your env file
use $ENV_NAME to access your specified variable

Hiding Google API Key in Heroku using Rails

I am a newbie in Heroku. How do you hide your API key in the Heroku? I know from the documentation I can use config vars
https://devcenter.heroku.com/articles/config-vars
But how do I load the config from JavaScript?
What I want to do is something like this
https://developers.google.com/maps/documentation/javascript/tutorial
I'm using Ruby on Rails for my application.
A great way to use API keys without committing them into your code is to use environment variables. These are variables set in the shell of the system you're using to serve your Rails app that can be referenced in the code. On Heroku, you will set an environment variable differently than on a standard Linux server.
First, in your Rails app, you would insert the value of an environment variable like this: ENV["MY_API_KEY"]
Stick that wherever you're needing to put your API key in the Rails app, then set the environment variable with your API key in this Heroku command: heroku config:set MY_API_KEY=some_long_example_api_key_09823098270098
Now in your Rails app when you use ENV["MY_API_KEY"] it will insert in place the value some_long_example_api_key_09823098270098 when your app is running on Heroku.
If you're trying to reference the environment variable within a .js.erb file you would need to write it as <%= ENV["MY_API_KEY"] %>
Heroku documentation

ENV Variable Equivalent in Javascript

Before you flame me, I've done my research (Javascript ENV variables). I know that it is not possible to access system environment variables using Javascript.
I'm using Yeoman to develop a Javascript library. That library is for use with Google Maps API and some of my tests require that Google Maps API as a dependency. To load the Google Maps API script, you need an API key. Now, my code is located on my Github and I really wouldn't like to have my API key as part of the code.
Is there any Node module that would be able to inject an environment variable into my tests when running Grunt? Are there any ENV variable equivalents in Node.js?
This is an example of a need for a JS ENV variable solution. There are other ways around the problem, but I am specifically looking for this type of a solution.
Edit: most importantly, how do I have these ENV variables auto load into my program when I run tests using grunt
Thank you!
Yes, you can access the environment variables in a Node script via the process object.
console.log(process.env.secret_key);
Storing your API keys in environment variables is much better than doing so in your repo.

Categories