In my react app, I have a component say chart in which an external API is called.
While running in the local, the API URL will be localhost:8080
When deployed and the API URL should be prod:8080
The examples based on .env uses process.env and inside the component where the API is called process is undefined.
Is there a way to access the env file inside the component which runs on the browser.
If you are using CRA:
React's documentation on environment variables:
"Your project can consume variables declared in your environment as if they were declared locally in your JS files. By default you will have NODE_ENV defined for you, and any other environment variables starting with REACT_APP_."
Otherwise you might use something like dotenv and import it in your application index.tsx
For your specific use case, you also want to have 2 .env files since you want one for development and production. So take a look a this.
Related
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.
I've been seeing a lot of NodeJS and dotenv tutorials and articles where they define an ENV_MODE=development variable within the config.env file.
But require('express').get('env') already gives us the environment express is set on running. Why not just use the express env variable to check the environment mode? Why do we need to also set the explicit variable in the .env file?
You have to set the environment variable somewhere.
Doing it in a .env file ties it to a specific computer, which means you don't have to either:
Remember to set it manually before you run the program
Bind it into package.json and risk running the wrong command when you run the code on staging/qa/production
… and it lets you keep it with any other environment variables you have (such as API keys) which shouldn't be committed to version control (since they are secrets).
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.
I'm new to react native. I'm planning to create several react native applications that are going to reuse some code.
The code they are going to share is the session management, api, storage manager, formatters, etc...
these are not React Native Components!
So I want to organize these projects in the following structure:
app_1 (different package.json)
app_2 (different package.json)
app_n (different package.json)
package_that_every_app_imports (different package.json)
My problem is that some modules in project_that_every_app_includes will have to be configured per application.
In order to do so I'm thinking that I could set a global variable that all modules even from different packages would have access to.
Is there any better approach to configure the modules of package_that_every_app_imports rather than this?
(except of course by passing configuration into the constructor of an instances)
UPDATE 1:
After playing around it seems that when I set a global variable in the app_1 the global variable is not available in the package_that_every_app_imports so the initial guess is wrong.
After doing a bit more research I stumble upon this package called
react-native-config
This package allows me to create/manage different configurations environments (development, production, etc...) using .env files.
.env example:
BASE_URL=http://staging.example.org/
ENVIRONMENT=staging
The variables can be access like:
import Config from "react-native-config";
const base_url = Config.BASE_URL;
Config also can be accessed in modules of package_that_every_app_imports without any problems.