DEV Community

loading...

Fetching Yelp API via Netlify Function with React.js [pt. 5]

Marcin Oleksiak
self-taught coding newbie, interested in frontend webdev
・Updated on ・4 min read

Previous part covering steps 15-18 is right here.

In this part I will:

  • register new account on Netlify
  • initialize new app with netlify init command
  • run my app with netlify dev --live command
  • create environment variable at Netlify dashboard and hide API Key in it
  • fetch Yelp API without exposing API Key in browser DevTools

19. Netlify setup

Signing up for new account on Netlify is dead simple. I choosed registration with email. The simplest and quickest way of pushing my project right from local repo, directly to Netlify server (without syncing with remote repo, such as GitHub) is well described in Netlify Fundamentals tutorial (published 2020-06-28, recording duration 14:54) by Steve Griffith. When I was watching it and coding along, I decided to work this way.

19.1 netlify init command

When I ran netlify init command from my app root directory, a couple of things happened:

👉 A config.json file was created, in /Users/$USER/Library/Preferences/netlify/ directory, with some basic settings.

👉 I was redirected to Netlify dashboard to grant permission for Netlify CLI.

Alt Text

👉 In my local repo .gitignore file was updated and .netlify directory was created, containing state.json file with my site ID specified.

👉 I was asked a bunch of questions, I've choosed to create and deploy my site manually and selected a random name for my app, instead of uniqe one.

👉 Terminal returned:

  • Admin URL where I can manage my app,
  • URL which I can share to show people my project,
  • Site ID which matches ID specified in state.json file.

Alt Text

19.2 netlify dev --live command

When I ran netlify dev --live command from my app root directory, a live-tunnel-client was created in /Users/$USER/Library/Preferences/netlify/tunnel/bin directory which (the tunnel) enabled to preview my app in remote fashion, but from local repo, under real, live URL. This is SO COOL!:

Alt Text

stoic-bartik-7b88ce is a name of my app

-2fe390 is a random string, gererated each time I run this command

https://stoic-bartik-7b88ce-2fe390.netlify.live

Alt Text

I've got to the point where I must test the yelp function in action again, so:

  • browser is running at https://stoic-bartik-7b88ce-2fe390.netlify.live

  • I enter some search criteria, e.g. pizza/Berlin and submit them.

Terminal
Alt Text

DevTools > Console

Alt Text

Excellent, app is working the way I expected: this is exactly the same response like in steps 17.1 and 18.2.

20. Hiding API Key in environment variable

In the part 3 (step 14.4) my biggest problem (besides “CORS header missing” error) was that Bearer value was visible in my browser DevTools:

DevTools > Network > GET > Headers
Alt Text

When I moved my fetching code from Fetched.jsx component to yelp.js function (step 18 in part 4), API Key disappeared from DevTools, but I wanna be double sure that its value is well hidden. So I needed to create an environment variable. It took me six short steps:

20.1 Netlify Dashboard

1️⃣ First I need to go to my app's dashboard and click Site settings button:

Alt Text

2️⃣ It takes me to Site settings subpage, where I can click Build & deploy link:

Alt Text

3️⃣ Build & deploy link opens submenu in which I can choose Environment link:

Alt Text

4️⃣ I am scrolled down to #environment anchor , where I can click Edit variables button in Environment variables section.

Alt Text

5️⃣ In here, I can define my environment variable:

Alt Text

For Key I choosed YELP_API_KEY, for Value I pasted API Key from Yelp's dashboard.

Alt Text

6️⃣ At the end, I click Save and I'm done.

Alt Text

20.2 process object, env property

YELP_API_KEY environment variable saved in Netlify dashboard can be read in yelp.js function with process object and his env property, like this:

~/fxs/yelp.js

Alt Text

I need to test the yelp function one more time:

  • so I run netlify dev --live command again
  • I enter some search criteria, e.g. pizza/Berlin and submit them.
  • finally I open by browser DevTools:

DevTools > Network > GET > Headers

Alt Text

I can't see the API key, so I guess I'm done 😀.

20.3 Code on GitHub, what's next?

Complete repo from this blog entry is uploaded on my GitHub.

Next part covering steps 21-23 is right here.

Thanks for reading and stay tuned!

Discussion (0)

Forem Open with the Forem app