So far, we have learned at the front end, HTML, CSS, JavaScript, we even delved into the library React to build user interfaces with the JavaScript programming language. Then we started learning about databases. We learned about SQL, the language that can be used to interface with an relational database management system. And then we learned to use the GraphQL user interface with Postgres called pgadmin. And we built tables to store messages and users for the application that we built to post a message or leave a comment. A feature very common in many websites and web applications today. Now we're going to venture into tying everything together because we have a front end, but we have no way of communicating with the database. So that's the middleman that we're going to implement today. We're going to use a back end using the language JavaScript. So it used to be that JavaScript was only able to be written in the front end, in the client side, but now we can do it outside. So we're going to use the library called Express to make it a little easier for us to build an HTTP server. Now if you're new to programming in general, basically a library is just code that somebody else wrote and we can use it as a tool in your own project. So before we go into Express, we got to talk about Node.js. So you're going to need Node.js. If you have participated in a previous lecture, you should already have it. Node.js is just a fancy name to say JavaScript except outside of the browser. So traditionally we had the HTML pages that were styles CSS. And if we wanted to manipulate the document, we would use JavaScript. And then somebody had the idea, okay, why not use JavaScript as of a general purpose, programming language just like all the others. And then we can actually build things on the server side like a web server. And that's what happened that they call it Node.js. Okay, so you're also going to need Postgres for this, like I said before, because we built some tables and we're going to need to verify that they're being, you have to communicate to database, so to start information. The repository I'm going to use for this, again, is this one. So if you want to follow along with the code that's already existing, that's where it is. Okay, so without much talk, I'm just going to go to Visual Studio Code in the repository. And we already have the web client directory, where the React application is. So I'm going to CD there just to show you and refresh your memory. CD web client and PM start. If it's your first time doing this, you've got to do NPM install first. And then after that, you can do start. Okay, so this should open the web app in the browser in localhost colon 3000, I think. Let me go to Chrome. Okay, so here it is, localhost colon 3000. In the browser address bar, I'm using Chrome right now. This, basically, you have a text area, if you click write message, it should add to this list of messages. And we did this with a fake back end. Now we want to do our own back end, that's the goal. Okay, now let me refresh your memory about PG admin. Here's PG admin, which is a graphical user interface client for the Postgres server. So we created a database. We'll stack to be three schemas, public. We got two tables, one for messages, one for users. If you recall, we want to use the table for messages to start that information that we saw. We have this body column. Okay, now let's go back to VS code. So basically, we're going to create a new directory here and write some code for the HTTP server. So let me call the new folder server. Okay, and then there I'm going to create a file, let's call it index.js. So if I want to write JavaScript outside the context of a website, you just have to create a file with the extension.js. And you can run that using the node command. So you would say node index.js. For example, if I say console.log hello world. And then I have to open a new tab or window for the terminal. In case of VS code, I can just click this here and choose which one I want. So I'm going to have two terminal windows. One is for the front end and another one is for the back end. Okay, so you have to have two separate ones. And I'm going to cd to server. I'm going to say node space index.js. And the statements in the file will be executed from the top. And you can see that it prints to the console hello world. Okay, so that's how we run JavaScript outside the browser. Now this is nice, but that's deleted. Now we got to use express the library. Now this library is coded somebody else wrote, so we got to bring that code to our project. Before I do that, I got to initialize this directory as an NPM project, which is what I'm going to use to install third party packages. NPM is like a node package manager, which allows you to install third party packages. So when you install node, in my case, you have 18 and have NPM already comes of node when you install. So first I'm going to initialize this as a project and all it means is you need to have a file that's called package.js on. So to do that, I can just do NPM space in it. And it's going to ask a few questions, you can just press enter and accept the default throughout. And you can change it later. Basically creates a file package.json. That's a manifest file, which will basically list the dependencies for your project. Now with that, I can install express by saying NPM space install space express. In case you're wondering, where's this stuff being installed from, it's been installed from the official NPM registry. You can find that in NPM.js.com. Let me just share that out of curiosity. NPM.js.com is the registry for NPM. So if you look for express, you should find it. And this is the page for that thing that we just installed. It's very nice as the read mean everything can even look at the source code. If you click the repository here, and you can actually read the code for that. That's somebody else wrote right this library. We don't want to reinvent the wheel. If we were to do this, like from scratch, we would have to use nodes HP module. And then be a lot more codes, right? So we don't want to do that. You always want to leverage the work of others and build on top. Okay, let's go back. After doing the NPM install, we should be able to see that the package.json will now have under dependencies property, the express key with the version we're currently using. This is minus 4.21.0. I should also notice there's a new directory called node modules that appears here. Basically N third party packages will be installed in this. So if you want to see and verify that express is actually been installed, you just look at known modules and find the express directory here. And here you will find its own package.json. And all its dependencies and the search code you can actually read here. And you might be wondering, why do we have all these other dependencies there? It's because express in turn also depends on other people's code. So it also installs that. So it's a lot of stuff. And you might also hear there's a lot of messy stuff. And with node modules, if you get experience, it's kind of a pain, but it's the way there is so many files. Anyway, let's go back here. So index. Now that we have express installed, we can use it by saying require quotes express. You can use double or single, it doesn't matter. And then we start this in a variable. I usually call the same as the package name, which is express. We should match the key into the json package json file under dependencies. So you call that express like this. And that will give you an app. And we started on a variable you should call the app. Okay. And finally, just to power a server, you can just call the app has an object. App is an object has a function called listen. So you can call that. And you pass in the, you can pass the port that you want to start the server in, for example, these thousand. So to run that, you just call node index.js. I should see no prompt here was actually a server running. So if I verify, I think in my conflict actually, let me see. We are already using 3000 for the front end, right? So we want to change that never mind a press control C to kill. I'm going to choose 3001 instead, because we cannot use the same part. All right. Let's verify going to the browser. I'm going to localhost colon 3001. I should be able to see cannot get slash that means it worked. Okay. So it'd be nice if you could see a better prompt when you execute the server. So what we do is for the second argument here to listen, I can pass a function that we be called immediately after powering up the server. So you can say a console log here saying the server is running at htp colon slash localhost colon 3001. If you want to put the part in a variable on sport equals 3001. So you can interpolate here substitute the value of the dollar sign curly braces. Oops, name of the variable. But to do that, you need the back tick. And here you would support that way. If I change port here to one, two, three, four, it will change here and there at the same time. I don't have to change it twice. Okay. So I just declared a variable. So when I refresh your memory, if you're not familiar JavaScript, you want to use a variable to hold on to a value for later use. The left hand side of the name of the variable equals some value that you want to assign to that variable. And then you need the cons key word, which just means I wanted to find a variable that's only assigned once, but no longer. You don't need to reassign it afterwards. And then here in the string, if you want to substitute the value for the variable port, you can use interpolation string interpolation dollar curly grace and then the name of the variable. But to do that, you need to surround it with back tick instead of the single or double code. Anyway, whenever you change, make changes to your source code, you want to kill the server and restart. Don't forget. So control C to send the interrupt signal. And then you run that again, you can see now service running. It's better feedback for the user. They understand the service running. You can even control click to follow the link. And I should open that in the browser. Okay. So let's make a think about how we're going to lay this out. So the front end. So the database has a resource that's messages. We need to operate on those resources. So the front end will be asking for multiple operations. For example, I need to list all the messages. That's one of the operations we can do. Another is I want to create a new message. That's another one. So we can focus on those two. Of course, there'll be more. For example, I want to add in a message. I want to see only a single individual message. I want to delete a message. You can have all of these actual features, but let's focus on the basics. Let's first look at into listing. Okay. So when we build a web server, I'm going to build here what's called an API application program interface. And it will be serving communicating with the front end with plain text, but in the format Jason via the HP protocol. So usually for APIs, we have what I call endpoints, which is basically an operation you want to do. For example, there's an endpoint or a route to list all the messages. Okay. And to do that, we usually follow a convention called the rest. If you haven't heard the term rest, representational state transfer, that's basically in its essence is following this naming convention. So if you want to list a resource, the client will make an HP request using the method get to the path slash the resource name. For example, in our case, we're going to make get slash messages. So when the person tries to access local host, 40000 and one slash messages using the verb get, we're going to the backhand server will ask the database for all of those messages. It will basically make a secret query select start from messages, for example, and then we'll get the results and then redirect that back to the user. Okay. So how do we do that in express? You're going to call on the app dot, and then you give the name of the verb. This case get. And then the first argument is the path. This is messages slash messages. The second argument is the handler function. Basically, what do you want to do when we receive the request to get slash messages? This function will be executed. And then in the function, we have to send the user a reply because we act always on request response, request response, the server client side makes a request, the server has to give back a response. This function usually has two parameters. One is break, second address, you can spell it out if you want. The first is for the request and the second for response. Okay. So in its most basic form, if you want to send a response, you can say RAS dot send. That's the name of the function. And then as an argument for parentheses, you can write whatever you want to send back, for example, a plain text string. Hello there. So when we do that, we're going to test it in a bit. You can go to the browser and type local host, hold on three thousand and one slash messages. That should make a get request to that address and it will hit this function here and the function in turn will call in the response to send hello there. So let's control C here and restart the server. I'll go to the browser. I'm going to go to local host colon three thousand and one slash messages. And I should see hello there. So if you recall when you type an address into the browser and press enter, that's by default a get request to this URL. Now we want to be able to receive the messages like we did for that fake back end. And to do that, what we're going to do is ask the database for that information. But before we move into that, let me just give an example. Let's say we had an array of objects here. Let's say, let's call it messages. Array is square brackets and each array has an element. So we make an object of curly grace. Let's give it a property message a little like this. And then I'll make another one message. So if you want to send this array of objects, like in JSON format, you can just go here and say send the messages array. And I should do all the work to send it back. Let me restart the server because we changed the code. And we're going to the browser. And we should receive back the string in JSON format. There's a detail about this. If you want to debug requests through the browser, like again, we can use the DAB tools, press F12 or right click inspect. I'll go to the network tab. And let me go to all here in the filter. I'm going to click refresh. And I'm going to click this one and I can investigate this HB request. You can see a request method was get to this URL. You can see the response headers here, which is basically whenever you make a request and when you get a response, you can get the HB headers, which is basically method that about the request, which is just key value pairs. So you have the key and the value. And then the request headers there. Anyway, something I want to touch upon is usually when you reply back from a backend server with JSON, you want to set the header content type to application slash JSON so that the client understands, oh, okay, you meant to say to send something in JSON. So I'll interpret your response as JSON. If you want to do that, you can go here right before you do the same. And reset header and content dash type comma application slash JSON. So set header function of the response object takes two arguments. The first is the property name for the header and the second is the value for that property name. So let me save control scene in the terminal. Go back to the browser, refresh. Let me go to the DevTools, refresh, see if the header is there. I'm going to go to response headers. I should. I think there's some caching going on. So I'm going to disable cache here. Let's see. I should be able to see content type. Yeah, there you go. Right here. That way the browser will interpret that. Okay, JSON. I found a Chrome. Firefox is automatically formats nicely for me. In Chrome, we have to press this 3D print. Let me show in Firefox. Yeah, Firefox is nice live view. You can click to see the raw 3D print. You can see the live JSON. Anyway. So let's see. Go back to VS code. Okay, enough of that. Let's look into how we can connect to the database. So in order to do that, I need a database kind of driver or client. That obviously we're not going to write it from scratch. So we have to leverage the work of other people. So to do that, I'm going to go to npmjs.com and show you there's a library we can use to access database queries using Node.js. Go to npmjs.com and if you look for Postgres, for example. So you would look at all of these packages to see which one better fits, best fits what you're trying to do. Now the one I'm going to use is this one called PG, a Postgres client. So that's the one I want to install with npm. So you can see this is the command and they tell you how to use it here. If you click the docs documentation and you can read and everything. Anyway, let's go. I'm going to kill the server and say npm install PG. Okay, now I should look at my package JSON. I should see PG under dependencies and the version is 8.13.0. If you verify Node.modules, you should also see PG here. Anyway, let's now write some code here. So after we do the express app here, we're going to connect. We need to connect to the database first. Now to do that, we're going to instantiate a new PG client like it's set in the docs. To do that, we got to require the top PG, a const PG equals, so we can use it. And we're going to say PG.client. I think we got instantiate that. So pretty much this PG, this object has a property called client. And this one, we can create a new object with say new PG client like this. And then we give it some options as an object. And it would be the database, the user, the password. Now the database, if you recall from PG admin, I created a database called the full underscore stack underscore db3. If you don't have a database, you got to go through this and click create here. And you got to do what we did in the lecture that we did before. Anyway, and then the user will be, if I scroll down here, login group roles. We created a full stack user three words separated by underscore. And then the password and I have my own password. Okay. So here full stack db3, full stack user three, and then my password. And you can put this in a variable. You can call the PG client, for example. And then I think we can do connect like this to connect to the database. Now this connect function here returns a promise. Now if we recall promises from the front end, we have to handle the promise so we can do the dot then. So we ideally, we would only let this code here run after connecting to the database. Otherwise you can have some problems there so you would do it then. And then you can move everything inside this function. Okay, somebody's asking, how can I quickly get the db if I wasn't in the last lecture. You can click the sequel directory here. And you have to follow. For example, create the database first and then create the role and then the tables are these. Let me show you. PG admin you got to have a server first. So you register server. Give it a name. Under connection, local host or 127.0.0.1. You can leave the postgres user password choose the password you set up for the database. And you click save. Once you got that. You should have it here like I did expand. And what I'm going to do is first create a login group role right click create. Login group role give it a name like full stack user. Definition give it a password. Privileges make sure it can log in as toggle. And this generates the sequel here. Like that, which is what I have in the repository code. If you were to manually type that that might have these you might have to change that if you run it directly from the source code. Because there's extra stuff there. Basically after doing that. You would create a database right click here create database. Post stack DB. And then owner would be the user that he created like folks stack user three. And click save. And that should create a database now for the tables. You'd have to expand this schema public and then go to tables and create. Here but that might be overkill so you would have to. Go here and maybe copy this. For example, copy that. And then you got to go to the query tool. Tools query tool. Based it there but it's not going to work off the bat due to this thing here the sequence. So you got to change this to big serial. And remove this. Because if you do it like that's going to complain the sequence doesn't exist. So I change that to big serial not know. Do the same for the users table. And click run. Some stuff here might also mess up because there's no users I think. Yeah it's going to mess up so baby if you did users first. Anyway I got to move home so let me know if you get it. All right. Okay so we were here. We created a new PG client. Then we call the connect function that returns a promise we got a handle the promise. And after that we pass a call back here. And I use the arrow function by the way usually I've been using just a function keyword. In this boot camp but you can also use that arrow. So this is the equivalent. Of course using error has some implication about the keyword this but in this case is okay. Anyway there's also another way to handle promises to a single way. If you don't want to have this callback kind of thing. You can actually do the following. Let me show you. I'm going to move this back outside. Instead of doing that then. I'm going to put the keyword await before that. To use await it has to be this statement has to be inside a function that asynchronous. So after the final functioning sync function set up app. And move that inside. And I'll move all the other stuff inside as well. And this is just a function definition so I have to call it to actually run the commands or statements. The instructions that were defined within the body of the function. Okay so using await it will not execute this code unless this promise has been fulfilled. Which is different from not having await. If you didn't have await this would be executed and it would execute everything afterwards. It wouldn't wait for the promise to be fulfilled. Okay let's see. Okay before we move on I also want to talk about a few points. Let me see. If you run that just to test it out. Noting the access.js. If you get no error message that means everything is connected correctly. Actually yeah that's okay. Anyway so every time it changes the source code we got to restart. So that might be annoying to you. So let me teach you how you can leverage a tool called Nodemon to automatically restart whenever you change your source code. So we're going to install third-party package called Nodemon by doing npm-stace install. space-save-dev-nodemon. Now let me ask you why did you add dash-save-dev. That's to separate the dependency listing in package.json. So if I look at package.json usually it goes under dependencies when you install anything. But if you want to separate that into the dev dependencies you can use that option dash-save-dev. People like doing this just because they separate what's necessary for production versus what's strictly just needed for development. Although you don't need to do that it's nice organization feature. Anyway we got Nodemon there so usually what we do now is instead of saying node we're going to use Nodemon. But Nodemon has been installing the Node modules and .bin there's a Nodemon command here. For Windows is the CMD and for Linux and Macs Nodemon. So you would have to say dot slash Node modules slash .bin slash Nodemon to actually reach that file that command space and then index.js. And you see it's going to watch your, by default it watches js extensions, json and mjs cjs. You can change that but it should work off the bed. So if I were to change index for example port 3002 it will restart automatically and you should see now running to 3002. Let me revert. Okay very nice so we don't have to control C every time you change the code and restart. Now you might be tedious to type the whole path. So for people who are lazy instead of typing this node modules bin you can type npx preceding Nodemon and it will automatically find it in that .bin directory. You can even go one step further if you want to create what we call npm script command. So instead of typing npx nodemon I just want to type for example npm start for example. If you want to type npm start and then run nodemon index.js you could go to package json. Under scripts property you're going to define a new property for that object called start and that will just call nodemonindex.js. So when I say npm start it actually calls nodemonindex.js. That way you don't have to know the specific implementation of the tool you're using to restart it every time. So you can have different kinds of scripts one for production one for development and so on. Start is a special case in that you don't need to say npm run start. But if you add for example let's say I were to do the dev one just for development which we'll call nodemonindex.js. And if I were to do production I want to run npm start node index. Production we don't want to use nodemon we don't want to be restarting all the time that will be messed up. Okay if I do that I would have to do for the development one I have to say npm run dev. I cannot just say npm dev and that should call nodemonindex. So if you were to do the start you can do run start or you can just say npm start which is like a special case. It's the only one that allows you apart from I think build and test. Anyway that over the way when we need to develop it just npm run dev and it should call nodemon. That's the thing I want to talk about. The other thing is the credentials let's go. Usually when we have credentials of sensitive information or configuration things that might change. You don't want to commit that to version control. So you don't want to include that in your source code here. So usually we separate that. A simplest way you can think of right now is creating a configuration file or a secrets file. For example secrets.json. And then here you can type all your secrets which would be these values here. Let's call it database. Let me just paste everything and change to json. So it's json format in my case. Although you can do .env file if you like a linux environment variables file. And you just change each property has to have double quotes and each value double quotes as well. Because that's json strictly json. Oops and they are separated with a colon. And the reason for doing this is this file will be ignored by git. So you would go typically you would have a .git ignore file. And you would write secrets.json there. So I'm telling git my version control software do not commit the file secrets.json do not track that. We don't want that to be committed. And that way you see it's kind of grayed out. And you can do the git status here. That might be too many there but because of the node modules that's another one you want to ignore. Let me put node modules here slash. You know I think you don't need slash but basically we always want to ignore node modules as well. Because it's just too many files. And if you include that in version control it might be inefficient. And usually you just always npm install them anew when you're copying the code to another place. With that out of the way you can see the git status became cleaner here. So I don't see secrets I don't see all the files from node modules. But if I remove it you can see this thing is going to change with all the files appearing. So we want to git ignore them. Alright so I put the git ignore at the root of the repository. Okay now with that I have this file that will not be committed to version control. So I can instead of writing my sensitive information there I would pull it from that file. How would I do that? My JavaScript is easy. So there's two ways. The longer way is you read the file with the FS module. FS dot read file sync for example. And then you JSON dot parse is that. The quicker way is to just require. Because if you require JSON file it will automatically convert to a JavaScript object. So here at the top I can do require dot slash secrets dot JSON. And you can put that in a variable const secrets. And here you can just say secrets dot whatever name you gave for the property. Like database user and password. So here would be database. Here would be secrets dot user secrets dot password. That way you don't have sensitive information in your source code. In case I don't know some reason you have some unauthorized party. They're not going to get the password because this file is never committed. Okay now let's actually make a query. So if you go to the endpoint for slash messages. Here I don't want this message to come from an array there. We're going to call the database so we're going to use PG client dot. So you can see there are many functions from my visual studio code helper. So the function will be dot query. And you can write the SQL query as a string here. For example select star from messages. And this thing returns a promise. So we can either use a single way or dot then. So if you do that then you're going to receive a function there I think with the result. And I think that result property will have rows property. So you can you can do move this res send inside there. And cause messages would be basically result dot rows. And it can send messages as that. Let's try it out. I'm going to refresh your see pretty print. I got now everything from the database. If you verify the database through PG admin. Tables messages right click view added data. You should be able to match everything one of these with what you saw from the response. Here. Okay. Now let's go to the front end. And I'll show you how that's going to play out there. The front end code is under Web client directory source app. And we have this message defined in their components so you can go there. And here's the react component that's defined as a function messages. And we have a user fact call which basically after the first render as the empty array here, we call this function to fetch make an HP request to the fake back end. Now it's not going to be this fake back end. You're going to delete everything. It's going to be H2P colon. No s. Okay. Don't put HPS slash slash local host colon 3001. That's the URL for the back end API that we just built slash messages. That's that's it. Everything else should run according to before as long as we're using body here for message. We actually use title. So this one would have to change right to the body here. I changed to the body because we call it body. Not title. Anyway, let's go there. Actually we've got an error. Let's see. See you got an error. Why we got our data. Let's read the console cross origin request blocked the same origin policy. This allows reading the remote resource. So this is a problem of what we call cores reason. Cores header access control our origin missing. So when you have a kind of domains are different between the client, which is local host 3000 and the back end local host 3001. The browser has this mechanism to prevent making a request as like a security measure. So in order to allow the browser to make the request, the server has to send an HP header called access control allow origin. And it has to kind of whitelist your local host 3000, which is the URL for the client, either do that very specific or you could allow everything by saying star for the value. Okay, so if you go back to the source code for the server under before you send the messages here, you can set another header. Reset her access dash control dash allow dash origin. If you put star for the value, it should allow everything. And now it's working. Because if I look at network. And I look at this. Think if we have to click XHR to make it more specific. Because when we make fetch call it's XHR XML it should be request. If you look at the request, the response headers you should see access control allow origin to star. If you want to be more specific and only allow your front end, you could change that. By the way, I don't know if I was sharing, but I was sharing Firefox here. XHR response headers will access control allow origin star. Anyway, going back to VS code here. I can put here local host 1000. If you want to be more specific. In the production will be the domain right whatever.com. Like for example, API dot whatever.com is your actual API. And your front end would be like www.whatever.com. So you put www.whatever.com here. Okay, so if you do that refresh. Let's see if I do it right. I might have to remove, let me see. I put local host there. Or disable cache. Does not match. Okay, it's not matching. Why? Let's see. I think I have to add the HTTP here. Let me go here. HTTP colon slash slash add to add that. Oops, not that. This. And that should work. If I go back here. Headers. Response. Here. Access control allow origin HTTP colon slash slash local host 3000. Okay. Yeah, so that's coming from the database now. Now kind of out of time. So next time we can look into how to write and look more into the back end. Okay, you might be wondering. So I have to do this stuff for every request. So we can actually change that later and have it always be set before we send a request. We can do that later. So I have to wrap this up. So we'll see you on the next one.