If you're here, you're probably familiar with using .env file variables. If not head on over here to read my other article that helps you establish .env files to store API keys and other variables securely for local development.
Let's create environment variables similar to the .env files in Netlify:
Step 1: Go to Netlify -> Select your site -> Then select Deploys in the top navigation bar
Step 2: Then select Deploy Settings -> now select Environment in the left pane
Step 3: In Environment under Environment Variables -> Add in your environment variables with their values like shown below and remember to follow the format of REACT_APP followed by variable name in snake case as React requires it in that format in order to be used and hit save:
Step 4: In your app you should just be able to use in the component as follows:
const ApiKey = process.env.REACT_APP_API_KEY
That's it you're all done, you should now be able to use your hidden API key in your app even when it's hosted on Netlify.
Top comments (0)