2.2.7: Environmental Variables
- 1.Understand the purpose of the
.envfile and dotenv package
- 2.Implement the dotenv package in a React application and store environmental variables
- 3.Use environmental variables stored in the
.envfile in React
- 4.Use enviromental variables in the backend - Module 3 onwards
When consuming third party API’s, developing databases and deploying servers you may want to obscure vital and secretive data that is used in your application. Use the NPM package dotenv combined with the
.gitignorefile so that you never push sensitive data online always keep your information safe. Use a
.envfile to hide information such as database credentials, API keys, secrets and even your port number. It is imperative you use a dotenv as your API keys may be paired to a credit card and we want to make sure you are not exposing yourself or your future company to potential risks.
Usually we would need to install dotenv into our applications, but as we are developing in a React environment we can just create a
.envfile and start putting our credentials in there. This is because react-scripts is able to process .env files whenever you run the command
npm start, which means you will be able to use these hidden credentials in your application, but if you edit it you must completely restart the React App.
Note there are different implementations of dotenv in different environments, in this set of documentation pay attention to the React example.
- 1.You will need to create a
.envfile in the root level of your React project.
- 2.Store your sensitive data inside the
- 1.Note when developing .env files within a React application you must prefix its name with:
- 2.You will need to reference it with the same prefix:
- 3.Ignore your .env file within the
- 4.Create a .env.sample file to indicate what credentials are required in your application.
- 5.Remember if you alter your .env file you will need to restart React application, stop your server and run
Sample Folder Structure
Sample .env file
Sample usage of .env
When developing your applications you might be wondering what information you should share with collaborators and what you should never share. If you are developing an application that consumes or is connected to a third party that requires payments, you will be given keys or secrets to validate your account, this information should be placed in the .env and hidden from everyone but yourself.
If a key or secret that is linked to a credit card is accidentally put onto GitHub, this could have dire consequences. When developing with the paid subscriptions of APIS such as Spoonacular API or even Google Cloud API you will want to hide your API key as if its accidentally put onto GitHub, you could be charged hundreds or even thousands as people steal and use your key to power your own application. You will then need to generate new keys, remove your application from GitHub and perhaps even stop your credit card.
API keys are not the only thing that should be stored in the .env file, database credentials as well as environmental details such as the port number should be safely hidden away. If a malicious developer was afforded the chance they would be able to steal all of the information stored and even delete the data. So save yourself and your potential companies time by securely storing your sensitive data in a .env file.
When you create your backend using ExpressJs and NPM, you will quickly realise that we don't have the internal React tools that would automatically create the .gitignore and process .env file within your application. To use dotenv within an NPM or backend project we will need to follow the documentation online. When you use enviromental variables within an Express application you will need to install the package into the npm directory.
Run the command
npm install dotenv
After the installation has been completed you can create your .env file within the root of the backend directory.
You can create the enviromental variables in the same way that we have developed them for our React applications.
When using the .env to refernce your credentials within your file, you will need to add the highlighted line above any reference. That way your code is able to extract the information required within the .env.
It should be noted that like React if you update the dotenv you will need to restart the application.