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
Related
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.
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
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.
As nodejs uses npm and angularjs cli also uses npm for modules.
Is there any relation exists between these two?
Installed node.js and tried with hello.js simply single line console.log.
Installed ng module and generated a simple angular app and started server using ng serve -o, kindly help me to clear doubt, if any relation exists between two.
nodeJs is for developing backend, Angular is for developing frontend
You can have a static web site written with Angular and hosting it somewhere like godaddy and that is it
If you need to show some data, interaction with database, submitting data,... then you need a backend, one of the platforms for backend is nodejs, also you can use asp.net webapi, or java or ...
Node and Angular are two distinct entity. In the "web world" there is two distinct things :
Code running on the client side (running in your navigator), frontend, generally using Javascript/HTML/CSS . This code here is used to design your webpage and interact with the user. There is where angular/angularjs work
Code running on server side, backend, this is where people use NodeJS. Here you find more logical code used to manage and to store the data thank to database. Here you can use node express or nestjs to create an http server using node.
Link between both ? Both can communicate using http protocole (we use the angular http client to do that). We simple ask the node server the add/update/remove/calculate data and we play with it :)
Angular.js is a client-side framework that runs in web browsers.
Node.js provides an environment for running JavaScript from a command line.
Angular.js is supported by a bunch of development tools (such as test HTTP servers, and transpilers to convert from TypeScript to ES5). Many of these tools run via Node.js.
You can also use Node.js for server-side programming to support the client-side code in a live environment.
Is there any way to setup local development environment with React at front-end and a full-stack server (e.g. WAMP)?
The perfect case is to:
Use the default React Create App setup without ejecting scripts
Make AJAX calls to PHP files which will handle the queries to MySQL database
Questions:
Is it possible to just run WAMP at localhost:3000 and React yarn start at localhost:3002 (it auto-sets different IP) and then just put PHP files somewhere inside src folder and call them from JSX using one of the AJAX technologies (e.g. jQuery or native XMLHttpRequest)?
Or the only way is to eject the scripts and then build and put files inside WAMP's /www/project folder and then use custom tools to update all this stuff at WAMP's localhost address?
EDIT: putting react app into /wamp/www is not an option - it didn' work for me and I don't want to put more efforts into it. Running React and WAMP in on localhost seems to work, the question to answer is:
How to import the PHP file into JSX. Trying to call it with smth like: require('./foo.php') does not work. import foo from ./foo.php didn't work either. Anly ideas?
After investigation I have found a way to achieve my goal.
The key to be able to send request to any local server you use (Apache, Nginx, Node.js) it to use ReactJS proxy feature:
https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development
After adding "proxy": "http://localhost" to my package.json file I was able to send and receive requests to my WAMP server while keeping all React's Create App native scripts.
P.S. It turned out Facebook has a nice React-native tool for request called fetch - https://facebook.github.io/react-native/docs/network.html.
1) I strongly recommend you do try to do this :
Separation of concerns is very important. having two repositories for your application, one for the backend and one for the front end is very important. Especially if you are using a versioning system, and more importantly, if you plan on working on it in a team. I suggest you just have your wamp installation stay where it is, add a Vhost like : backend.my-project.com, and then run your react app normally, and use the env.local in cra file to store the URL of your backend app using the environment variables.
2) You do not need to eject scripts to have both your frontend and backend in the same place :
Either create-react-app inside your wamp folder, or point your wamp folder to your create-reac-app generated react app