How to Use Environment Variables in React

all right so if you're working on a react project you might have some api keys or a link to the backend server that you might have to put in multiple places inside your application and you don't really want to write them again and again you don't want to copy and paste it would be nice just to have it in one place where you can change all your api keys or things like that if you need to and you might also want to have different api keys for your development environment and your production environment so for example if you're working with stripe then you're going to need to test payments with a test api key and have a production api key inside production so that you can test things without spending real money so i'm going to show you how to set up environment variables in react and environment variables are going to let you do all of that they're going to let you use different api keys inside different environments for example development and production and it's just the best way to manage all your api keys and things like that so inside my application we have an api key right here or to be more specific my api key and instead of just putting that as plain text inside my application what i can do is create a new file called env this is where all my environment variables will live let me put this in my root directory so we have this created so i'm using create react app here so this already has everything set up with webpack if you're not using create react app or you're like building your own webpack then you may have to do some more configuration in order to use the environment variables maybe i'll cover that in another video but if you're using some kind of framework like maybe next js or gatsby that already has a webpack config setup then this will work the same for you so inside create react app if we want to create an api key we have to use the prefix react underscore app and then the name of your api key so let's say my api key and then you just put equals and the value of it so let's say new api key let's save this then go back here and in order to put this in here we're going to get the process dot env dot and then the name of our variable so that would be react app my api key and nothing appears because we need to restart the development server let's just do that right now because we added a new file and once that restarts then we now have new api key right here alright so now we can put all of our api keys in here and that's pretty useful now anytime that we want to use this we just use process dot env dot the name of your api key so all of these need to start with react app but there is one bonus environment variable that you get for free so this is the node underscore env and this is just going to be the environment that you're in right now since i'm just running the test server or the development server with npm run start it's going to be development but if you were to build it say with npm run build then it would be in the production environment if you were to run tests then it would be in the test environment so you can use this if you want to check which environment you're in but if we want different environment variables for different environments like for production and development we want different api keys for each of those then instead of just having one file right here with all the environment variables we can keep two of these so one of them would be dot env dot development and one of them will be dot env dot production you can actually call these whatever you want but this is just what i normally do but in order to use these two different files then we do have to install one more package and that's going to be the env cmd package right here so you would just install that with let's say npm install env cmd once you're done with that then you have this here and now you would put the different keys that you want in both of these so let's say that we want this to be development api key and we want this to be production api key so we can save that and then in your package.json what you want to do is you just want to add this to your start script so you can choose which environment you want to be in using env cmd and then the dash f flag so this is selecting the file so in this case we want the env.development file and then just react script start and this will load it with the development environment variables so we can actually have two of these if you want we can have one is start staging for the staging environment and then another one start prod for production and then we can switch those to be production and let's just restart the server and see if we're getting what we want let me just put this in here react app my api key put that back and let's first start up the development environment with npm run start staging not all that wait for this to start up and as you can see we now have the development api key and if we were to load up the production build then i'm sure you can guess what would happen we get the production environment variable and so that's a really easy way to keep your environment variables separate for each different environment that you have the only other thing that you would need to know is just don't commit these to your git and don't push these to github just because you don't want other people using your api keys so what you would do is you would go to your git ignore and just add all of these so if you don't already just add env and we'll just everything after env with this wild card right here and now these are no longer going to be tracked by git as you can see with a change of color but just so you know don't actually store any secret api keys inside your front end code if you want to keep something secret then put it in your back end code do not put it in your front end code a lot of these api keys that a lot of these websites will give you are front end api keys so it's okay if you put it in your front end code now you don't want to store any really sensitive information in here because somebody can just open up the developer tools and look inside your code and actually see the api key so i would not put anything too sensitive inside here these are just for front-end api keys nothing too secret so do keep that in mind but finally one more bonus if you don't like having all these different environments maybe you have a whole bunch of different env files and you would rather just have them inside one well you can create a new file called env cmdrc and this is going to be a json file with all of your different api keys you can combine all of these into just one file so this is just going to be a json document right here so you can actually just put a dot json on the end here so it like syntax highlights correctly so i'm going to put all these in here with development this is going to be all my development environment variables let's say react app my api key is equal to development api key two and then we can also create the production save that and now we can actually just delete these right here so we don't need these anymore we can access these all from here so you would just go to your package.json and change these right here from dash f because we no longer have the file 2-e for environment and then you would put in the environment that you put inside your ncmdrc let's say development that's what we called it and this one will be production and this should function exactly the same as what we had before i might have to restart the server one more time oh my bad i forgot to change this to dash e for environment let's run that again and now we have production api key number two so that's gotten from right here and that's a nice easy way to keep all your api keys together if you would rather just have them in one file if you have lots of different environments and of course you wouldn't want to commit that one to get either so let's just put in env cmdrc dot json and now this will no longer be tracked by git as well and that's all there is to it now you know how to put environment variables inside your react application and now you can put all the api keys that you want so go crazy

Channel: Eric Murphy

Views: 5,157

Rating: 4.8648648 out of 5

Keywords: env, env variables, environment variables, react, reactjs, env-cmd, javascript, create react app, cra, production, staging, environments, api, api keys, secret keys, keys, stripe, firebase, frontend, tutorial, how to, javascript tutorial, web dev, web development, front-end

Id: Q9QxS0NJjJg

Length: 9min 36sec (576 seconds)

Published: Sat Mar 20 2021