I want to store APIs in configuration file so when I deployed this on Development or on Production I just have to change the url on config file not in all js file.
But I don't know how to use configuration file in react.js
I tried using react-global-configuration but didn't got any results !
Can anyone please tell me how to achieve this ?
I suggest you use the npm package dotenv.
You create a .env file in the root of your repository, and this package helps your project access any variable that's inside your .env file. You just need to:
npm install dotenv
Then you add this line to your App.js
require('dotenv').config()
and you're good to go!
Example:
> cat .env
DB_HOST="https://myserver.herokuapp.com"
To access the variable's name, you just have to call process.env.DB_HOST in your code.
NOTE:
If your project has been created using create-react-app, then you must name the variables like this:
REACT_APP_DB_HOST="https://myserver.herokuapp.com"
and if you want to access it you use:
process.env.REACT_APP_DB_HOST
Related
I am trying to deploy a react application in a shared hosting, but I am wondering how to deal with the env variables I stored in .env file.
Such as api url for axios call etc.
Should i create a .env file after building the react application?
Yes, you need to create .env file after create a react app and
You need to write .env with the REACT_APP prefix like
REACT_APP_BASEURL = 'url'
You can access them this code
process.env.REACT_APP_BASEURL
Hope so it will help you.
I am getting the following errors on my browser concerning webpack5.
I have located answers in here but the authors are directing to a file called 'webpack.config.js' which apparently exists in the root folder of my app. The problem is, I cannot find such a file in the root folder of my app. Please can someone advise?
You likely can't see the config file because you built your app using create-react-app so configuration is managed for you. Try installing stream-browserify npm install stream-browserify
You could also use something like https://www.npmjs.com/package/#craco/craco which allows you to keep react bundled up but also gives you access to change webpack configuration.
The last option would be to downgrade.
I'm trying to use environment variables in my react app that I created with npx create-react-app.
I created .env file(in the root directory) and placed the variable which start with REACT_APP, but still when I try to log it in the console, it shows up undefined.
I did restart development server many times, still the same.
I uploaded test project here
not sure about the reason behind this, but it did not work for me with the .env file in the attachment.
So i deleted the .env file and created new one will same content and it started working 🤔🤔🤔
My console keeps on saying that
"To set up the editor integration, add something like REACT_EDITOR=atom to the .env.local file in your project folder and restart the development server. Learn more"
I cant even find the .env file on my create-react-app.
Thank you in advance.
Create-React-App supports custom environment variables.
The documentation discusses how to declare these variables:
This can be done using two ways: either in your shell or in a .env file. Both of these ways are described in the next few sections.
Through the local environment
The first way is to add it to your local environment:
For instance, if you're using bash, edit ~/.bashrc
Add export REACT_APP_EDITOR=atom to the bottom then restart your terminal (or source ~/.bashrc)
Through .env files in your application
The second way is to create a .env file at the root of your application directory, and add the variable on a single line there:
REACT_APP_EDITOR=atom
From the documentation, these types of files can be declared and will be consumed by Create-React-App:
.env: Default.
.env.local: Local overrides. This file is loaded
for all environments except test.
.env.development, .env.test, .env.production: Environment-specific
settings.
.env.development.local, .env.test.local, .env.production.local: Local
overrides of environment-specific settings.
I have an app ready for production. For it to work, each client needs to set a unique url to access their data. How would i prepare the app for making it easy to add a url as an access point to the clients?
Would a correct way to do this be to add it in the manifest.json file and somehow reference it from there? (Until now in development i've only used a global URL in a js file)
You need to install the package dotenv package and create a .env file in your root directory which should contain your environment variables.
Assuming that the URl you are referring to is http://localhost:3000/some/url on your localhost, then your .env file might look like:
MY_URL=http://localhost:3000/some/url
Then in your react application, you can get the value of MY_URL by doing:
const url = process.env.MY_URL
Note that if you are using the create-react-app package, then you do not need to install the dotenv package since it already comes with the create-react-app package. Also you need to change it:
REACT_APP_MY_URL=http://localhost:3000/some/url
Also make sure to add the .env file to your .gitignore file so that you do not push it to your repo.
Assuming that you are deploying your application to Heroku. Heroku provides a simple interface which allows you to add your environment variables which looks like:
That's it.
Maybe you could store them in environment variables?
that way you can always edit them later without having to change components.