Building a Web App with Netlify Serverless Functions and Hasura

These are my running notes of going through Jason Lengstorf's egghead course 'Build a Corgi Up-boop Web App with Netlify Serverless Functions and Hasura'.

What Are Serverless Functions

Biggest takeaways from this video right now is:

  • Serverless doesn't mean that there are no servers, just we don't have to manage, orchestrate, or worrying about scale
  • We can focus more on building more

Some examples of serverless functions are:

exports.handler = asynv () => {
return {
statusCode: 200,
body: 'boop!'
}
}

This small example is where we can just go ahead and send back some text that says 'boop!'.

const { handleThing } = require('./handler')
exports.handler = async (event) => {
const {id} = JSON.parse(event.body)
const response = await updateThing(id)
return {
statusCode: 200,
body: JSON.stringify(response)
}
}

This would help us make interactive bits about our application. So if we wanted to have something as a like button we can just control the updating in our serverless function.

One thing that is also important is to make sure not to expose any secret keys on our client so we can hide things within making requests to third party apps inside our own serverless function that requests for us.

Setup a Preact Project in a Local Development

Here we were able to just get our project set up directly from GitHub and make sure that we could run everything. One thing I noticed is that we couldn't yet run this code with node 15 as of Jan. 24th, so I went back down to Node 14 for now.

Setup a Local Development Environment for Serverless Functions Using Netlify

Before I watched this video, I do know that we need the Netlify CLI to run functions. Then also making sure that we have our functions folder.

After watching the video, I got both of those bits but an important bit to remember for setting up functions here is that we also want to be sure to have a netlify.toml that describes where are we publishing and where is our function folder. This is important not only in the development phase but also is important for us to do when we get ready to deploy functions.

Deploy Serverless Functions to Production on Netlify using Netlify CLI

When deploying the site, we need to make sure we're logged into Netlify and that we have connected our GitHub. From there, when we ntl init our project we just want to be sure to declare want our folder which just is public in this case. Something important that wasn't shown is that Netlify chooses the main branch as the production branch but I was still working off of my start branch so I made sure to swap that out so I don't need to clutter my main work yet.

Circumvent CORS when Accessing a Third-Party API using Netlify Functions

This was super illuminating to me because I had never considered using a serverless function to handle the CORS issue but it actually makes sense and aligns to why I would make calls from my backend servers before. Some projects don't allow client request directly and this is a great way to wrap our code around and still get the data we need.

So far our new function looks like this in a file called load-corgis:

const fetch = require("node-fetch")
exports.handler = async () => {
const corgis = await fetch("http://no-cors-api.netlify.app/api/corgis").then(res => res.json())
return {
statusCode: 200,
// This part is important so the browser knows we are sending over JSON
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(corgis)
}
}

Import and Set Environment Variables from a .env file using Netlify CLI

The netlify dev server knows how to read a .env file and injects this into our environment for functions. But one thing that I think is SUPER COOL is we can inject values from our netlify site as well instead using something like ntl env:import .env. This will sync things up so others can use it and won't have to figure out how to share things.