Okay, so for those who don't know me, I post in the chat my links. You have, if you like this session, you can donate. I appreciate that. Thanks to people who donated last time, I was able to purchase the Zoom subscription. So that Zoom no longer shuts down. Shots down after 40 minutes. No longer have that. If you want to keep me having the subscription for the future, consider donating. People ask where the recordings are placed. Usually I place them on MBK Tech World channel on YouTube. And it takes a while to get uploaded because I got to edit and I don't have much time these days. So, appreciate the patience. Let me paste that on Zoom. Okay, so today I'll talk about Express. So, let me see. Express. So this is the website for Express. Going back to Node here. So today if you have web development, right, you have HTML, CSS, JavaScript for the front end. And you can make like a website that's kind of interactive at some JavaScript. Yes, it's very pretty with CSS. But you know, where does all that data goes? How is it stored? You know, it's stored in a database somewhere in what is called the back end. The back end is a program to act as an intermediate between the browser, the client, the people accessing the website or web app, and the data. And that program can be built in any programming language today pretty much. So different companies use different languages for the back end server. A very popular choice today is writing a back end in the JavaScript programming language, which is the same as the front end. Traditionally, that was not possible, but it has been made possible with the advent of Node.js. Node.js, put simply is just JavaScript, but on the server side. JavaScript, the language originated from client-side programming in the browser. And then somebody had the idea, okay, why not use that for other things outside the browser? So they created Node.js. Okay, so pretty much server-side JavaScript. So if you can write client-side, you can write server-side the same way, the same language. Now, writing that like a web server to serve pages or requests from users might be a tedious task if written in the very raw or lower level HTTP module from Node.js. So Express, this library was written. And pretty much it makes it easier for us to build a web server with Node.js programming language. Okay, instead of us having to type everything from scratch, it already wrote the code for us, somebody wrote the code for us and put it in a package that's called Express.js. And that's what we're going to see today. Okay, so to get started, I need to go to the terminal. So let me share my terminal. If the font is too small, let me know. And now increase it. Now just go anywhere in the computer in your terminal and we're going to make a directory for this project. I'm going to use the command MKDIR. Space and then I'm going to call the director using dash express. You can call it anything you want. This is my name, but you can choose whatever. Press enter and the director is now created. If I say DIR to list, I can see it here. If here is in Linux or Mac, the command to list files is LS. The MKDIR should be the same across systems. Okay, I'm going to CD space using express to change directory to using express directory. So I'm in the right place. Now, since you installed Node, you should also have NPM, the Node package manager. So I can say NPM space in it. And the reason I do this is so it creates a file called package.js. That would be necessary for us to define this as a Node project. And therefore we can install third party dependencies that is code that's written by somebody else. In this case, we're going to install the express library. So you can type it, don't ask a few questions about the content of the package.js file. You can just press enter and accept the default. If you want to change, you can always change it later. Enter, enter, enter, enter, enter until is this okay? I'm going to say yes. Okay, now if I do the IR or LS in other systems, I can see there's a file that was created called package.js. Now you can open your favorite text editor on this specific directory that we created for the project. For example, I have Visual Studio Code, I could say code space dot dot meaning current directory. I'm going to open my thing there. Since I already have it open, I'm going to just share here. There you go. This is using express. Actually, I should do code dot there so it becomes just this here. You don't have that thing intermediate. There you go. So we got this file that was created by NPM in it called package.json. So we defined this directory as a node or NPM project. And we have several properties and values regarding metadata for the project. We don't really care about these right now. So just make sure it's there. Now going back to the terminal, we're going to install express. Let me go back here. I'm going to say NPM space install space express expr ess. It might take a while. So what this does is NPM is a node package manager. So it has a registry of third party software and you can pull that code from the registry with the NPM install command. Basically, if you have code that you wrote and you want to publish that as a package, you can publish that to NPM. And then people can download your code, use the NPM install. So when that happens, what it does is it creates a directory called node underscore module and places all the third party code there. If I show you in Visual Studio, you can see now that the node modules directory was created. And if I expand that, there's a lot of packages. And the one we installed was express. You can see there's a directory for express. You can see the source code for express is here. Now the reason there are other folders inside node modules is because express itself, if you click on the package JSON there, depends on other packages, a lot of other packages. So it also has to download all of that, those other third party code and put it here. Okay. And there you go. If you click package.json, we should now see a property called dependencies. And express is now included there. And what this means is our project depends on the express package. And the version we are dependent upon is this one, 4.18.3. Don't worry about this thing yet. Okay. So maybe that was a bit too fast for some people. I don't know. Does anybody have any questions about creating the package JSON and installing express? Somebody asked, yes, what are the commands? So let me share again my terminal. I'm going to scroll up here. So I started off by creating a directory that I called using dash express with the mkdir command. Then after creating that directory, I want to change directory or cd command to that new directory I called using dash express. Within that directory, I call the command npm space init to initialize this directory as an npm project. In other words, it's just going to create a file called package.json based on the answers you give to the prompt. In this case, I just press enter all the way. I don't really care about answering them right now. You can always change that information later as I showed you there's a package.json file generated. After doing that, we can simply say npm install and then express everything separated by a space. Yeah, go ahead. You asked the question. Sorry, npm doesn't get recognized in my command prompt. Did you install Node.js? Is it Node.js I'm installing or the express? So let me share this browser here. Sorry, the JS I'm installing, I guess I'm using the Windows. This is the website for Node.js. If you don't have Node.js, you should install it. For example, click on the LTS version. And when you install Node.js, it comes with npm. Did you install Node.js yet? No, not yet. Okay, that's in progress. Yeah, make sure to install it. Just click here. Open wizard, MSI, whatever. After that is installed, you will get access to Node and npm. Okay. Anybody else have any questions? We're good. Okay, let me know how that goes. Did you write down the commands we have to execute or yet? I'm still installing Node. I assume you wrote down the commands, so I'm going to keep going. Let me know if you still can figure out. Thomas asks, how do you know if express or any models are installed? I showed you that, right? So going back here to visual studio code. When you install any package for npm, it will install it under Node modules. So if you verify package.json, you should see under dependencies property, an entry for express. You see express here and the version that was installed. And another way of confirming if the file is there, go to Node modules, and then verify there's a folder called express here. You see there's express here. So that means it's been installed. Okay. Everything okay to everybody? Can I move on? Okay, I'm going to go here and create a new file. Let's call this server.js. So under our directory using express, I created a new file called server.js. I will write the JavaScript or Node.js code. Okay, so let's start off. It's a bit of boilerplate at first. So to require the Node module we installed or library or package, you can say require and call it as a function for parentheses. And then under quotes, either single or double doesn't matter the name of the Node package. In this case, express. This has to match the same thing as the package.json dependencies entry. Okay, and then we can place this in a variable. I will call it simply the same name as the module. Once we got that express variable, you can call it as a function. And that will return to you an instance of what we call app. You can store that in a variable, typically we said app or app. And finally, you can call there's a function listen on this app object. So app is an object so you can say dot to access an attribute or a method that is a function that belongs to this object. That's called listen and call it as like this. And then it was, you need to give it a port. So we can say 3000 that's the typical port we use when we start off. Okay, so that's the very basic server. Allow. Let me explain again. So we installed express, which is a code code that somebody else wrote. So we downloaded that with npm. And to be able to use that in your own code base, we do require with the name of the module there, we take that and put in a variable usually I use the same name as the module for the variable. And then we call this express function to get an app object. And that app object can call the listen function with a port that the server will be running. Okay, so now I'm going to go actually I can open a terminal from Visual Studio Code so I don't have to change all the time. So I'm going to click a press control to back tick or you can if you use Visual Studio Code, it's terminal here. So I can choose this one's is a power show I can use different things if you use Visual Studio Code, for example, use command prompt. So I have a command prompt tab here. So I can type commands here as well. So I'm going to say node space server.js. So I make sure I'm in the same project directory as the file, the server. So I press enter. I'm not going to see anything, but it's actually running. Let me confirm using the browser. Here, I'm going to go to local host colon 3000. Yeah, so if I see cannot get slash that means it's working. Let me make a bigger. Okay, so how's everybody doing? Everybody's okay. I want to make sure everybody's is be able to do this. Yeah, so I went to my terminal. I type node space server.js. That's the file name for this that I wrote and enter. So it runs the program. Now you're not going to see anything. You're just going to see empty blank without the command prompt. You see there's no prompt here is just blank. It's actually running the server. So it's listening. Right to requests. So the address here that you have to go to is local host colon the port that you specified on line five. This case the port of 3000. So I have to go to let me make a comment here. HTTP colon slash slash local host colon 3000. Now local host is usually an alias for 127.0.0.1 IP like the local. Okay, so if the local host doesn't work for you, try 127.0.0.1. And you got to add the port there. Obviously. Okay. All right, somebody just joined. We're doing express. So we created a node project with npm in it and we installed express with npm install express. And we wrote this file server.js and we ran it in the terminal with node space server.js. Now this is like you said what's going on here. I don't see anything. So that's pretty bad for us to understand what's going on. So we need some feedback. That's why we can add as a second argument to listen a callback function. Let's add function here. I'll write function keyword. And this callback function will be called as soon as this app or server initiates or starts listening. And we're going to say to the console a message. So I'm going to say console dot log parentheses. And we're going to say server is listening. So we have some feedback at HTTP colon slash slash local host colon 3000. Okay, so save that. Now when I change code, whenever I change my code, I have to go to the terminal, heal my server and restart our rounded program again. We always have to do that. It's kind of tedious. So to kill the server control C. When you say control C, it sends the interrupt signal and it knows how to stop. Once we do that simply run the command again, node server dot j s and that was started. Now we can see there's servers listening at local host 3000. Now I understand. Oh, okay, that makes sense. Now we have some feedback. We know what's going on. And you can even control and click this URL here. It will open the browser for you when you have URLs in the log here in the tone. Hold control and click to follow the link. How's everybody doing? Any questions? Too slow for you. Okay, let's go then keep going. Let me verify my. Now one thing, if you if you change the port here, this is going to be wrong, right? So you have to change it here and here. So if you want, you could create a variable. Like say const board equals 3000 and put a variable here instead of 3000. And you can also put it here if you interpolate the string like dollar. Worked. This is string interpolation, meaning the value of the variable port, which is 3000 gets replaced, whatever this is that. So it becomes like that. But in order to use interpolation, the quotes surrounding it must be a back tick. The back tick key is the one where the tilde is next to the one on a US keyboard. So back tick there and back tick here instead of single quotes. That's the only way you can interpolate JavaScript. And that's just so if you change the port here to whatever 4000, it will also change here and there automatically. So you don't have to write it twice. All right. Now because I changed my code, I always have to go to the terminal control C to interrupt and then run it again. So it runs the new code. There's no change, right? We just did some variable. No, no different from before. Okay, suppose everybody is doing well. Now let's talk about the first endpoint. So what we have here, typically a website will ask for information about a specific resource. And that's usually done via what's called HTTP request, hypertext transfer protocol request. And for example, you are in a store, like Amazon or whatever, you need to get the list of products, right? So get slash products, that's one endpoint or route for the request. Maybe you want to get the orders, get slash orders and so on. So you can have many different kinds of requests, right, for a resource. And those we can call endpoints or routes in our server. So let's create the route for the root, which is slash, right? If you go to our server, local host, 3000, right, like I said, like I did in the browser, that's the slash, right? Imagine there's a slash here, that's the root endpoint, the root route. So how can we respond to that? So here before you have your listen, and after the definition of app, we're going to say app, I'm going to say dot get, because it's a get request. In HTTP, there are different kinds of requests, most popular is get and post. When you say get, usually for obtaining some kind of information. So this function, we call it like that. And then you have to give it a path to this endpoint. In this case, it's just the root. We want the user to type local host 3000 like that in the browser, and it will go to the root. Imagine there's a slash there. Okay, so this is the root. So the second argument is a function that takes two arguments. The first is what we call our EQ or request. The second is our yes or response. We usually write it like them very abbreviated, but you can, you can change the names if you want, but know that the first one is request. The second is response. Now they find that function. And what's going to happen is, as soon as the user makes a request for a server, that is, they do get HTTP colon slash slash local host colon 3000. It goes to this route. Route. So it calls this function here. This function will define these structures to how to respond to that request. So you can do whatever you want and then reply with some response back to the client. Now let's just say the message hello world. So you're going to use the res object that's provided here as a parameter. And it has many methods or functions, one of them is send so you can send back information to the client. And the argument can be just a string. You can say hello world. So what this does, okay, somebody went to localhost 3000 slash get request, and then we're going to send back a response send this string hello world. And they're going to see in the browser hello world. Once we save that, make sure to go back to the terminal control C to interrupt. And then you're going to run the code again. Now I'm going to go to the browser to show you what happens. See I'm in localhost 3000. That's the route route. I click refresh. You can now see hello world. Did everybody do hello world. Any questions. What are having trouble with Tiffany. Let me show you the code again. You can compare. We wrote this part. Did you write it like that. So what are you not seeing that you go to the did you restart control C here in the terminal and restart the app and then go to the browser and go to localhost colon 3000. Did you see hello world there. Okay, then we can go on. Okay, yeah, make sure to spell everything exactly as it's written here because in programming, every character matters. The case matters if it's uppercase or lowercase. So make sure to look at every single character. Okay. All right, so that's nice. Now let me show you a way to debug requests. Let me share the browser here. Okay, if you want to know more about HTTP, I'm not talking a lot about HTTP, because I assume you know some basic knowledge, you go to the browser and it makes a request. If you want to look part to that you can search on your own HTTP if you want to know what the protocol, but basically it's just request and you got a response that the client, the browser makes a request, and then the server in this case the express one sends back a response. And the protocol is HTTP. So I'm going to go to the browser, open the dev tools with F12, or you can right click and inspect anywhere. I'm using Firefox, you might be using a Chromium based browser, but it's pretty much the same thing. Some labels might be different. Okay. So I'm going to go to the network tab. I think it's the same as Chromium, the same label. And I'm going to scroll up a little bit so I can see it better. I'm going to click to reload the page so I can see the request here. Make sure it's select all so you can see all of them. Otherwise there's a filter. So I click all here to see all the requests. Okay, so I can see there's one request here to localhost 3000 and the method is get. You can see that here. See the slash, that's the root. And it's a document. So you can click that to see more information about the request and the response. So you can see here, scroll up a little bit. We have response headers. We have request headers. We have the endpoint here, meaning that what's the method? Is it get? Is it post? In this case it's get. And then the URL or address or whatever way you think of this. It's called a link if you're in the web site. It's this localhost 3000 slash, which is the root endpoint or route. And it tells you what version HP had used and so on, all this stuff. You don't need to worry about understanding any of this. I just want to point out that this is the way of debugging your request to understand the request and response. So HP has headers that contain information about the request or response. You can see them here, response headers. The request is what we made, right? The browser, the client makes a request to the server. So the request headers were all this stuff and the response was all this stuff. So action information. As you can see, there's even a header saying export by express to let the client know, okay, our response was handled at the express library. And you can see other stuff that we're not going to really talk about cookies or whatever. But if you click request, you can show you the payload. If there's any, in this case, this request is get and there's nothing to provide the server. So there's nothing here, but the server does have a response with some text so we can see response. And it shows us hello world. And you can click raw here to see the raw text. It's probably converted to HTML, but it's not HTML. If you go back to headers, an important one for the response would be the content type, but we don't have any because we're not sending HTML nor JSON as we're going to learn later. Okay, so that's the dev tools. Now. And close that and we can go back to the code. Okay. Now, you might be tired of restarting the server. So I'm going to teach you a trick to not having to do that anymore. And that's called with a node package called node month. So I'm going to kill my server here. Gonna say npm space install space node month. But the thing I'm going to do before the package name, I'm going to say dash dash save dash dev. Admit somebody just joined. John asked where will be the YouTube video, like I said, in the beginning, it will be available on the mbk tech world channel. Let me post the link again to the zoom chat. Thank you. Anyway, so I'm going to npm install and dash dash save dash that that's an option. She has found doing that too. Please don't unmute yourself if you're not going to ask any question. All right. Please use the chat. And if you need to talk, I will let you talk if you're asking the chat. All right, so enter. And we're going to verify in package dot Jason. Now it's not under dependencies. Now it's under dev dependencies. And I see node mon and the version that was installed. And can also verify node modules. There's a folder for node mon here. You can see that. Now node mon is a package that allows us to what it does is a little program that when you run it runs your node code. And then it will restart whenever you change the code. And that restart is automatic. So why use that because you can find it tedious right every time I change my code, I got a patrol C to kill the server and then run it again. And I can forget, you know, I don't want to do that anymore. So let let the program do it for me. So no more does that job for us. Okay. Now, instead of saying. No here. I'm going to say in PX space node mon and then server dot j s. And if you notice, I didn't say and it can install without save dev. And that's because I like to differentiate between libraries that are needed for production and for development. No mon is just a tool we use to develop. But in the actual program when it runs in production to everybody, right. It's not going to be necessary because I only run the program once. So I'm going to use the node command for that. No one is not supposed to be using production. That's why I strictly want to separate into a different category of dependency to be a development or dev dependency here. So if you add dash dash save that all it does is instead of placing no one here under dependencies in the package.json, it will place it under a separate car. Guard. Okay. You don't have to do that. But I like to do that just to separate my kind of packages. One is just meant for development while the others is going to be needed for production. Yeah, you know, you don't want to run node money production. Imagine if the code changes suddenly everybody's is the server restarted keeps restarting. We don't want to do that. You just want to run it once with the node command. Okay, I'm going to do that. Now, why did I use MPX? You might be asking. Okay, so MPX is a way for me to not have to type dot slash node modules slash node mon slash whatever away. Whatever the command for node mon is. I don't want to be typing the relative path. It's probably under bin or something. Let's look node modules dot bin you see it dot dot bin. There's a node mon command here. So if I want to run it. I'm using windows by the way, so it'd be backwards slash but if you're using Mac or Linux is forward slash here. So mine would be backward. So if I want to run that node mon command under node modules slash dot bin, I have to type it in full here. You know, server dot j s. Okay, that's a bit too much. I don't want to write the whole path. So that's why I use MPX. Okay, so instead of writing this whole thing here, I just write MPX node mon server dot j s. MPX will do the job of finding node mon in this bin directory. That's in the node modules here. That's why I use MPX. I hope that wasn't a bit too confusing. Okay, so now watch what I do. Go to server dot j s. I'm going to go here and remove this comment. And save it. Did you watch the terminal? I didn't kill the server at all. And it's sad restarting due to changes starting node server again. So here's my server link listening message. Okay, so that's very helpful so we don't have to always kill the server and restart every time make a change. That's node one. How's everybody doing? Okay, now that's nice. What if I don't want to say just slash I want to go to a route called hello dash world. So I want to go to the browser here and be able to say, okay, I want to go to local host 3000 slash hello dash world. How do we make this kind of named route here? That's easy. We just change the first argument to the get function. So we go here we see get see that start slash say hello dash world. So whenever the user goes to slash hello dash world, it will hit this endpoint. Save that you can automatically see it. No one automatically restarted for us. Go to the browser. Now if you refresh there's no more hello world here so you have to say hello dash world and that's when at that endpoint is hit. Now let's go back to the code here. So now let's do something more interesting. Let's send back HTML. Right. HTML page. How do we do that? That's easy. Instead of sending this string, you can start writing the HTML here. Okay, let's make the HTML tag. Don't forget to close it. And then inside within between the open and close, let's do the body tag. And then forget to close the body tag. And then finally I'm going to write a message a paragraph, put a paragraph here. Hello world. Okay. You need to be familiar with HTML so I assume everybody knows a little bit just write the tags with the angle brackets surrounding them so open tag for HTML. Open tag for body and open tag paragraph and then forget to close them. And let's save that. Go to the browser. Refresh. If I open that tools, I want to inspect this. You can see that HTTP body and P hello world here. It's actually HTML that was returned. This will be the elements tab in chromium based browsers. I'm using Firefox. There should be an elements tab that you can see the DOM. Alternatively, you can right click and click build page source and you can see we return this. It's giving me the error. You need to provide the doc type. Okay. But that's in close that. So to verify the request, I click network tab and reload. I can also see here the response headers. You see the response is here right hello world. You can see raw. Raw is what it looks like. And then the headers. Let me just check the response headers. So one thing that we want to do when I send back HTML is to send a content type. Like this, you accept tax HTML. Usually we add a content type header to that response. But the browser here recognize that's actually HTML. So that's by render like that. Okay. Anybody have any questions so far? Everybody good? So now I want to talk about how to set headers. You can see all these headers are sent in the request of response. We can also send our own header to add some more information about the response. And the one I want to do is content type. That's a very common type of header to satisfy what kind of responses this is. Is this a plain text? Is it HTML? Is it application JSON? So let's do that. Go to the register code. Here before I do the send, I'm going to say res.set. Whoops. And what this does, let me change my spaces to two because I like two spaces. Indentation. So I can set, give two arguments. The first is the header name. I put quotes, content, dash type. The second is the value for this. So I want to say tax slash HTML. This is the header, the content type for HTML. You got to write it like this. To let the browser know, okay, I'm sending back HTML. So it's in this case, it recognized HTML, but usually you want to set it to be properly parsed by the browser. So you want to say, hey, I'm sending back HTML. Okay, so you should render it as HTML, not any other kind of file or content. So when I say res.set, I'm setting a header to be sent in the response. Res is the response object. We can call set, name of the header, and then the value as a second argument to that set function. Make sure to call it before you call send, okay? Now save that. Nodemon restarted the server for us, and then we want to go back here to the browser. I want to refresh, and I'll observe the DevTools on the Network tab because I'm going to need it. I click there, I see in the response headers, I should be able to see where is that? Content type. Ooh, is it not there? Refresh. Oh, is it because it's cached? Oh, okay, let me disable cache here. There's this option on the browser, usually. You can disable cache. Cache is a way for when you download a page, it saves it locally. So every time you try to get it again, instead of making a request to the server, it just downloads the local version. We don't really want to do that because we're developing locally, but that might affect your responses, you know, because I'm developing real time and changing things a lot. So I'm going to disable cache, so it never does that. Okay, make sure to turn it back on when you finish developing. Let me see if it does it right. Okay, now it's here. You can see content type in the response headers. That's what I set there. Content type is tax HTML. And there's also this additional care set for you to have eight is probably added by express. I don't know. Just to make sure this this content is encoded in utf eight. And if you want to parse this use decoded using utf eight. But what's matters is it's test text slash HTML. So we identify this response as sending back HTML. So the browser doesn't confuse it with something else. All right, so how's everybody doing? Does that make sense? I will anybody want to ask a question? You can do so now. Okay, I'm going to keep going. I know we're kind of the hour. I'll try to be fast so we can do a little bit more things. All right, so going back to the code here, let's learn how to change the status. You know, have you ever heard of for a far not found when you access a page that doesn't exist? So that's the status code for HTTP. So if you want to set the status quo, we can do so before the send. You can say res dot status, for example, 404 right not found. You can do that. Let's let's make actually make a different response. I want to make a not found page. Let's do that. So we're going to go outside this gets, I'm going to say app dot get. And I'm going to say slash not found, literally saying not found. And I'm going to say function rec res. It's always the same pattern. Okay, one argument for the endpoint path. And the second for the handler function. And then let's res dot send a page that's HTML body. I'm going to just say not found in the body there. And what I'm going to do before that is say res dot status 404. That means when I send this request, I want to change the status code for HTTP to be 404, which usually means not found. Okay, the normal status code. When we did the hello world is 200, which means okay, 200, okay. Okay, so let's we'll see that in the browser. So let's go here and look at the browser refresh. Now you can see real world see 200. Okay, here status. That's what I mean with status. Okay. Now if I go to not found here, instead of hello world, you're going to see status 404, because we changed that by saying res dot status parentheses 404. So that's a way of manipulating the status or for just me usually means not found. So if you want to say that something was not found when somebody accesses. Okay, somebody's asking for a product information. And then you say, okay, we don't have that information. So we're going to say send back to the client. Hey, we didn't find anything. So we're going to say 404 not found. That's an indicator that the resource was not found. Okay, so let's see the questions. Why not put the header inside the rest of the send. So the way we usually work with express is we call on the res. And we do the operations, everything that's necessary to manipulate the response before we actually send send is like the closing deal. Right, you do you, you write a response to do whatever is necessary. It's like writing a letter. Okay, I'm going to write this and that and that. I'm going to put some images here. I'm going to make this happen and I'm going to put the stamp and whatever. Once I'm ready to send, putting the mailbox right is when I call send. That's the last operation we have to do. So make sure to do everything before like setting headers status code and everything. Okay. Just keep keep the send only for the thing you're sending here. You're not sending the whole thing in sense. Send is just meant for sending either the string or the HTML content, that kind of stuff. Okay, it's not the other stuff. The other stuff is done separate, usually. Okay, so let's move on. So we saw for a phone or a phone. Now let's do. Okay, this is nice, right? But we don't want to be writing HTML in JavaScript code here. That's really tedious. Imagine this is just one thing, right? One message. Imagine the whole website full of text and interactive elements. This is would be a nightmare. So we don't usually do this. We actually start this in a file that's separate. Let's go here and create a file. Let's do the hello world. I'm going to go create a file called hello-world.html. And let me open split down so I can have it here. So go to server. I'm going to take all this content that's sent for hello world cut putting hello world HTML. You can add line breaks if you want to make it easier to see up to you. Doesn't really matter. Okay. There you go. That's much nicer. Now it's a separate file. Now we need to send it here somehow. But to do that, we first need to read the file in order to send it back to the client. So to read the file, we need a help from the FS or file system module from Node.js. Okay. And to do that, we go up here. We have to require it. Now it's built in so you don't have to install it NPM. Okay. So we just say F require quotes FS. FS is file system. Put that in a variable. I should call it the same name as the module FS. Okay. And then we're going to call it here before we send. Okay. We need to read a file. So FS has many functions. Okay. One of them is read file sync. That's meant to read a file. Now you need to know, okay, call is a function. Where's the file? So you need a path put under quotes. Let's say hello dash world dot html. That's the file path because it's in the current directory. Right. So I don't have to type the whole path. It's relative here. Okay. Now comma, we need, we can pass some options. I usually always like to pass the encoding. Otherwise it doesn't parse the file correctly. And I'm going to pass on the object here. And this object has the property encoding. And the value is going to be UTF either eight or dash eight. Either one's fine. So that means, okay, read this file, but I want you to decode it using UTF eight. That's why we usually use today to encode our files, text files. Okay. Once we do this, it will return a string with the content for the HTML. So we can put that in a variable. Let's say HTML content. And finally, to send it back to the client, just put the variable HTML content here. Okay. So when it calls read file sync, it takes this file content, imagine it was placed here like that. And then this variable goes here. Imagine it was like that. Okay. As a string. All right, I'm going to revert my code what it was. Let's, let's see if it works. Save that. Go to the browser. Go to Hello world. Back to Hello world. Does it still say Hello world? Yeah. Okay. So that works. Okay. So back here. If you want to learn more about the fs module, let me show you how to see the docs. You go to no JS website, do just or org, quick docs in the menu, navigation menu, and then you can go to the doc. And make sure you click the version that you have. Okay. In my case, I think I have 20. So I'm going to select 20 there. Make sure you're using the version or use you have if you want to find out what version you have, go to your terminal and you type node space dash v and we'll tell you what version. Oh, actually, I'm not using 20. It's actually 18.16. So I should go there and make sure to change my version here to 18. Otherwise, I might be referencing documentation that's either old or too new that it might have stuff that I don't have or stuff have might have been changed. So make sure to choose the right version. Now you're going to scroll down and go to whatever you want. In this case, file system. See that click file system. Then here it says all the functions available to you. You can go through it manually. It's going to be tedious. I like to press control F. And I can find in page. Read file sync. You see I found that I click there. And I understand I can read this to see what the function does. You can see there's a path argument and an optional the square brackets means optional options. So path and then the options encoding seeding coding there. And there's some examples that they provide. This is how you read the docs for all the built in node modules. All right, does that make sense? How's everybody doing? Okay. All right. Okay, so I'm going to go one step even further in the code. Just do your code. Now if you notice, we have one endpoint or one route just for one one page right hello world. And then we would have to do the same for the not found right create a not found here. Let's do it not found HTML. Let me put it down here. And I'm going to do the same here. Cut this thing, put it there. And then I got to go. Okay, fs dot read file sync. What's the file name? Not found HTML. Okay, put the options for the encoding in an object encoding string utf dash eight. Put that in a variable, HTML content. And finally send that. On another variable. You can see I'm repeating myself right. And imagine the website today, you know, many websites have so many pages. This is not scalable right, meaning this is not going to work out well. I have to keep doing the same thing over and it's going to be a mess. Okay, there's a better way to do that. And we're going to learn about a middleware for the static files. So HTML files, images, fonts, JavaScript files, CSS files on the client side, they're all called, you can consider them as static files. Okay, like you can think of them as assets right image assets, fonts and everything. So let's put them in a directory I'll call public. Move all the HTML there public is going to be all for the static files. Like HTML pages. So I moved all of them there. I created the directory public move the HTML files there. This is out of don't save cuts. Okay, now what I'm going to do here. After I do my app is I'm going to kind of install a middleware. So I'm going to say f dot use parentheses, but use as a way for us to use a middleware. And this middleware comes from the express variable here dot static. And then you got to call it with the name of the directory you want to mix like serve as a static, the static files. Now I need to explain to you what is a middleware. So middleware is basically intermediate between the request and response. So when a request comes in through express, it will pass through many functions that do things for you. And these are called middleware functions, and they do some work before it actually reaches the handler function here for the endpoint that will ultimately send back the response. So if you get a request, it will pass through the middleware functions. After that, it finally reaches this handle function that you define for this specific route. So this middleware here is for static files. What is it doing basically it's doing this, what I already did here, it's reading the file. It's a setting content to whatever HTML, all this stuff. Okay. And it does so by looking at a specific directory, in this case public. Okay, so if you try to access, it's going to serve this public directory. And it's going to do that's Hello World and dash not found because the file names here correspond to these. So it takes the route from the file name. Notice it's not going to have the prefix public. Okay, that's not going to happen. You don't have to type public public is just meant to be okay. This middleware will go to the public directory and take everything there and define all these endpoints to serve the static assets, these pages. Okay, so no public, you're not going to type public, you're just going to type whatever the file name is, you don't need to type HTML dot HTML. Okay, so with that, we don't need to do this anymore. You can just either remove, I'm going to comment it out. So when I comment the code, it's not executed. Okay, I can just remove it, or I can leave it there for reference for you. But this is not executed at all. Okay. So let's try it out in the browser. Do I still see Hello World? Oops. Did it work? Did it not work? Oh, I had to type the HTML. Never mind. I thought I wouldn't have to. And what's the other one not found. And you can see it's here. Where is that? Not working. Okay, let's debug this. Go back to the, did I type it right? Not found. Oh, there's nothing. That's why what's going on? I removed the thing. Okay, HTML body, not found. Let me put content back there. Go back to the browser. Oh, there you go. All right. Yeah, so in this case, you'd have to type the full file name, but I think there's a way to not have to type HTML. Maybe if I made it a folder, and I'm just exploring that a little bit, I wonder what would happen. If I make it index.html and put it inside Hello World folder. Let's try that. Save the server to restart. Let's try that slash Hello World. Ah, now it works. So that way works. I wonder if there's an option for that middleware to not have to type HTML. There might be. But the way I did this was creating a folder Hello World and redaming the file to index. So when we say slash Hello World, it automatically fetches the index page. Okay, so that's the static middleware to provide static assets. So you would put all your HTML under public, and it would serve automatically. So I don't have to define an endpoint or get endpoint for each file that I have. I don't need to repeat myself. It's basically doing all of this for me. And let's go to questions. Thomas, you said you didn't have to put HTML.html. Yeah, that's my first. Usually you don't have to, but I don't know why my... Let's try again. Yeah, this one is not working. Maybe it's some option that you have that does that. I'm sure there's an option. Or maybe the version of Express you're using is different. You got to consider that. In any case, how's everybody doing? Was that okay? Too hard, too easy? We're kind of on the hour I went over time. I still have content if you want me to... If you want me to go over JSON very quickly, if you still have time, we can do that. Otherwise, we can wrap it up. Let me know. Thomas asked, could it be quite complex as the website gets complex? Is there a way to avoid putting everything on file? Yes. Typically, we don't put everything on file. We separate to various different files, each with a separate concern. You can do that. You can define all of your endpoints, say, for products in a folder with products and put all your files related to products there. Another for orders and so on. Okay. All right. Is anybody still got time to go over JSON or no? Let me know your feedback. Say in the chat. All right. So this is nice, but today, when we make servers, we made what are called APIs. And APIs typically serve a specific format. That's not HTML, but rather a text, plain text, in what's called JSON, JavaScript, object notation. Pretty much, if you look at package.json, this is the JSON format. So the responses from web server would typically look like this with property and value pairs. So how we do that? Well, it's actually very easy. Let's go here and create an endpoint to get certain products. Let's go here. I'm going to say app.get, first argument string slash products, second argument of function with two parameters, rec, res, separated by comma, third of brace. Now we're going to send here res.send and watch what I'm going to do. I can actually send an array of objects. Let's say ID is one, name is, I don't know, iPhone. 15. So this is a array, JavaScript array with an object. This object represents a product, right? It has an ID and name, and it could have a lot more properties. Let's simplify, make it simple and have just that. Let's try this out in the browser. When I say slash products, watch what happens. I get back JSON. Now if I click the DevTools Inspect, I can see 200 OK, and the object type application JSON automatically set for us. And the response, that's raw, if I click raw, it's in an array of an object, everything in JSON format. Now my browser Firefox here is very nice, it recognizes the responses JSON, and it makes this very nice interface, but the raw data is like that. OK, see that. If you want the pretty print like that to make it formatted nicely for us to better see, and if you like the JSON interface from the browser to visualize the data, it's like that. So that's just it, just send back either an array or JavaScript object, and it will automatically send JSON. Now there is a function called JSON, that's meant to be just for JSON. You can do that as well, but send is like a general function, it will understand if you pass, try to send back plain text, or HTML, or JSON, that kind of stuff. OK, so typically what would happen is, you would have a database, and then you take the products from the database, query the database for products, and then you start them in a variable here, like products, and then you do some processing if you need, and send back products. This would be the database somewhere. OK, how's everybody doing? So most of the time today, you would be working on what's called a JSON, a backend server API that serves data back in JSON format. That's pretty much the most popular standard today of. Traditionally the server would send HTML, and every click on a link or a page would be a request to a new page, but things have changed, and the server sign kind of separated from the client side. So now we have different things, we have the front end applications, and we have backend applications, and they kind of separate now. But in the beginning they're all together, and that's why I showed you, you can send back HTML. But today we just sent back a text in format JSON, and then the front end would be responsible for taking that data and somehow showing it using HTML elements and so on. It uses JavaScript on the client side to build all the pages and construct everything based on the data that's provided by the backend API serving JSON. Okay, I think I wanted to show a lot more, I think I'll leave that for the next time. We're out of time. Let me share my browser. So again, the Recon be available at nbk.tac world. If you like the session, send a donation here on my link. Trees. And appreciate people donated last time. Now I got a Zoom subscription, we had no interruption with Zoom shutdown. And to keep doing that, please help me out with donation. And somebody tried to donate, it failed last time because my account was not properly set up, but I already fixed that. Anybody have any questions about what we did today? We have a Discord, some people like Discord. Let me bring that up. You can go to the link tree, there's a link there. Well, if I click Discord, this is the link to Discord. All right, so I think that's it. Anybody have any more questions? We'll be ending this. Goodbye.