Full Stack Vue.js, Express & MongoDB [1] - Express API

[Music] this video is sponsored by dev Mountain if you're interested in learning web development iOS or UX design dev Mountain is a 12-week design and development boot camp intended to get you a full-time position in the industry to learn more visit dev mountain comm or click the link in the description below hey guys in this three part series we're gonna build a simple full stack view j/s Express and application and the point of this quote this series is not really to build an awesome application as you can see it's very simple but to show you how to put things together and have a back-end API and then integrate view j/s integrate you know using view CLI and then and then compiling it into static assets into our server's public folder setting up a proxy also deploying to Heroku making everything come together because I think that's a big problem or a big just issue with people learning full-stack javascript is getting the back end and the front end working together and then deploying it in making it all work so in the first video in this video we're going to create our back-end Express API and then in the next we'll create the front end view application and then the last one we'll go ahead and build out our static assets from view and deploy to Heroku alright so as you can see the application is very simple if we just put in like this is a post and post it it'll show up it goes into a MongoDB database that's hosted by M lab which is an excellent service I would highly recommend if you're gonna use MongoDB they don't sponsor me in any way at all it's just something that that I personally recommend and then we have it so that if we double click the post it goes away now just to show you that the API is also hosted here if I go to slash API slash post you'll see we have an array of JSON objects with an ID ok because when you use MongoDB it automatically gives you what's called an object ID and it's actually the key is going to be underscore ID then we have the text which is what you see and then we also have a career at date which we're gonna format nicely right here he's a little bit of CSS no frameworks no bootstrap or anything like that alright so that's what we're gonna do guys let's get started with the backend alright so we're gonna get started on our Express API and I would highly recommend that you follow along I think that's the best way to learn rather than just watching but you know if you don't have the time or you're watching this I don't know on the treadmill at the gym or something that's fine too but we have vyas code open I'm using my vs code integrated terminal and I just have a blank folder called full stack view Express okay and as far as extensions what I would recommend is view two snippets okay so I'm using that I'm also using view der which is view tooling for vs code I'm using bracket pair colorizer which just you know makes it a little less confusing when you're dealing with conditionals and stuff like that and I think that's all that is relevant to this project I'm also using prettier which is a code formatter but I think that's it as far as you know what is relevant to this project so let's get started here since this is obviously a node.js application we want to run npm init to create a package dot JSON file and I'm going to just hit enter for most of these description I'm gonna say full stack view and Express app entry point index J s is good author you can put your own name if you want MIT license and there we go okay so that's our package jason now let's install the dependencies that we're gonna need so we're gonna say npm install Express of course we're also going to need cores because we don't want to get that that annoying chrome error that cross cross origin you know allow cross origin whatever this is going to stop that error from happening so we can make requests from other domains and stuff and this this API is going to be completely public at least not in these three videos we're not going to implement authentication or tokens or anything like that maybe we can do that somewhere along the line but I want to keep this pretty simple so Express Korres we also want body parser and we also want MongoDB which is gonna which is the just the basic MongoDB driver for node all right so we want to install those as regular dependencies and then I'm gonna install node Mon as a dev dependency so NPM install - capital D and then node lon ok so that will get installed as a dev dependency that way we can run the run the server with it constantly watching it so we don't have to reload every time so up here in the scripts we're gonna do our start ok so this is actually what Heroku will run and it's gonna run node and then server because we're gonna have a folder called server and then index dot JSON for node Mon we're gonna have a dev script so we'll do NPM run dev and it'll run node 1 and then serve our slash index dot JSP and let's go ahead and let's create a server folder and inside server let's let's go ahead and create a index.html are not HTML index dot JSP okay I'm gonna CD back out ok and of course you could just use your Explorer up here so server index J s and this is gonna be a pretty simple file if you've if you've built anything with Express this is all gonna be pretty familiar so we're gonna bring in Express let's say require Express and we're just gonna copy this down twice then we want to bring in body parser so we can parse the JSON that comes in okay and then we also want cores all right and then after that I'm going to just initialize my app with Express okay then we want to just put in a couple lines of middleware for our dependencies so let's do body posture app dot use and we want to pass in here body parser dot jason oops body but this should be inside here body parser dot jason like that and then for korres we just want to do app dot used and then pass in our chorus function alright so that should be good now i'm gonna create a variable for our port which is going to be since we're using Heroku we want to set this to process dot env well he and v and then we want port okay or five thousand so on our localhost we're gonna run this on five thousand and then we need to me to be able to start the server so i'm gonna take our app object and we're gonna call dot listen and pass in the port number and i'll just put a simple arrow here and let's just consult log and we'll put in some back ticks and we'll say server started on ports and then we'll use our variable syntax and put in the port variable alright so just having this should allow us to run our server make sure you're in the root directory here not in the server and we're gonna run npm let's do run dev that'll run node lon ok so we're running on port 5,000 if i were to go to localhost 5,000 or any route on localhost 5,000 we're gonna get cannot get slash or whatever route we put in here we're not gonna actually have a route for slash what we want is slash API slash posts okay this is going to be our main endpoint so let's go back and let's start to create that so I'm actually going to create inside server a folder called routes not routers why did I do that let's rename this to routes okay so routes and inside here we're gonna have another folder called API okay so in here we'll have a file called post is you could put all your routes right in the end the index file but it's not really I think it's kind of messy so to basically link to this file we're gonna go right under the middleware create a variable called pose set it to that file so require yeah we want it dot slash meaning the the from where we are in two routes into API and then into the post file okay and then right after that we'll do an app dot use and we're gonna say any route that goes to slash API slash posts is going to be directed to posts okay and and then the router will take over from there so let's save this let's go to and it's going to give us an error right now because we haven't set up the router and post j/s so let's go in post j/s and let's set that up so we want to first of all bring in Express so require Express okay let's also bring in the MongoDB driver alright and then we need to create our router Express router okay and before I forget like I always do we want to export the router so module exports equals router I always forget to do that so our first route is to get posts right so we'll have get posts we'll have add posts and we'll have delete post if you guys want to add update feel free to do that but these are this is all that we're doing for now so we're gonna say router and this is gonna be we're handling a get request so dot get let's do slash now this doesn't mean local hosts or whatever our domain slash it actually means slash API slash post because we directed this to this file so just putting slash actually references this this route ok so just just to be just to make that clear and then I'm just gonna put an arrow function here and for now let's just do a res dot send which will just send to the browser and we'll just say hello just to make sure this works so I'll save and down here you can see our server is back to running properly if I reload we get hello okay and this is API slash posts so now what I want to do is is start to work with MongoDB but before we do that we need a MongoDB database so I'm going to go to em laugh comm just go ahead and sign up it's completely free to sign up you can create a certain level of database certain amount of storage and stuff like that which is perfectly fine for development if you were to create a production application where you expect a lot of traffic and you're going to store a bunch of stuff then you want to upgrade to Premium plan okay just like with anything just like with Heroku it's great for a development or even small small applications but when you when you're building something of substance that that is gonna be like something popular in production then you're gonna end up paying fees for for hosting and for storage and stuff like that it's just it's inevitable but yeah everything here is free that we're doing so we're gonna create a new deployment I'm gonna choose Amazon Web Services as our cloud provider and let's see it depends on where you are I'm going to choose US East and database name let's say view underscore Express and submit okay so it's just gonna spin up our database so once this turns green there it goes it's all set so I'm gonna click on it and all we need to do here is set up a user not not like your M lab user but a user for the database so click here and then add database user and I'm gonna say ABC one two three I think you have to have some numbers I used to always just use Brad but you know furred for tutorials but now we have to use numbers all right so we'll create that and now we have a database user we don't have to create collection the post collection or anything that will be created automatically just take note of this right here this is your connection string I'm actually going to copy it make sure it's this one and not this one this one is to use for the shell this is what we want for our application all right so I'm going to copy that we'll go back here and the way that I'm going to handle this is I'm going to create a function down here to connect to our post collection okay so this is actually going to be an asynchronous function so I'm going to say async function and we're gonna say load post collection alright and in here let's create a variable called client and set it to a wait okay so a sink await is just a more elegant way to handle asynchronous data to handle promises so we're gonna use MongoDB okay the MongoDB driver and then client dot connect okay so that's used to just connect to your database that's going to take in your connection string which I just copied I'm going to paste that in and be sure to change the user and password to whatever you used okay so that's the user this is the password make sure you replace the angle brackets as well all right and then one other thing I want to do here is pass the second parameter of an object and we want to say use new URL parser if we don't do this we want to set this to true if we don't do this it's gonna throw an error okay not an error but just like a warning and it's just annoying so this will stop that from happening alright so that is our client variable now we want to use that we want to return client and we want to say dot DB and then pass in our database name which is view underscore Express and then dot collection and we're gonna say the collection name is going to be posts okay so this is just a function we're going to use within our routes to get the post collection so that we can run methods on it like inserts and deletes and gets and stuff like that or find so let's go back up to get posts I'm gonna get rid of this and I'm actually gonna make this asynchronous okay so I'm gonna say async right here and in here I'm going to say Const posts equals and then a wait because remember it's asynchronous this load post collection so we want to load that put that in that post variable and then we'll do a wait actually I'm sorry we want to do res dot send because I want to send basically just an array of posts that are in the database so here we want to do a weight and then post dot find and in here I'm just going to put a set of empty curly braces this could be some kind of query like if you want to search for you know text is is whatever some string but we want all the posts okay and then finally we want to return it as an array so we're gonna do two array like that and that's it so that should give us that should return our posts with a 200 response so let's save this and let's go over to this route here API post and reload and we get an empty array all right so we're actually going to be using a tool called postman which makes HTTP requests if you want to use curl or some other tool that makes HTTP requests that's fine let me just close all this stuff so this is postman you can just google it and download it I'd highly recommend it if you're ever dealing with api's you can make all types of requests and you know put in your header values and all that stuff so if I make a get request to http localhost 5,000 slash API slash post we're gonna get the same thing just an empty array you'll get a response of 200 which means everything's okay but now what we want to do is create a route so that we can make a post request to actually add a post so let's go down here say router since it's a post request we want dot post and we're gonna say slash because it's gonna be to API slash post just like here although you know it's the same URL we're making the post I'm sorry the request to but it's a different type okay so since this is getting this is post we can still use the same URL let's do a sync and then we want our request and response okay and just like we did up here we want to get the post collection to work with okay and then we want to say a weight and then pose dots insert one okay so this is a method that comes with the MongoDB driver obviously it's self-explanatory it inserts one record so in here we're gonna pass in an object and we want text which is going to come from request dot body dot text okay using the body parser and then we also want to have a created at which is we're just gonna say new date by default okay and then finally we want to return a [Music] HTTP response and I'm gonna return a 201 ok 201 means everything went okay but it also means something was created so we're gonna do res dot status and status is gonna be 201 and we want to do dot send that's it let's save that and now we'll go and try to add a post through postman so I'm gonna open up a new tab here and say post I'm gonna grab this same URL though and there's a couple things we need to do in headers we need to give it the content type which is going to be application slash Jason and then we'll go to body this is where we add the data I'm gonna hit raw and then just put in some raw jason all right ultimately this is going to come from view j/s but right now we don't have this is just like a headless server we don't have a front-end or anything so we're just using this tool to do it to test it out so let's say text double quotes it's Jason syntax and we'll say hello world let's send and we get back a 201 created status which is what we want we didn't send any data back or anything so as long as this this is 201 it should have worked so now let's to another one we'll just this is post to go ahead and send it to a-1 now let's go back to the get request and make that and there we go there's our two posts so we have an ID an object ID which is automatically inserted with MongoDB the text that we sent with the post requests and then the date which is whatever the current date and time is alright so we know our API is working so far now let's do the delete delete requests okay so we'll say router dot delete and this is gonna take in our route now with delete we need a specific post to delete we're gonna send that along in the URL so we're gonna say : are actually / : ID which is gonna represent whatever the ideas alright and then let's say async function request response is the parameter and then here we're gonna do the same thing we've done just take our post collection and let's do a wait and post dot instead of insert one we want to do delete one okay so pretty simple here we want to put our query so what do we want to delete by it's gonna be the ID so I want to do underscore ID now to get this whatever is passed into the parameter we can get that with request dot params dot and then whatever we call this which in this case is ID okay so that'll get the actual ID but when you're using the MongoDB driver this the idea is a special type of type are a special type of field and it's an object ID so for this to work correctly we actually have to wrap this in a special method called object ID that's attached to the MongoDB client so we actually want to do new DB dot object Eydie and then just wrap that request stop params dot ID okay so that will delete it and then we just want to send let's see let's go down to the next line and let's say res dot status and we're just gonna send a 200 response okay so let's save that let's try to delete so I'm gonna go back to postman I'm gonna just add in a post to delete I'll say this is post three okay that's a post request let's go back to get and send and now you can see we have this is post three so what I want to do is delete this post so I'm gonna take the object ID here copy it I'm going to open up a new tab and go to delete I want to make a delete request to HTTP API posts but then slash idk whatever the idea is so let's go ahead and try that okay we get a 200 response you can see right here under status and now if I go back to our get request and send it again that request is now I'm sorry that post is now deleted okay so now we have all of our routes we have all of our functionality I think I think we're all set for the for the back end it's a very simple API but again the goal here isn't to build some amazing application it's to show you how to put things together and you can take that and you can build bigger things if you want so I think we're all set we will have to do some additional stuff before deployment actually I guess I guess we could do that now do I want to do that now let's just wait until the probably the last video to do that because we need to basically say if we're in production if we're on if we're deployed to Heroku we want to look at the public folder in the server okay which is going to have all of the the built out static assets from our view application from our front-end but we'll do that in the last video so now that our API is all set in the next one we're going to start to work with view

Channel: Traversy Media

Views: 211,510

Rating: 4.9471478 out of 5

Keywords: vue, js, full stack vue, js express, vue mongodb

Id: j55fHUJqtyw

Length: 25min 30sec (1530 seconds)

Published: Mon Oct 08 2018