Initialize an Express Node.js Project for Svelte Development

[00:00 - 00:08] Getting started with Express. So far, we've only worked on the front end part of the project.

[00:09 - 00:17] We're going to switch gears now and work on the back end part. Our back end is going to be based on Express JS.

[00:18 - 00:35] Express is a Node JS web application framework and it handles the common needs of a back end server side web app. Some of the features that we'll use include back end routing, serving static files and authentication.

[00:36 - 00:52] If you remember from the earlier lessons, our project is organized by front end and back end. If you haven't already done so, we'll get started by creating the back end directory.

[00:53 - 01:04] I'm in the front end directory now, so let me go up one level. I'm going to make a directory called back end.

[01:05 - 01:14] Then change directory into that new directory. Now I'm in an empty back end directory.

[01:15 - 01:22] Last time we went over all of the stuff we've done so far on the front end. This is just another look at the files.

[01:23 - 01:36] So we've got an empty back end directory and then a front end directory with a bunch of Svelte related files. What we want to do next is use Express Generator to scaffold the back end project.

[01:37 - 01:48] So we're going to go ahead and run npx Express Generator, no view. So back at the command line, paste that in.

[01:49 - 01:59] Now no view refers to server side generated views. So in an earlier lesson, we talked about single page applications.

[02:00 - 02:06] And that's what we're building. So a single page application is completely rendered on the front end on the client side.

[02:07 - 02:19] And we also briefly talked about server side rendered applications. So in some cases, when we go to a web page, the server returns a completely built HTML page.

[02:20 - 02:23] And that's what's shown by a browser. And so you can use Express for that.

[02:24 - 02:27] That's what no view refers to. We're not going to use Express for that.

[02:28 - 02:34] So we'll skip that part in the generator. So go ahead and run this command.

[02:35 - 02:41] And you can see the output. So it created a bunch of directories and files.

[02:42 - 02:51] And so then we need to run npm install. So it creates a package.json, but it doesn't actually install those dependencies.

[02:52 - 03:00] And so there's a few dependencies like cookie parser and Express itself that we need. So we'll go ahead and run that next.

[03:01 - 03:18] Okay. And just like we did on the front end, we can configure prettier and ES lint on the back end and get the same benefits.

[03:19 - 03:29] So go ahead and create a prettier RC.json file. Now I'm going to switch to VS code to work on this part of it.

[03:30 - 03:35] Okay. So here's my school lunch VS code application.

[03:36 - 03:41] So we've been working in the front end to this point. And now we've got a back end directory.

[03:42 - 03:54] And I'm going to go ahead and right click new file. Create this prettier config file.

[03:55 - 04:06] Copy in the configuration there. I'm going to keep it similar to the front end with a two character tab with no semicolons and single quotes instead of double quotes.

[04:07 - 04:15] And then this trailing comma adds a trailing comma at the end of objects. Okay.

[04:16 - 04:28] And then we can also create an ES lint RC.json file. So following the same process.

[04:29 - 04:34] We'll paste this in. This is a little different than the front end one.

[04:35 - 04:42] So it's got node true. So that means essentially treat it like a back end project.

[04:43 - 04:53] But this configuration should service pretty well for the back end. Okay.

[04:54 - 05:04] And then if you remember previously we set up package.json to run our ES lint scripts. So we'll do the same thing here.

[05:05 - 05:16] So I'm going to copy this part here and then open up package.json in the back end. So the express generator just gives us a start script.

[05:17 - 05:24] So I'm going to paste that ES lint command in there. And then just as an example you can add additional scripts here if you want.

[05:25 - 05:38] So for example we could add our own lint script. So I'll do that for demonstration purposes.

[05:39 - 05:48] Okay. And let's give it a try from the command line.

[05:49 - 06:06] So I'm going to run npm run lint. Okay.

[06:07 - 06:15] So that completed. And you can actually see there's a couple of errors in this code even though we haven't touched it yet.

[06:16 - 06:20] And so this is kind of interesting. ES lint can be pretty strict.

[06:21 - 06:30] And sometimes it's kind of annoying but the end result is better quality code. So I think it's a good idea to just embrace those rules and be thankful for them.

[06:31 - 06:47] So we're hitting the no unused VARs rule which is basically just saying you can 't declare a variable and then not use it. So let's go back to VS code here and look at actually pause that.

[06:48 - 07:03] We'll come back to this in a minute. So going to back to VS code next we'll look at express routing.

[07:04 - 07:15] So here's our generated code and the main entry point file is app.js. And so this is kind of where express is configured.

[07:16 - 07:29] And basically what you can see here is adding a way to parse cookies on the server, a logger, and then a couple of routers. So our index router and our users router.

[07:30 - 07:44] And so these two routers are going to handle inbound HTTP requests to this backend express server. And then they're going to provide endpoints that will handle those requests.

[07:45 - 07:55] And so these are pointing to the files that will handle those requests. So there's going to be an index.js and a users.js file.

[07:56 - 08:13] And then these are the routes that it's going to listen for and then point those requests to those files. And so it's described a little bit more right here.

[08:14 - 08:36] So HTTP calls to the root URL, those will be routed to the index router, and then calls to the slash users URL will be routed to the users router. So let's take a look at the routes slash users.js file.

[08:37 - 08:47] So all we have right now is just a git endpoint. So an HTTP request to git slash users will end up being handled right here.

[08:48 - 08:54] And then as you can see, we've got rec. Now that's the first parameter passed in.

[08:55 - 09:03] Even though we're not doing that, it needs to be there so that the second parameter can be rest. And then next is where we're getting the error.

[09:04 - 09:20] So I'm going to go ahead and just delete next from here. And then likewise on index.js, I'm going to go ahead and delete next so that we don't get that linting error.

[09:21 - 09:30] Okay. So next, let's try to run this express backend application.

[09:31 - 09:39] So we need to run debug equals backend star and then npm star. So this will get it going.

[09:40 - 09:45] Now this is on Mac or Linux. I'm going to run this command on Windows.

[09:46 - 09:57] This command below should work. So let's give that a try.

[09:58 - 10:12] All right. So that started up the backend and it says that it's listening on port 3000.

[10:13 - 10:34] And let's skip ahead just a second and try this in the browser. So we're going to make a request to the backend server on localhost 3000 port 3000 to the users endpoint.

[10:35 - 10:43] And so you can see here that it says respond with a resource. And that's what this is instructed to do.

[10:44 - 10:51] So that's where the routing gets handled in the backend express app. Okay.

[10:52 - 10:59] So coming back to the course here. Now here's a good example of what we're going to address next.

[11:00 - 11:08] So this command is okay, but we can do a little bit better. So if you remember our front end, we've got a hot loading front end.

[11:09 - 11:18] So it automatically rebuilds the front end anytime a file changes. And we can accomplish something real similar on the backend with a tool called nodemon.

[11:19 - 11:29] So just to give an example, let's say we change this to respond with a change. Now if I save that, I haven't recycled the backend yet.

[11:30 - 11:37] And so if I refresh this browser, I'm still going to get respond with a resource. So I'm still getting the old code.

[11:38 - 11:49] And so just to make our development workflow a little easier, we're going to set up node mon. So to set up node mon, we need to install nodemon globally.

[11:50 - 12:02] So npm install nodemon -g. So I'm going to stop the backend by hitting control C.

[12:03 - 12:13] And then I'll run this npm install command. Now what the -g flag does is it just installs nodemon globally system wide, not just for this project.

[12:14 - 12:25] So it doesn't put it in the package.json file for the project. It's just installed on your machine system wide or globally.

[12:26 - 12:34] Okay. And then what we need to do is create a nodemon script.

[12:35 - 12:43] So I'm going to copy this part here. Over to package.json.

[12:44 - 12:52] Put it at the top. So what this script is going to do is set the environment variable debug equal to backend.

[12:53 - 13:05] Then it's going to run es lint for us. And then it's going to run nodemon.slashbin www, which will start the backend app.

[13:06 - 13:20] So this is just a one time step to get this set up. So now instead of what we ran before, which was this debug backend star npm start, now we can just run npm run nodemon.

[13:21 - 13:39] And that'll be our command to start up our backend. So now we change that file to say respond with a change.

[13:40 - 13:43] Okay, that's great. Now let's change it again.

[13:44 - 14:00] Oh, let's see here. So users.js, I'm going to right click and close others just because I have too many files up in there.

[14:01 - 14:11] So I'm going to say respond with nodemon. And so when I save this, we can actually watch it on the command line.

[14:12 - 14:18] You can see nodemon restarting due to changes. So it just real quickly stops and restarts the backend server.

[14:19 - 14:30] And so the cool thing with that is as I'm developing, I don't have to recycle the backend server manually. And so now if I refresh, you can see that it says respond with nodemon.

[14:31 - 14:45] All right, so let's check out a couple of more concepts here. So back here, this is essentially a server side log.

[14:46 - 14:52] And so you can see it says get users 200. So it responded with HTTP status 200.

[14:53 - 14:58] And it took 5.7 milliseconds. So it was extremely fast.

[14:59 - 15:08] And if we refresh this a couple times, now we see get users 304. And it's even faster.

[15:09 - 15:17] Now this is because of caching. So 304 is a not modified HTTP status.

[15:18 - 15:32] And so this instructs the browser to load the resource from its local cache instead of downloading it over the network. And so this is a cool technique that backend web servers do to make requests faster.

[15:33 - 15:47] Now there's one way you can override this. And sometimes you'll even need to do this when developing with Svelte is to hit control shift R or command shift R. And that'll essentially do a hard refresh.

[15:48 - 16:06] And so you can see back here in our log, whenever I do that, then we'll get a 200. So it's a full network call to the server doing a full refresh and skipping any local caching.

[16:07 - 16:19] Now this fav icon.ico 404 error, you can just ignore that. That's just the browser looking for an icon to show up in this tab, just like this new line icon right here.

[16:20 - 16:24] All right. So that's it for this lesson.

[16:25 - 16:44] So it's pretty easy to get up and running with Express and get a local web server running, did a little testing, and we also set up prettier and ES lint. And in the next lesson, we'll dive a bit deeper into the handler code for the user's route and we'll discuss endpoints and JSON payloads.

[16:45 - 16:46] You