Overview

[00:00:00]
>> We already talked about what serverless means, it's kind of a confusing topic because the name doesn't mean what it sounds like it means and that mental model is a little strange. I do think it will become much more clear as we start to dig into these. So if you're if you're feeling like you got it, stick with me, when we start writing code, it's gonna click I promise.

[00:00:19]
So then what we're gonna do throughout this workshop and this is gonna be, I would say like a reasonably fast workshop, I think. Because we're gonna be able to cover so much, and we get to skip all of this boilerplate. But we're gonna figure out how we can load some data through serverless functions.

[00:00:37]
We're gonna start with some hard coded data, and we're going to move on to more dynamic data as we go. We're going to learn how to protect secret credentials, one of the hardest things about writing single page apps is that if I need to send a protected key, an API token or an access key or something that can't be shared.

[00:00:57]
I can't do that in a front end application because somebody could just scrape the code and find it and then go pretend they're me, and wreak havoc, that's a problem. So we're gonna show you how we can fix that using serverless functions. We're gonna learn how to send data in to serverless functions, we're going to figure out how we can save data.

[00:01:14]
So we're going to stand up a database today and use serverless functions to read and write. And then we're going to stand up an identity service, and we're going to show how to limit access to who can perform what role based on their current user token. And we'll do that again with serverless functions, so there's a lot of stuff we can do, there's a whole lot of power for what we're capable of.

[00:01:38]
And we're gonna be able to move through all of this without having to learn a whole lot about how servers work. And I think that's really exciting and that's why I think this is such a powerful technology. We get to use the JavaScript that we already know, to do extremely powerful things with just a few additional things stacked on top of our existing knowledge and I really, really like that.

[00:02:00]
So, the first thing that we're gonna do, we're gonna need two things before we can get started. We're going to be developing locally using the Netlify CLI, netlify functions give us the least amount of setup that I've seen for running serverless functions. We'll need two lines of config, and so we're gonna start with that, so make sure that you install the Netlify CLI.

[00:02:23]
If you have the Netlify CLI, make sure that you just run this again at latest so you've got the latest version. And then we're also going to clone this starter repo, we're going to use the start branch. So go ahead and take a minute, get the CLI installed and the the repo running at the the start branch.

[00:02:45]
So what we're looking at in here is, you're gonna see a data folder and a source folder. So we're not gonna talk about really any of the front end technology today, we're gonna write a little bit of front end JavaScript to interact with the serverless functions. But I've pre-written the baseline, all the styles are there, the site's outer wrapper is already there.

[00:03:13]
So let's just verify that this is working, we can run netlify, actually, I like the shortcut, ntl dev. And that is gonna start up a local server for us, and it's gonna run at localhost 8888. So we can copy that over to a browser, and we'll see here that right now it just shows us a headline.

[00:03:36]
I'm gonna zoom in just a little bit, so this is what you should be seeing that we aren't loading any data yet. We haven't actually pulled anything in, we're only looking at the hard coded data. And if we pull this over to the side, what we can see in our code here is that we've got this index.html, and there's the styles.

[00:03:58]
I'm gonna collapse those, all we have is the h1, so this demo is it's running Eleventy. Eleventy is very cool if you just want to write HTML, CSS and JavaScript, if you don't want to use a framework or anything like that. We are not talking about that today, if you're interested, I do have some articles, there's a lot of really great resources on it.

[00:04:18]
But in general, the reason I used it is because we can just write some HTML in here and not have to worry about using JSX or view templates. Or something like spelt where there's some specific syntax, we're gonna be able to just write plain HTML. So all the HTML and JavaScript we're using today is browser standard.

[00:04:38]
It should work in all modern browsers, there's no build step to transpile this to be usable. It's all gonna be something that you can copy paste into your browser and it will work, make sure that you've installed everything as well. So the only dependencies that we have, we have node-fetch, which I'll explain why we're using that in a bit, we have eleventy.

[00:04:58]
So yeah, make sure that we run npm install to get all of those set up and running. And that will give us our running site once that's done and run netlify dev. And the reason that we're using netlify dev instead of using the standard like eleventy command, which we could just run npm dev to run eleventy.

[00:05:23]
Is that because we're working with serverless functions, serverless functions don't run as part of the front end. Serverless functions are actually an entirely separate app, and there, depending on what service you're using, local testing can be a pain. The reason that we're using netlify dev and the reason that we're using netlify functions, is that there is a really nice local story.

[00:05:44]
Which is what we just did netlify dev, that's all we have to do to locally test our functions.