Transcript for:
Express.js Tutorial Series Notes

what is going on everyone my name is ansen and welcome back to a brand new video so in today's video we're going to go ahead and learn well you all are going to learn express js so i actually made a tutorial on express about like roughly two years ago but i figured it it's better to make a new series in 2022 so let's go to get started so first of all what exactly is express.js well express.js is a web framework that you can use to build server-side applications so you can pretty much build apis for your clients and that api can perform server-sided tasks such as saving data to a database you can schedule cron jobs it can also you can also build real-time applications too with express with socket io for example and you can build literally anything you want with express okay so typically in web applications or in software majority of time if it's like a web application for example it will oftentimes have a server side to it if it needs to do things such as creating users persisting users maybe you need to keep track of the user's invoices you want to save that to the database basically anything that you can think of that needs to be done server side you would pretty much do that using express okay express is just the framework that we can use to make it easy for us to build these server-side applications okay so what we're going to be doing in this tutorial or in this tutorial series rather is we're going to be starting from the basics all the way from the very beginning we're going to go from setting up a simple express app to setting up some simple get requests post requests i'm going to show you all how to get data from our express application i'm going to show you how we can create data with our express application i'm going to show you how we can connect to a database both mysql and mongodb i'm going to show you all how we can connect to it using a a an orm also known as an object relational mapper and uh later on we'll probably get into more complicated stuff such as sessions uh authentication uh and more more complicated uh concept as well okay so let's go ahead and get started with the prerequisites so i'm assuming that you all already know the basics of javascript you're familiar with node as well and you also have node.js installed if you don't have node.js installed please make sure you go ahead and install it because you're going to obviously run into issues if you don't have it installed so if you want install node just go to nodejs.org download the latest version i currently have version 16 i believe so i have version 16.13.1 but depending on what time or when you're watching this video this version might be a little bit outdated okay by the way express has been around for a very long time so even if you're running version 17 it might still work so yeah but just make sure you have nodejs installed and i also have npm installed as well okay make sure you have a text editor that's pretty obvious i used visual studio code and that's what we're going to use for this tutorial series and also make sure you download postman if you don't want to use postman you can actually use any http client you want but i personally use postman i think it's great it's really easy to use and we're going to be using postman to make post requests i'll put requests delete et cetera et cetera and i'm going to show you how to pass in headers things like that so make sure you download postman or use uh whatever alternative http client you want okay i think that's pretty much all we need to mention in terms of the prerequisites so let's go ahead and just set the project so right now i'm in my windows powershell um if you're on a mac you would use your terminal or item if you're on linux you use the built-in terminal right all we're gonna do is we're gonna go ahead and create a new directory and i'm going to call it express uh js tutorial okay so you can see that i'll just create i'm going to cd into it right now and what i'm going to do is i'm going to type npm init hyphen y and all the code will be in the in in a git repository and what i'm going to do is i'm going to set it up in a way so that uh there's going to be either different commits or different branches for each tutorial uh so for example after like let's let's say for example the next episode what we're gonna do after we finish setting up a project i'm gonna show you the basics of actually you know setting up uh you know the app setting up get requests and i'll i'll i'll write a commit message for that so that way you all can see through each version and follow along a lot easier okay so what i just did right now is i just typed empty minute hyphen watch just set up our our folder with a package.json file and then what's next is we're going to go ahead and install express.js so all we do is just type npmi express hit enter and there you go it's done that was pretty quick okay that's whoops that's all we're gonna need to install okay i'm gonna go ahead and open up visual studio code right now okay so right now i have my visual studio code open up let's go ahead and close this and let's take a look at our patch.json file we can see that we have the express dependency listed right over here okay now what i'm going to do next is completely optional but i do recommend you do it i'm going to install nodemon locally and what this will do the reason i actually have nodemod installed globally but the reason i'm doing it locally is so that when you clone this github repository and if you don't have nodemon installed globally it will actually just run the nodemon that's installed locally inside here you can see that inside this dot bin folder this nodemon command is actually over here to know the node one binary so you can actually run nodemon locally instead of if you don't have install globally which is what i actually recommend as well and we're going to set up some scripts so what here's what i'm going to do first i'm going to go inside uh and create a source folder okay and i'm going to create a new file called index.js okay and what i'm gonna do is i'm gonna go in the package.json file and i'm gonna actually just create a script called start and this will just uh use the node command and we're going to reference the the source dot the source slash index.js file okay and i'm going to set up another script called start colon dev so this is a dev script and it's going to use the nodemon binary or it's going to use a nodemon command and the reason why we're using nodemon is because this will actually restart our application upon changes so that way we don't have to exit out of our application that's running in the terminal and restart it every single time nodemon will watch changes and whenever it detects a change it will restart the whole application with the latest changes okay um so what we'll do now is we'll go ahead and just write a console log just to make sure everything works okay so let me just run the script so we can run the script by doing npm run start or npm start and it works just fine and you can see that it prints out hello and it just exits if i do npm run start dev you're gonna see that it logs hello and then it says clean exit wait for changes before we start perfect okay so now that we have that running let's go ahead and set up the actual project now okay so we're gonna do is we're gonna go ahead and import uh express so const express equals require express just like this so what this does is this imports the entire express library and it actually uh it actually the module actually exports a function so express itself we can actually call this okay and when we call that function it's going to return an instance of an app or like an express app and that's what we're going to actually be using to set up our application so for example if i do const app and i go ahead and reference express and i call it this is going to give us an instance of an express application so what we can do next is we can go ahead and actually listen to a port because right now if we just have this express call it's not going to do anything we need to actually listen to a port so that way we can actually start listening to requests coming in right so the next thing that we're going to do is we're going to i'm going to go ahead and set a variable called port and i'm going to set this port to 3001 okay and what i'm going to do next is i'm going to reference the app variable i'm going to call the listen method and this is going to take in a port okay so port is going to be 3001 and what that means is that when we actually want to uh reference our application we want to visit it we need to go to our local host port 3001 in order to actually make requests to this application i'm also going to go ahead and add a callback function and this will allow us to just you know do some logging for example so i can go ahead and say running express server on port what okay so let's go ahead and go into our terminal and you can see that right now it says running express server on port 3001 so if i go ahead and visit my browser and i type in localhost port 3001 you're going to see this as cannot get and that's totally fine because we haven't implemented any routes to handle okay right now all we've done was we just listened to a port we opened up this port for communication right so for example we can now visit our application on port 2001 but because we don't have any routes defined right we don't have any routes that are being implemented in our express app we cannot visit any route currently so that's going to be it for this tutorial i just want to show you how to set up the project very quickly in the next episode i'm going to teach you about get requests what they are what the purpose of it is and i'm going to show you how we can implement that inside our express server okay so this this episode was focused on setting up the server next episode we're going to actually set up a simple get request so thank you for watching and i'll see you all in the next episode peace out