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.
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.
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.
I am working on React Serverless App using AWS I want to access Node JS specific package into React js what are possible alternatives to access node js package without using Node JS on the backend
font-list is a Node.js package for listing the fonts available on your system.
I want to access this package on the frontend side.
Need Help!!
To answer the broader question, a package meant for node will more than likely work only in the node eco system.
In the case of font-list, it looks like it's running a vbs script to get available fonts (in the case of windows). Running external scripts like that, or accessing local file systems is not something you can do in a browser environment due do security constraints.
So to get a list of fonts in a browser will require a its own solution. You cannot just use a Node.js package, even though it's all still js.
I'm using ExpressJS to connect the dots between NodeJS and my Angular app. I wanted to install this npm package norobot: to leverage the process object.
I'd like to know where/how to set the NODE_ENV in an App Service within Microsoft Azure.
I was pointed here,
https://learn.microsoft.com/en-us/azure/app-service/web-sites-configure#howtochangeconfig
But the current-day Azure portal looks significantly different versus what the documentation has supplied, leading me to a big disconnect.
If you could point me in the right direction, that'd be appreciated.
Additional FYI,
At run-time, my stack is running on Node.js 9.4.
I wanted to install this npm package norobot: to leverage the process object.
norobot package has absolutely nothing to do with process.
But the current-day Azure portal looks significantly different versus what the documentation has supplied, leading me to a big disconnect.
Looks really shouldn't matter (to an extent), they serve as a visual guide.
The key section of the guide/docs you posted is App Settings:
This section contains name/value pairs that your web app will load on start up.
PHP, Python, Java and Node applications can access these settings as environment variables at runtime. For each app setting, two environment variables are created; one with the name specified by the app setting entry, and another with a prefix of APPSETTING_. Both contain the same value.
So following a similar answer: https://stackoverflow.com/a/34622196/2382650
set: NODE_ENV: some_value as shown above and it will be availble in your Express app as process.env.NODE_ENV
My team is building a large React application. I am wanting to know if what we are trying to accomplish in regards to build and deployment are possible with Webpack.
Let’s say our team is building Google Admin. There are 4 modules/app within the admin that 4 different teams are focused on. There is then a console application that is the entry point to these 4 modules/apps. We want to be able to work on each of the modules independently and be able to deploy them independently.
How we have it setup right now is there would be 4 separate applications that are dev harnesses to build these modules. We build them and copy the distribution .js and .js.map files to the console's ./modules folder. We would reference these modules lazily using System.import.
Is it possible, while the console app is built and in production, to “swap out” the module-one.js and module-one.js.map files that the console depends on without having to rebuild and redeploy the entire console app?
Goals:
Do not package these apps for npm. This would definitely require the console app to update and rebuild.
Build any module and deploy just that specific module to production without having to rebuild the console application.
Do not redirect to separate SPAs.
I tried my best to explain the goal. Any input would be much appreciated. I have found nothing in my search.
webpack loads the modules into memory and watches the filesystem for changes, as long as webpack is running you shouldn't have an issue replacing any given module. However webpack will attempt to build the entire in memory bundle with each module change (as it has no way of knowing that your module is truly independent). The only thing I can thin of would be to write a shim between the console app and the modules that watches the files (like webpack) but only replaces the in memory version of the local file that was changed. Reading this I'm not even sure if it makes sense to me...