How to use environmental variables in a static Netlify page - javascript

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.

Related

Is there any way to define the path of the routes of a Nuxt application after the build?

So, I have a Nuxt 3 application where i make requests to an API through fetch.To facilitate maintenance, it's good that all paths are called dynamically from some variable or file, in case the API changes address. So, is there any way to define the path of requests in some file or database, that it's possible to change them after the build, in case the API changes address?
I defined all request addresses in an .env file, similar to this:
API_BASE_URL = http://adress:port/routes/base/
API_POST = http://adress:port/routes/post
API_GET_ITENS = http://adress:port/routes/get/
(etc)
That way, if the API is deployed on a different machine, I don't need to change all fetchs in code, just changing the value of the corresponding variable in .env. This works fine in the development environment.
However, when deploying the application it's necessary to build the project through npm build command, which generates a folder called .output with the project composed of .mjs files.
I didn't find any .env files in the built project. Apparently, it is not possible to change the environment variables after the build, being necessary to change before and build the project again.
I was expecting that after the build there would still be a file with the routes that could be changed, because after hand the system, the customer can change the API address without having to build and deploy the front again.

How to get react env variables from deployed app

It is well known that react environment variables are embedded in the build and should not contain secrets.
If they are embedded in a build, how can you access them when you load the production application on a browser?
Found it, you have to look at the webpacked version. Harder to do if mangled, but not impossible.

Using environment Variables in Javascript file when deploying it on Heroku

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

Is it best practice to hide API keys in .env file in React

I am new to React and was learning how to hide API keys gotten from GitHub API and from other APIs. I found out that it is possible to hide keys in .env files and get access to those keys by using REACT_APP and ensure that .env file is added into .gitignore file in order not to be submitted to a server. `The question is Is it considered best practice the way of hiding keys I described above. Secondly, is .env file added to a server even if we add .env file into .gitignore file.
If you are going to be passing the contents of the environment data file to React, which is client-side code, then it isn't likely to be very useful for keeping things secret.
Mostly this will be useful for keeping your various environments separate (e.g. so you don't accidentally use the URL for your test API server in the production deployment of your app).
If you were using this for server-side code, then it would be useful to keep your secrets secret and not publishing them in a git repository (that you might want to allow other people access to).
Whether or not the environment data file would be deployed to your server would depend on your deployment process. If your deployment process consisted of nothing more than checking out your git repository to the live server, then no, it wouldn't be deployed.

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

Categories