Build A Restful Api With Node.js Express & MongoDB | Rest Api Tutorial

mmm-hmm I am excited today you know why because we're gonna use so many technologies we're gonna learn about Express nodejs to put together a full-on REST API I don't worry if you don't know anything about these we're gonna learn how to connect to database we're gonna learn how to make route and make API calls and all the good stuff oh and since to you guys like the last magic trick hey that hold up hold up I got you so since we're learning with tree technologies today once we learn them we're gonna become kings hello it's me Maria anyway okay let's get going here let's create a REST API so the first thing I'm gonna do is I'm gonna go to terminal here and I'm just gonna npm in it which is gonna generate us that package JSON file which does actually not too much but it just holds us the dependency so Hiram's is gonna hit enter 10,000 times until we have this package JSON okay so this holds again all the packages packages that we're gonna get from the internet and the first package I'm gonna install is something called Express so let's do NPM install Express like so I kinda it kind of reminds me of Polar Express let me know if you've seen that in the comments okay so Express and the other one is node Mon and hit enter so we can install multiple multiple packages here just by adding a space and then the other packages name you can also add that node Mon into your dev dependencies if that's something you wish but for now this is gonna be super simple and it's gonna be fine so after everything is installed we can close up this terminal a bit and we can go to package dot JSON here and as you can see it holds our packages Wow amazing good job packages and you're doing your job okay the first thing we're gonna do is I'm gonna remove this script here and I'm gonna add a start okay and here make sure to add double quotes here here and here as well because it's not gonna work if you're not gonna do that don't blame me for it I'm not the reason why doesn't work and here we can just add node Mon fjs which we are going to create now so this is a script that's going to helped us execute and run our server okay that's all it does close that up we're gonna create a new file called fjs now if you remember again we did it like so if you added the HTTP we require the HTTP and then we created the server and Jesus Christ okay nobody wants to do that so now look at Express it's gonna be very awesome so the first thing we're gonna do is we're gonna import Express by saying cost Express equals to require Express that just gets us the package into this file the second thing we are going to do is we are going to execute this Express so the way you're gonna see online and everywhere is people are gonna create this app variable and they're gonna just execute Express on top of it and now you have the ability to create routes in a very very simple way so I'm just gonna add a comment here with routes okay if if you're blind like me I'm gonna zoom in a bit there we go hopefully this is a bit more visible now and let's create a route but before we create a route how do we start listening listening to the server like how do we boot up the server well look at this it's super simple all you have to do say app dot listen and you give a deed name that the port name that you want to listen to so for example three thousand and done that's it now we can create a route and I'm gonna explain what's happening here in just a bit for now let's just create that we can do app get and you can pass a route add a comma here and then you have your request and response like we did in node and now I can just send a message if I want with response so res dots and I'll just say we are on home okay the home home slash home URL okay and that's it we can reopen up the terminal or up here if you want and we can just do NPM start so we are running that script from package thought Jason perfect let's take a look in here as you can see if I hit enter we have the message we are on home so everything works wow that's that's that's pretty cool it's like three lines of code so what's happening here well we import the package we execute it and with that we can create routes so we can use this app to create routes now yet all it means is that it shoots us back a message if we want to send a message so like submitting a form like a login form then we would use something like post okay that gives it we can also delete something so you can imagine we have a post list then I want to remove a certain post I can use delete and in here you would add a logic to remove that post and we have delete and we also have something called patch which updates for example a post okay so you would use patch for updating the lead for deleting gets to get the information post to give the information yeah and in here the first parameter we have is the route that we want to go to so this executes when we go to slash so just localhost so nothing here if I want maybe this to go to slash posts like this slash post I would create another route to do that so I can copy this and paste it down here and I can add posts like so and now I can change this we are on home - we are on posts and go back here and now if I go to posts and hit enter we are on posts so as you can see it's super super easy to create these routes with Express and as you can see here here all we do is just respond to the user by sending a message here which is a string Wow super cool okay there's another concept that we need to talk about before we can create this this REST API is something called middlewares in an express and although middleware is you can imagine it as just being a function that executes when a specific when routes are being hit and let's say when we are hitting this slash here we can run a function that's always gonna execute when we hit this route so let's take a look on how we can do that and we can kind of restrict it so for example for it to only hit when we are on posts so let's take a look let's do it with the posts so the way you can create a middleware is you just say add dot use and here you specify the route that you want it to execute we can do posts and then here we can just create a function and let's say whenever we hit this post I can always run this function and I'm just gonna say hello this is a middleware running all right so we can add some logic here to run every time we hit this post so hit save and let's take a look here when we are on home and hit enter let's take a look what we have in our console and we don't have anything so that's good but when we go to posts slash posts hit enter look at that now we have this is a middleware running so we can execute these small functions and you're gonna see that we're gonna use some packages to add as middlewares even like authentification you can imagine that we can use like some identification and here aught so every time we hit a route then this is always gonna check if the user is authenticated you know so every time we go to a specific route this is gonna run okay so that's kind of the point of middlewares alright let's remove this because we don't need that to console.log it's pointless and the first thing we are gonna do is we are gonna let's let's connect to a database so to connect to a database we're gonna use MongoDB and Mongoose which is a package that's gonna help us make everything way way easier and MongoDB is actually a document type which doesn't really have relations so you can imagine it as being it just a one huge object that's pouring a lot of information so you don't have like relations and pay and things of that sort of you know SQL Mongoose kind of gives you that ability and it makes connecting to a database and everything very easy so we're gonna use that for now just because of its simplicity so I'm gonna close up the server by doing ctrl C and we're gonna install NPM install Mongoose here it's M o n G o OS e there we go hit enter and let that sucker install and now what we're gonna do is we are gonna go to something called M lab so let's go to M lab dot-com and here we can use a free database it gives us like half a gigabyte which is very nice just to kind of experiment and prototype with it okay so we're now gonna download it and because it can get kind of complicated there to make it make it work so depending if you're on Windows or Mac OS so let's let's keep it simple for now let's just go on M lab you can create an account and once you're on your account then you can go up here to manage and we can create a new server a database so we can go here to create new we're gonna hit that and now we can go to sandbox here which is free we can head down here continue and we can choose a server I'm gonna use Europe hit next we can give it a name I'm gonna give it a rest that's gonna be the name and hit submit and there we go that's gonna give us the database let's wait a bit there we go and it's in progress which is fine until that happens but it should happen quite quickly actually there we go okay gave you a refresh I'm gonna hit click on it and the way we can connect to it is with this link up here it says to connect use driver blah blah blah blah here okay so this is what we need here but as you can see it's gonna ask us for a DB user and a password so this is something that we need to create now how can you create that all you have to do is go here to the users so click on this one and you can add a database user so this is just so you can access this that database you can have multiple people here that can access your database for now let's just do test boy and I'm gonna do 1 2 3 4 5 6 and password must contain at least one alphabetic character I'm gonna do Rhino 94 Rhino 94 that's fine create ok perfect we have that now the problem is that we cannot store this URL with the password and the DB user and here when we connect because well people when we push up this code people can see the user name and the password so that's not good so the way we can hide that is by installing a package we can do NPM install dot and E and V so dot M okay hit install there we go we're gonna wait for it for a bit and let's try to connect to our database so let's go down here and for now we're gonna hard code it and I'm gonna just add connect to DB here like so and the way we can do that is we can import this mongoose package so Mongoose equals to require Mongoose perfect and down here what we can do is just say Mongoose dot connect and then we can pass and that URL so let's go back here and let's copy this and we're gonna change this later a bit so don't worry I'm not gonna hard code this in here but what you do is you just change this dbusername' all you do is add your username and password that you added on em lab so in here I added Rhino 94 and what you can also be here after this string you can pass an arrow function and just console.log I just console.log connected to dB okay just a quick message to let us know that everything works here okay that's that's it let's open up our console here in the same and p.m. start and let's see if we get that message so there we go connected to DB and we're getting this deprecation warning here and we can fix that by they just say that you need to pass this new URL parser so we're just gonna copy this from here and I'm just gonna pass it next to here okay and then I'm gonna add a comma right after right before this arrow function so let me go back here so I just add the comma actually let me hit save okay so we just pass the string we add this object here with new our URL parser and then we have our function here to just say hey we connected and as you can see now we don't have that deprecation warning any more perfect now again we don't want a hard code this so we installed that that dot E and V package story we can hide this is we can create a dot e MV file and here I can add a a kind of special message here or a key or a code or anything that I don't want anybody to see and and the way we can do that is I can just give it a name so for example this is DB connection connection okay and I can set this equal to this text in here so I'm gonna copy this and paste it in here okay so this is how it looks and we can hit save and now to use this again remember we are not gonna push this code up to github or anything that's not EMV so because people are gonna see our password and everything so we can just get rid of this and the way we can use it is by going up here and requiring that dot EMV package like so and we're gonna add a slash convict okay here you don't need to create a variable name before it it's just gonna work and once you require this package we have access to this dot E and V this DB connection here by right process dot e MV dot DB connection okay that's it hit save let's take a look are we still connecting Hey there we go were connected to our database so that's super perfect okay now this file can get quite crazy as you can see it gets kind of crazy so what we can do is we can actually remove these routes from here and add them into their own kind of file and we can import them in here and use them so let's take a look on how we can do that we can create a folder here called route and maybe this is just handling posts so we can create a new file that's called posts like that dot J s okay and what we can do here is we can import that express again require Express and what we can also do is call const router set this equal to Express router and call this as a function and now what we can do is we can kind of create our own routes in separate files and just import it into this app dot J s and it's all gonna make sense in a bit so now we can use this router rather than the app to create our routes so we can do rather than get and we can do slash posts and we can just say request and response and we can actually just copy everything from here and paste it in here and change this to router and now we can just module dot exports set this equal to that router so we're exporting this router so you can kind of configure this so you can have a post router you can maybe have a user's router and things like that okay so you can you can make everything more clean and your folder structure and everything okay so we have this one hope you're still with me because I'm lost already I'm tired again ok so we have this now the cool thing is that maybe I don't want to keep of having like slash posts and things of that sort so we can use a middleware we can bring this posts from here to a BAS so import route I can just say Const posts routes route posts route is equal to require and I'll just go to that folder so posts there we go and now rather than the way we can do that do it is we can go here and we can just do AB dot use so we can create the middleware and now I'm gonna say every time you go to that posts make sure to use this post route ok and now here the cool thing is I don't have to add this posts anymore here because every time we're gonna go to posts these post routes are gonna run so let's take a look let's go back here to our localhost and hit enter and we should still see that we are on posts now the cool thing here is that if I want to add more I can just go here and just add maybe a specific post so maybe post dot specific and hit enter and this is gonna be a specific post hit save and now if we go back to the browser I can just go slash specific and that's not correct because I might misspell this let's go back again to the browser and there we go hit enter and as you can see we are on specific post so the reason we're doing this with the middleware here is you can have multiple middleware so you can use AB dot use maybe have a user slash user and you have a user route ok you can create a new file for that as well now I don't have to worry about adding here posts and everything slash whatever whatever I always know that in here and my post route this is always gonna bring me to that post so whatever you have in that fjs and if you want to attach more things to it and then you can do it here like we did here with the specific so this may be a bit weird but it's it's very effective and all you have to do again is just create a route export that router here and then just bring it into the app is and use it as a middleware and that's it that's all you have to do so we have AB dot use posts here which is great and now we can only work here ok that's perfect and let's see what we are gonna need so here I'm gonna leave this we are on home that's completely fine and now what we're gonna need to do is we are going to need to create some data so we can store it in our database because we have nothing now and the way we do that is with Mongoose is we create these models so let me just show you because it's gonna make a lot of sense once I show you so we're gonna create a new folder called model here our models hit enter and then you just create a post model so I'm gonna uppercase this spacing post dot J s hit enter ok and here I'm gonna import that Mongoose package require Mongoose Thanks so perfect and we are gonna create a schema now now what the schema means it just represents how that post looks so maybe it has a a title and that's a string maybe it has some description so you kind of describe the way your data looks that's that that's it that's what a schema is so let's create it we can be const post schema and we can set this equal to Mongoose dot schema okay we're getting that functionality from Mongoose and here we just create an object like so and now we can just describe the properties that we want to use so maybe my post has a title okay and that's a string that's it that's all you have to do maybe I have a description I can add a description and that's gonna be a string and maybe I have a price I don't know why you would have a price so I just get rid of this and we can also do date if we want okay maybe these are the only three properties we want and we can just do date thought now okay now what if I want to add validation to this or maybe I need this to be required okay this cannot be left empty that way we can do this we can remove this string and we can just add an object here and now we can describe multiple things so I can add a type of string so the way we did it but maybe I want this to be required so I can add required true and I can actually copy and paste this to the next one so in here because this is gonna be the same and for the date I can also add a type date there we go and we can also add a default if we want we can save a thought now and hit save so there we go again this just kind of describes the way our data is gonna look our post data you can imagine that we have a user schema that's all it's gonna be is like Mongoose dot schema and then you can define the user schema maybe you have a user name that's gonna be a type string a password and a string okay and you can have date or maybe user info so it just kind of describes the way your data looks that's all it is and at the end once we have the schema all we do is we module that exports we export this and we set this equal to Mangusta model and now we give it a name so I'm gonna give it post and this model is the thing that's gonna show up in our EM lab so you're gonna see posts show up okay so we give this the name and the schema that it should use so we're gonna say post kheema and that's it I promise that's it there we go so we create that model we give it a name and we give a disk image to use and that's it that's all we need to do we can close out of this and we can just straight up work and this posts so let's let's try the get back let's try to add a post okay let's try to create one so the first thing you would do is you would import you would go up here and you would import then model that you want to post to so we're gonna say Const post equals require then we can go back to the model we need to add double dots here dot dot slash we need to go to models slash post there we go it's safe so we go back this post and now what we can do is let's go down here there we go and we can just say router dot post because we want to post something to it and the route is gonna be slash and then we can add a comma then we're gonna have request and response thanks umm perfect here we go we're gonna open this up and the way we can create a new post is by saying cons post okay I'm just going to create an object here and what we need to do is we are gonna have to access the information so the thing that we're posting to our API from the body so request dot body and we can actually console.log that out to see what we get back so console.log request dot body and I'm just no I'm just gonna leave it at this for now because we are gonna need another package to make this work so how can we test this out so how can we post things delete things without actually creating a react app or without using the browser so it very cool thing that we have is something called postman so you can search up postman and this is the first one right here and you can download it it's super simple and this is again just gonna help us test out our API in very simple ways so let me open this up here let me close this we're gonna say postman come on my friend this laptop is killing me alright there we go so we're opening a postman here and it's taking too much it's too long there we go I'm I need to reinstall mine because it's giving me an s nasty error but anyway we can close this up even this one we can close this up and as you can see here now we can make a get request if we want so let's try to make a get request to this post all I have to do is copy this and paste it in here and I want to do get requests and when I hit Send as you can see I get back that message we are on posts perfect now how can I submit one we can just go to post here and now I want to make sure I go to body here let me delete this and you can choose if you have it on form data you can choose raw and you can go to JSON application JavaScript here not application JSON application JSON here and now you can submit data you can imagine that your kind of doing this with on a react okay front-end but we can just do it here so the way we can submit to it is we can create an object here like so let me can zoom in here so you can see there we go actually more and now we can just define the things that we defined and our model so how is our post model looking like well let's take a look so let me open up the code here and it takes a title a description we don't need to provide the date because it's gonna jump to this default now so all we need to do is just add a title and description so let's try it so we can do a title and I'm just gonna say make sure to add double quotes here title and we're gonna say my first post and then we can also add a description again make sure you add those double quotes and a comma at the end here this is my description of my love life why would you do that I'm not sure but hey Yolo okay so we have this going here I'm gonna fullscreen this and now when we click send as you can see this is loading nothing really happens here which is fine but if we go back to our our app here we're gonna see that we get undefined down here hmm why is that happening well the problem is that we cannot process that that request that's coming in in our body we're gonna need a special package that's going to convert this to JSON for us okay so this is not gonna work by default so the way we can do that is there's a package called body parser which is gonna do exactly that it's gonna parse our our request and it's gonna give us back the correct way to handle that data so we can just npm install body parser like so okay hits enter it's about waiting again so there's a lot of waiting with installing these packages so all you have to do is up here let's go back to our App KS and we just add that package so we say Const body parser is equal to require body parts are like so and now we just create one of those middlewares we can say have got use and every time we hit any request we're gonna make sure that this body parser runs okay so we're gonna say body parser dot JSON like so and that's it that's all we have to do is one line of code literally so npm start and let's take a look again if that works so we're gonna start up the server let's go back to postman and hit send again on the posts and let's take a look what we get now look at that we are getting back the title and description down there so again it parses it and then make sure the response comes back and we can work with it that's all body parts or does so now that we have this information we can kind of work with it and post it to our database so that's very cool so let's take a look here let's go back to our posts we can close this up our Apogee yes we're not gonna work in aperture does yes anymore let's minimize that as well and in here in our posts what we can do is delete this we don't need this so just so you know we have our information that we're sending on this request dot body okay let's get rid of this and we can create a new post I'm just gonna say Const equals to new post now what is this new post well it's from here we are gonna create a new post with this model that we have up here and all we have to do is call this function and pass in an object in here okay and here we have a title and where is that title coming from from request body title we also have a description that's coming again from request body description okay hope that's super clear okay so we have this post now and we can save this to our database by just saying post dot save like so perfect and this actually returns a promise and actually we need to add something called exact which makes it to return a promise and then all we have to do is say then okay so we're just doing a promise here we can get back the data like so and then all we have to do is say restaurant JSON data so if I want to see it on the screen this is all gonna do after we posted data I'm just gonna put it out on the screen there so I'm just gonna respond with a JSON and the data that we're saving to our database and here we can also catch if we have an error so make sure to add dot catch here error and here we can just run an arrow function again and you can also respond with a status code so here this would be a 200 so you could do res dot status like 200 but I want to overcomplicate with you you can take a look at the status codes if you want to know more you're proud you probably know 404 which means that it's not found so that's kind of when you will see what you would use these statuses for so we for this one we can just say rest JSON and we can just send back that error message we can even do one if we want we can create a object here with a message of error hit save and yeah let's take a look if this works let's go here and now we add this and we hit send and we get an error is gonna say post out saved is not a function so let's take a look why this is happening and I apologize I don't think we actually need need this exec anymore we can just hit save here let's take a look now and hit send again and there we go look we have that object created and we can even take a look in our database so let's go back to M lab in here there we go let's hit refresh and we have our rest yes there we go and we have posts and there we go that's our model our post model and we have two posts actually I think I submitted this twice so my first post and my first post so let's get rid of one we can also get rid of one by clicking on delete and as you can see it also gives us an ID so this is something automatically generated by by and we have title description and our date right down here so that's super super cool and we can also reformat this and async await if you want and the way you can do that is all you have to do is just add async up here so before this request and response this stays the same and here we just create a cost and let's say saved post and we can set this equal to a weight post dot save and that's it and we can kind of simplify this get rid of this and then we have we can just rest dot JSON these saved post so this is a bit more cleaner now we can wrap this in a try-catch like so so we can try this and then we can catch an error just in case so catch and here we have access to an error like so and we can just rest are JSON a message with the error hit save and let's see if that works the same way we can go back to postman and here let's say this is my second post and here we can just change the description to my love life this is kind of not great okay and hit save here and we can send this again and as you can see it works the same way and we should have that data available for us now let's actually change up this router get here so we get back all the posts because right now we are not getting back all the posts and I don't want this message we are on posts who cares we won't back the data so the way we can get that is again we can just add that async if we want and we can do a try-catch here like so catch we can catch the error and here I can just press that JSON the message of error perfect and in our try what we can do is we can just say cost posts so this is all the posts that we're getting back and we can await the response so we can call post so again this is the model and the way we can get back is by adding find okay this is a method on Mongoose and here again if you leave it empty like this this is just gonna return all the posts for you there's a lot of things you can do look if you want you can have a limit so you can return only five posts if you want that is what you wish for so you have a lot of options options here but for now we're just gonna return everything and that's gonna be fine we can say rest out JSON and we can send back that response so and that's it let's take a look we are on post we can go to get and when we hit Send look we are getting back the whole lists of all of our posts let's do another post request here and on the posts we can go back to the body let's and eat another one just so we have tree this is my final post my final YouTube video parenthesis emotional okay click baiting perfect and the description is gonna be buy my merch alright and hit Send and we should get another one so we can go back again to the get its sent and now we have pre posts here so that's very very cool okay what else do we need to do well let's try to get a specific post so this one gets back all the posts this one submits a post and down here we can let's get back a son which I will let's get back a specific post specific post okay the way we can do that is we can do browser yet again okay get because we want to get back one specific post and rather than adding only slash we can do slash and we can do call on here and we can give it a name so like post ID or something post ID and here we have our request and response and let me cancel log out this post I be so you know what it is I can just say console.log request dot params got post IB so this is where we have it we have access to it okay let's save and basically this is kind of like a dynamic parameter so anything you add after posts so let's take a look here anything you add after here the is gonna be that post ID and we can access it with request params post ID so let me just show you the example because we are council logging it here and this route so if we go back here what we can do is just say this is the per am and when we hit send all right this is gonna block but that's fine because we're just console logging but as you can see here on our console well this is our per am so okay that's cool but what can we do with this well we can find a specific post by the URL so what we can do we can delete this and we can say post okay be model again so whenever you want to do anything to to submit data or get data we can use them model that we created in here and what we can do is say post and again you have a ton of methods here that you can have fun with one of them is called find buy ID which we're going to use here and we are gonna find that ID by this parameter here request params da post ID okay that's it and then you can do something with the response so again we can use that async here and just store this into a single post said this equals that and make sure you add a weight because this might take some time because it's coming from a database and then what we can do is we can just say res dot send or JSON and we can send that post perfect again we can wrap it in a try-catch just to be safe here like so and we can catch just make sure if we have an error then we are gonna read that JSON that message with the error it's safe and let's take a look so when we are getting all the posts now if I had sent here we're getting back an error because there's no such thing with this ID as this is the per am but look at this if we go to posts and hit send while we are getting back all the information and let's let me just copy one of these IDs here oh my let's do this one the last one this this is my final YouTube video emotional and if I copied the ID from here and I paste it at the end of this URL and hit Send as you can see now it just returns that specific URL on that specific post just because just because of this of this post ID and we can pass it down and here to search for a specific post and this way you can delete a post or update the post using this pram so let's take a look on how we can delete one it's gonna be very simple we're gonna go down here we're gonna say delete a specific post down here all we have to do is a router dot delete so this is gonna be a delete method here we can do the same thing we can add post ID we can do request and response might wrote is super dry but that's fine and here now what we can do is again we can use that model to do something with our data so I'm gonna call post and we have a method here called remove and that's exactly what it's gonna do it's gonna remove a specific post so this takes an object here and we can remove something with a specific ID so I'm adding underscore here if you cannot see that let me zoom in that's too much ahead what are you doing I'm adding this underscore here because as you can see that's the thing that generates for us automatically so I'm searching basically by that criteria zoom out a bit n that's fine okay so here what I do is just say this IB needs to match that thing that's coming from my request params post ID okay so this one perfect let's hit save and again this is gonna come back with a promise so let's say he sync and I'm gonna store this construe moved post or something and said this equals that make sure we await this and we are they try catch again you can kind of actually copy/paste this and just modify that if this is taking too long we get back the error here and I can just copy-paste this from up here it's safe so once we have that removed post I can just send back let's just do a rest JSON with the removed post okay it's safe now the cool thing is all I have to do is once I am on this post so maybe I want to delete this and I want to keep continuing to make awesome videos on YouTube and we can just go to delete and now since I have the same ID here I can just hit Send and look at that we're getting back this weird message it's gonna say here delete count let's let's make sure that we deleted this post so we can go back to the get request here and we can just delete this IP and just call it this posts so we can get back all the posts and look at that we deleted the last one so that's good now the final thing I want to show you is how we can update one so let's go back here and the way we can update one is by using something called patch so update a post and let's say I want to update a title of a specific post so all we have to do is call router dot patch that's gonna update it I can do the same thing so everything kind of repeats itself here and we can call a method called on the post again update one and I can pass that thing and that we did here so the criteria that we are searching from like we did here and you remove so I can just copy this and paste it in here like that so again we're searching by this we can use async again here and let me just what are we copying let's just copy the catch here then I'll wrap it in a try-catch alright let's get rid of this so try and then we catch perfect so we get this let's store it somewhere Const updated post equal to you a wait post updated one so this is the one that we are gonna wait for now this takes another property here so we have this object that is the search criteria and the next one is gonna be another object that you wanna change a specific information so here what I wanted to is actually add something called dollar sign set okay and here you add a colon and another pair of objects here so this is this takes another object in here here what you would do is you just say maybe I want to change the title so I can see title and that's coming from request body title okay let's save so this is how it kinda looks we have updated one we have this and then we set the new value in here okay and finally what we do is in here we just say cost let's just output this actually I just say res dot JSON and then we post that updated post okay hit save and now we can go back here and I want let's say I want to change the title of the second post so I'm gonna copy this ID paste it in here I'm gonna switch to patch and now in my body I can just delete this and just update the title if I want so for the title I'm gonna just change this to you we are learning about backend stuff and hit Send let's take a look and as you can see we get back a response with it says and modified here and some other fun stuff that to be honest I truly I don't understand everything in here but hey it is what it is but at the end of the day if we go to get now and go to post and hit then we should get look we are learning about back-end stuff so that specific part of the code of the information updated and our description is still my love life is kind of not rain it's okay alright so there we go we did we wrote we got information we posted information we delete deleted information and everything all right so let's see how this can work and how we can use it actually in the browser so I'm gonna do this very quickly we're not gonna implement it in a react project if you want to see like how you can work with API is and stuff like that check out my react for beginners you should have that up there and I think we work with like two or three api's but for now let me just kind of give you an example what problem you might run into you once you have this server running so maybe here you would do something like let me zoom in here a bit so maybe I want to fetch that I want to fetch all the posts so the way we're doing here right I'm just gonna copy that I'm gonna say fetch so the posts in here and then you would get back the result and let's just call so log the result okay let's let's hit tab why you do this to me close up hit tab and we should this should not work okay it's gonna say access to fetch local those three thousand posts from origin code pan has been blocked by course policy No okay you're gonna have this problem a lot of times you're gonna have this error and you're gonna say why is this happening to my life and the reason why this is happening is because look if we are on localhost 3000 we are only able to make requests on localhost 3000 you can imagine this as I have my own API on dev ed calm and you have your own website on Julia Roberts calm okay Julia Roberts cannot make requests to my API on my domain because by default they have this access control origin blockage thing okay so this only works if again it you can imagine is I have my website that's David calm and I have my note server running there if I have my client code so my client react project on are still on David calm that everything is going to work fine but if I have my API on David calm and I have my react project on Judah is why am I saying Judah just another domain it's not gonna work okay you cannot do that cross domain fetching but we can fix that we can go back here to our our project and we can actually allow it to use across all the domains so we can install a package from this we can close up this with ctrl C Y and we can NPM install cores hit enter we're gonna wait a bit did 32 term all right once its installed all we have to do is that is just to add that middleware so let's go back to fjs here and we can do it let's do above here because we have our middlewares here middlewares and we're using the body parser and we can also use that course and all you have to do is just say AB dot use and you just say course and you invoke that function and that's it simple as that we can run the function and we can start up the server again npm start and let's let's take a look let's pray for the gods oh no course is not define okay we need to import it and what are you doing Const course equals require course yay hit save do you still hate me no okay he doesn't hate me let's go back to code pen and try this again hit refresh come on data come back to us why there we go we have the response Hey look at that we have the response everything works fine now so we can extract that by saying now if I just convert it to JSON here so I'm gonna return this resolved Jason and just console.log deep data we should have this let's take a look look at that we have the array with both of our objects and now we can work with this and use it in our HTML and there we go look we got the data from an external API that we created there we go we put together all three technologies to create a simple REST API let me know if you want to see user identification and things like that how we can hash passwords and if you want to see that I am here for you okay I'm here I'm I'm bored and I have nothing to do all right and let me know if you want to see other magic tricks because I have some more right there in the background that you cannot see it the first sure a lot of the magic tricks behind me happening so okay all right I'll see you next time have a great day

Channel: Dev Ed

Views: 715,670

Rating: 4.9509234 out of 5

Keywords: rest api, restful api, express api, nodejs express, node api tutorial, dev ed, javascript project, rest api tutorial, express js, mongodb rest api, mongodb, node, node.js, node js, express, expressjs, express.js, api, restful, backend, javascript, express tutorial, express.js tutorial, restful api tutorial, express rest api, server side, server-side javascript

Id: vjf774RKrLc

Length: 53min 55sec (3235 seconds)

Published: Sat May 11 2019