I have Cloud Run environment variables as defined for my Google Cloud Run React App deployment.
However when I try to access them inside the react app as below, it gets "undefined" values.
export const BASE_FRONTEND_URL = process.env.REACT_APP_BASE_FRONTEND_URL
export const BASE_BACKEND_URL = process.env.REACT_APP_BASE_BACKEND_URL
I understand that the values above are in client browser, and there are no variables exist at that moment.
But how should I get the environment variables from Google Cloud Run dashboard and propagate to the client without relying on ".env" files.
If you want to use those variables (process.env.REACT_APP_BASE_FRONTEND_URL, process.env.REACT_APP_BASE_BACKEND_URL) into your react app then you have to create a .env file, which will contain all environment variables for your react app because the library which provide this named dotenv have default configuration to get all those environment variables from .env file.
So you have to get those env variables from Google cloud and paste them into .env file, then the issue should be solved.
Related
I have a full stack app with Node as backend and React as front end.
I have config files for both Node and react and I have variables stored in heroku for access keys. My backend is getting those keys but Front end is giving invalid keys error.
Is there another way of using env variables in react ?
I am using it like this in both Node and React :
apiKey: process.env.API_KEY
I found the solution. In React, only the variables that start with REACT_APP_ are embedded in our app.
So the variable should be named REACT_APP_API_KEY to be used
I am using 3 different git remotes during my development namely testing, staging and production (on Heroku). I have implemented a .env file to handle environment variables but just want to clarify that the way I have set them up is correct.
I have implemented the following to fetch the NODE_ENV var and uses it accordingly to append the .env var strings on the page depending on the NODE_ENV var I set.
env = process.env.NODE_ENV;
envString = env;
SHEET_ID = process.env['SHEET_ID_' + envString];
In the documentation, they discuss default env vars but I am unsure if Heroku has its own NODE_ENV var or how it works exactly, I have been setting it myself in my local .env (then when pushing I change the server NODE_ENV var to testing, staging or production)
Is my following understanding correct?
The NODE_ENV var is located in my .env - is this also default env var served from the environment ie Heroku or am I correct in setting the var myself in the env file and mirroring it on the server?
When pushing to a remote, depending on which, is the correct way to switch the env var NODE_ENV var in my local .env to NODE_ENV=testing, NODE_ENV=staging or NODE_ENV=production? Then the set vars from for eg Heroku dashboard would be used instead of the local vars.
Is this the best way to use the same code base through each remote without having to update my local files?
Do environments like Heroku serve a NODE_ENV var by default? I console logged process.env but only found my local set vars.
I am trying to design things to be as maintainable and efficient as possible and when I eventually do share my code with others I would like it to be as easy to implement as possible.
Following the 12 factor app principles all configuration should happen in the environment variables.
For your app this means
the .env file is merely a helper to put configuration in to the local environment for the application to work
every app on heroku (in your case staging,testing,production) will have their own config set via the heroku config commands. They will end up in the local environment of your application dynos, together with whatever your addons put there (for example database credentials).
This may be a dumb question, but how to get access to process.env vars inside of my ember app? I tried to access process.env in one of my controllers, but I received an error that process was not defined.
You generally don't have access to process.env since this is node.js global variable and ember.js generally runs in the browser which will not have process.env
However, you can use process.env during the build process which will produce ember app with the env variables build-in which you can access in another way.
I'm not sure what tooling you are using but here is how it works in Ember CLI Deploy:
http://ember-cli-deploy.com/docs/v1.0.x/using-env-for-secrets/
And here is an example with webpack:
https://webpack.js.org/guides/environment-variables/
I have a Vue.js application that has access API built on node/express. So I setup a process.env.API_URL to 'localhost' for dev and 'MyProductionServer.url' for prod. But the API_URL variable is loaded at built/compile time.
So now if I am to give the Vue app and backend app to customer. Do I need to ask them for their production server url so that I could edit the API_URL variable and build again? How can I make it dynamically so that when the Vue application start, it load a env variable at runtime instead of compile time?
Does dotenv solve this?
in dotenv or rather in .env file you put your dburl, username and password for accessing that db. On your local comp you would have creds for accessing your local db, while when you upload your app to e.g. heroku, you would not upload .env file, but use Heroku config panel to create same vars you had in .env file just with values for live db. Also add .env to .gitignore
as for api's, your frontend needs to know where backend is located so yeah you need to update that base api url. Since this is backend no way to know the live url where those data would be served, on which web server so you need to update this url manualy once in your frontend and thats all.
How do I check within my Node / Express app if it is running within Heroku?
My understanding is that .env files don't work in Heroku. So this line will crash the app in Heroku. So, I want to prevent running this within a Heroku environment.
const dotenv = require('dotenv');
dotenv.config();
One way you can do it is to create an environment variable called IS_HEROKU. On Heroku that's done in the app's dashboard, in the Settings tab, under Config Variables. Add IS_HEROKU: true. You can also use the CLI:
heroku config:set IS_HEROKU=true
It's described here.
You will now have access to it with process.env.IS_HEROKU. The value is a string.
I feel is simpler to use environment variables this way compared to using dotenv. If it was my project I would specify all the environment variables this way.