Set up a Preact Project in a Local Development Environment

Instructor: [0:00] First step is going to be to clone this repo. The start branch is where we want to go from, so I'm going to git clone git add github.com/learnwithjson/serverless-functions.git. I want that to clone into a folder called serverless-functions, so I'm just going to hit Enter.

[0:10] Once we're in there, we're going to move in. We can see that we've got a package-lock, a package and a public folder. Let's npm install to get any dependencies that we need. Then, let's open this up. We can see that we've got a dev script setup. We've got an index.html that has some styles, a little bit of markup here and then some script.

[0:47] This is set up with Preact and HTM, which let us do the React API, but in the browser with no compile stuff, so it just lets us do some nice reactive stuff. This is not a course on that, so don't worry about it too much.

[1:02] The only places that we're going to look at today, we're going to deal a little bit with this function later on to handle adding and storing boops, and then this load corgis. We're going to replace this array of corgi data with something loaded externally.

[1:19] Let's jump back into our terminal and let's run npm run dev. That's going to open up localhost:5000. Let's open that in a browser and take a look.

[1:30] Here is the application that we're going to build. Right now, all the data is hard coded. We can interact, but if we reload the page, those boops get lost, so we're going to make those stick around. We're going to make sure that we load these photos from Unsplash, and we're going to pull in some other data from a third-party API.