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.