Complete Intro to React v4

Complete Intro to React v4 Setup the Petfinder API Keys


This course has been updated! We now recommend you take the Complete Intro to React, v8 course.

Check out a free preview of the full Complete Intro to React v4 course:
The "Setup the Petfinder API Keys" Lesson is part of the full, Complete Intro to React v4 course featured in this preview video. Here's what you'd learn in this lesson:

Make a new Petfinder API key and API Secret to then add it to your .env file which will be read by Parcel.

Get Unlimited Access Now

Transcript from the "Setup the Petfinder API Keys" Lesson

>> Brian Holt: Again, this is at bit-la/react-v4. That'll take you to the website. In the State and Lifecycle Methods, click here.
>> Brian Holt: This is gonna take you to the Petfinder website. I have credentials already. So, I'm going to just sign in and grab my credentials but I need you to go sign up and get your own credentials here.

[00:00:26] The amazing people that make this website for free, or this API for free, so that you can build applications around adopting animals, so I'm a huge fan. I will be donating some of my proceeds from this to them for supplying you all with this awesome API.
>> Brian Holt: So here are my keys and secrets.

[00:00:49] Do not use them. [LAUGH] Please?
>> Speaker 2: [LAUGH]
>> Brian Holt: I will also be changing it immediately after this. So if you're watching the video of this you will not be able to use them.
>> Brian Holt: Okay, so you're gonna end up with this API key and API secret right here.

[00:01:09] What I want you to do now is go over to your code, make a new file and call it .env and save it right on the same level as your package.json, the root directory of your project. Yes, use .env. If you've ever heard of. Might, it's actually quite common across Java, and Python, and now JavaScript.

[00:01:35] It's the ability to define environmental variables as a file, and parcel will read from this automatically, more magic from parcel. So all you wanna do here is, I wanna put API_KEY=, whatever my key is, right? And then API secret, right here API_secret.
>> Brian Holt: And now, instead of my parcel app, I can refer to process.m.apikey anywhere and it will spit this out.

[00:02:12] So this is a good way of managing secrets with JavaScript projects is with these .m files. The key here is that you'll get ignore this. You actually won't check this code in. Just every developer will set up their own API keys, right, and will be able to access the application.

[00:02:29] You can actually even get a little bit more clever, and you can actually load these things from something like Kubernetes Secrets or you can load it with, Azure has this thing called Azure Key Vault. That you set it up in the cloud and then it's automated loaded into your application at build time.

[00:02:43] So cool stuff like that. So anything else that you would consider a secret here or wanted to do something like node env equals development or something like that. Any one of these environmental variables that you want be able to change really easily at a project level, dot env is a really good way to do that.

[00:03:06] Or it's things like this, api keys and secrets and that kind of stuff.
>> Brian Holt: Cool. Question.
>> Speaker 2: I would assume you wouldn't wanna put this under version control because then you're sending your keys into your GitHub or whatever it may be.
>> Brian Holt: Right.
>> Speaker 2: Do you use some kind of dotenv dot sample with placeholder keys to give people basic starting point?

>> Brian Holt: That's a good question. If I'm building a library or an example resource or something like that. I will check in basically
>> Brian Holt: This and I just won't put up the keys and hope that they will fill in those keys afterwards.
>> Speaker 2: Would they then get ignore the file and-

>> Brian Holt: Yep.
>> Speaker 2: So they take the file and it's in the repo and then they get ignore it and put their keys in?
>> Brian Holt: Well, so I'll check it in first and get ignore it. So if you check something in and then get ignore it without actually removing it, it still stays in the repo.

[00:04:15] Right?
>> Speaker 2: Okay.
>> Brian Holt: .gitignore just means ignore all future things to do with this file.
>> Speaker 2: That's great cuz I've spent so much time futzing with .sample files of configs and things. Thank you.
>> Brian Holt: Totally.
>> Brian Holt: So does everyone have keys and secrets now? Cool, so thank you, Petfinder.

[00:04:39] Hopefully someone adopts an animal. If anyone adopts an animal because of this, please tell me, so I can feel good about myself.
>> Speaker 2: [LAUGH] People in the chat that are outside of the US, we're asking for a sample ZIP codes, so just use 55402. That's where we are right now.

>> Brian Holt: Yep, that works. I guess they do require that, don't they?
>> Brian Holt: Cool, yes, so that bears mentioning, we are going to be doing searches using this API. It is a US based API. It only covers adoption agencies here in the United States. So when it starts asking for city and location, you'll have to use a city and state here in the United States, but I will provide those for you.