Set up a Preact Project in a Local Development Environment
Clone the course repository at: https://github.com/learnwithjason/serverless-functions. In the repo, you'll want to start with the start branch.
Preact is a JavaScript library that describes itself as a fast 3kB alternative to React with the same ES6 API. This is not a course on Preact. For this course, we'll be adding serverless functionality to a predefined Preact application in your local development environment. The Preact app contains static HTML and hardcoded data to get us started quickly.
To run this application in your local development, execute the following command: npm run dev. That will open localhost:5000. You can interact with this application, but for the moment, the data is not persistent.
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.