Adding an env file to React Project

Question

I m trying to hide my API Key for when I commit to github  and I ve looked through the forum for guidance  especially the following post   How do I hide API key in create-react-app   I made the changes and restarted yarn  I m not sure what I m doing wrong      I added an  env file to the root of my project  I named it process env  and in the file I just put REACT APP API KEY    my-secret-api-key     I m thinking it might be the way I m adding the key to my fetch in App js  and I ve tried multiple formats  including without using the template literal  but my project will still not compile   Any help is much appreciated    x000D   x000D  performSearch    query    germany     gt    x000D      fetch  https   api unsplash com search photos query   query  amp client id   REACT APP API KEY    x000D       then response   gt  response json    x000D       then responseData   gt    x000D          this setState   x000D              results  responseData results  x000D              loading  false x000D              x000D          x000D        catch error   gt    x000D              console log  Error fetching and parsing data   error   x000D           x000D    x000D   x000D   x000D

User · Answer

So I m myself new to React and I found a way to do it   This solution does not require any extra packages   Step 1 ReactDocs  In the above docs they mention export in Shell and other options  the one I ll attempt to explain is using  env file  1 1 create Root  env    env file REACT APP SECRET NAME secretvaluehere123   Important notes it MUST start with REACT APP   1 2 Access ENV variable   App js file or the file you need to access ENV  lt p gt print env secret to HTML lt  p gt   lt pre gt  process env REACT APP SECRET NAME  lt  pre gt   handleFetchData        access in API call   fetch  https   awesome api io api-key   process env REACT APP SECRET NAME         then  res    gt  res json         then  data    gt  console log data       1 3 Build Env Issue  So after I did step 1 1 2 it was not working  then I found the above issue solution  React read creates env when is built so you need to npm run start every time you modify the  env file so the variables get updated

User · Answer

4 steps  npm install dotenv --save  Next add the following line to your app  require  dotenv   config    Then create a  env file at the root directory of your application and add the variables to it       contents of  env   REACT APP API KEY    my-secret-api-key    Finally  add  env to your  gitignore file so that Git ignores it and it never ends up on GitHub   If you are using create-react-app then you only need step 3 and 4 but keep in mind variable needs to start with REACT APP  for it to work  Reference  https   create-react-app dev docs adding-custom-environment-variables  NOTE - Need to restart application after adding variable in  env file  Reference - https   medium com  thejasonfile using-dotenv-package-to-create-environment-variables-33da4ac4ea8f

User · Answer

1  Create the  env file on your root folder  some sources prefere to use  env development and  env production but that s not obligatory   2  The name of your VARIABLE -must- begin with REACT APP YOURVARIABLENAME  it seems that if your environment variable does not start like that so you will have problems  3  Include your variable  to include your environment variable just put on your code process env REACT APP VARIABLE     You don t have to install any external dependency

User · Answer

You have to install npm install env-cmd  Make  env in the root directory and update like this  amp  REACT APP  is the compulsory prefix for the variable name   REACT APP NODE ENV  production  REACT APP DB  http   localhost 5000    Update package json     scripts          start    env-cmd react-scripts start        build    env-cmd react-scripts build        test    react-scripts test        eject    react-scripts eject

User · Answer

Webpack Users  If you are using webpack  you can install and use dotenv-webpack plugin  to do that follow steps below   Install the package  yarn add dotenv-webpack   Create a  env file      env API KEY  my secret api key    Add it to webpack config js file     webpack config js const Dotenv   require  dotenv-webpack     module exports             plugins        new Dotenv                  Use it in your code as  process env API KEY   For more information and configuration information  visit here

User · Answer

If in case you are getting the values as undefined  then you should consider restarting the node server and recompile again

User · Answer

Today there is a simpler way to do that   Just create the  env local file in your root directory and set the variables there  In your case   REACT APP API KEY    my-secret-api-key    Then you call it en your js file in that way   process env REACT APP API KEY   React supports environment variables since react-scripts 0 5 0  You don t need external package to do that   https   facebook github io create-react-app docs adding-custom-environment-variables adding-development-environment-variables-in-env    note  I propose  env local instead of  env because create-react-app add this file to gitignore when create the project   Files priority   npm start   env development local   env development   env local   env  npm run build   env production local   env production   env local   env  npm test   env test local   env test   env  note  env local is missing   More info  https   facebook github io create-react-app docs adding-custom-environment-variables

User · Answer

Install dotenv as devDependencies    npm i --save-dev dotenv    Create a  env file in the root directory    my-react-app   - node-modules   - public   - src   -  env  -  gitignore  - package json  - package lock json   - README md    Update the  env file like below  amp  REACT APP  is the compulsory prefix for the variable name    REACT APP BASE URL http   localhost 8000 REACT APP API KEY YOUR-API-KEY      Optional but Good Practice   Now you can create a configuration file to store the variables and export the variable so can use it from others file    For example  I ve create a file named base js and update it like below   export const BASE URL   process env REACT APP BASE URL  export const API KEY   process env REACT APP API KEY     Or you can simply just call the environment variable in your JS file in the following way    process env REACT APP BASE URL

[reactjs] Adding an .env file to React Project

Step 1 ReactDocs

Examples related to reactjs

Examples related to environment-variables

Examples related to api-key