Extract Environment Variable for the API Key
While our API key is exposed when our page loads the map, we can configure our API keys to have 1 for development that no one can ever see and one for production where we would restrict the URL to our app.
To do this, we can use Create React Apps's built-in environment variable solution. You should be able to find an .env.shared.sample file that you can duplicate and remove sample from the name. You can then use this to fill in your details for the variables.
Colby Fayock: [0:00] Before we start using our API key, we want to figure out a way to use it as an environment variable. At the top of the lessons folder, we have a file called env.shared.sample.
[0:08] The first thing we're going to do is move that file to the same name, except we're going to remove the sample. If we open that file, we can see it has a few things. It has a Mapbox API key, a Mapbox user ID and a Mapbox style ID.
[0:20] Our lessons are set up to already use those environment variables so that our API key, user ID, and style ID can carry on through all the lessons. For our first variable, we're going to copy our API key and paste it in our environment file, and we'll be ready to go.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!