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.
Related
I'm trying to understand how I can hide API keys and still run my Heroku projects in the browser. I understand how I can add an environment variable within a .env file and then add the .env file to the .gitignore file which successfully hides the file containing the key from GitHub. However, when I try to push the latest commit from the remote repo in order to get the latest version of the project with Heroku, the hosted project does not work because it does not see the key that it needs to use.
Once I figure out how to get the hosted Heroku project to work with the latest GitHub commit that hides the key, I would like to figure out how to configure the key to only work with the domain of my project and not work with any other domain address since I know that it's still possible to find the key within the source code if it's not hidden using a backend server. I haven't gotten around to learning about backend so I would want to learn how to make the key only work with my domain. Thank you for any responses.
What you can do is set the API key as a config var in the settings section of your heroku dashboard by going to your heroku app, clicking on Settings and then scrolling down the config vars.
Alternatively, you can do this through the heroku cli with heroku config:set. Check out the heroku docs here on both of these options
Update: To access the config var, you use the same syntax as other environmental variables.
For example, if you set a configuration variable called API_KEY with the value being ABCDEFG, the way you'd access it in your code (with react):
var myKey = process.env.API_KEY;
I have developed a reactjs application and have hosted in azure cloud. Now we want to implement the CI/CD process through Azure pipelines. I am quiet new in both the platforms. Need to know the process.
Currently, I have one file index.js where I have used the axios and have set the base URL to connect to the server. All my web services in different components class access this axios settings for accessing data from server. We have four environments, DEV,SIT, UAT and PROD. So for now I use to manually change the axios base URL and create the build and zip it and host it to the respective environments.
I need to understand for CI/CD what steps should I take. Most of the google finding suggested to have a config file. But how I can change my current implementation is a big challenge for me. For example my axios base URL, how it will take the value from the config file, or where I should create the config file, because when I create the build, all the js files are minified into one file and are put in the static folder. Apart from the static folder, the app icons and the files in the public folder of the project directory are listed (in the build folder). So shall I include a config file in the public folder or something else.
There are also webpack.config.dev.js and webpack.config.prod.js in the config folder of the project directory. Will it help. Because the requirement is first through Azure pipelines, the code will go to the DEV environment, then from DEV to SIT and from SIT to UAT and then to PROD. So subequently my axios Base URL should also change accordingly.
Can anyone suggest anything?
I'm not sure I fully understand your question but you could create a json file and put your config data in there, i.e. server_config.json. It would not be minified as it is not a js file. Then you will need to read the json in your code to get all the settings. Your CI/CD can also read this fille should it need to.
You should also make sure that the json config file is ignored from version control so that each environment has to have its own file.
I currently have a create-react-app deployed on my Heroku server, and I'm using the mars/create-react-app-buildpack.
I would like to be able to change the Heroku REACT_APP_ config variables on Heroku, and have them used in the React App.
Right now, they config variables are only picked up once when I call git push heroku master which means I need to redeploy for the config settings to change.
Has someone been able to find a workaround for this?
I found out this is already handled by #mars/create-react-app-buildpack with runtimes configuration variables.
You can use them in your react app as follows: https://github.com/mikehanssen/create-react-app-buildpack#runtime-configuration.
I was wondering how I can set environment variable in React to hid my API key?
I am hosting the app on Netlify so I am not sure if that matters. I am able to successfully do it in development but when it gets to production, the api key becomes undefined.
In my .env file when I have:
REACT_APP_API_KEY="my_api_key_etc"
In my app.js I have:
const apiKey = process.env.REACT_APP_API_KEY
when I console.log(apiKey) in development (npm start): it shows my api fine, but when in production mode (npm run build): it shows undefined.
I have already tried to create two more files like .env.development and .env.production and still that didn't work.
Also I made sure my .env files are outside of my src folder.
Do you guys think it has something to do with Netlify?
Thanks in advance!
Ideally you should be setting these variables in your dashboard instead. Head to your Project settings, and add this, and any other variables under environment:
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