Full Stack Web App using Vue.js & Express.js: Part 1 - Intro

hey everyone I'm Cody Seibert and welcome to a full-stack tutorial on how to build a web application using vue.js for the front-end express slash node.js for the backend and then my sequel for the database or sequel Lite as we do it development locally and before I get started to on this tutorial I want to say that this tutorial might be a little bit in the intermediate / advanced level but if you are a beginner I'm going to try to talk through everything I do and repeat actions you know often so that you can kind of bake it into your head of how you'd build a full stack application so hopefully you know first time through of your beginner might be confusing second time through you might pick up on key things third time through everything might make sense to you but without further ado let's go and get started so get an overview of what bjs is it's a front-end library which is used for building single page applications and I'm on the view GS website right now so if I go ahead and click on get started here it navigates us to their documentation which I believe is some of the best Doc's I've read for a library or framework in the past I've worked with angular 1 I've worked a little bit with angular 2 and I've worked some with react and now I want to say I'm an expert in Engler 2 or react but normai an expert of UGS but out of those you know the 3 hip new frameworks that are out I do think vue.js has the most potential just because the way they have it set up and their Docs and it's very easy to pick up and hit the ground running with UJS so if you like react you know stick with react but I hope you take some some key components away from this tutorial because view GS kind of makes us both the best practices from angular 2 and react so you'll see a lot of the same paradigms in view GS which i think is good for a beginner because it allows you to easily transition to other frameworks in the future so for the backend we're gonna be using Express GS which is a very bare-bones framework that can be used for building restful api is built on top with a node.js runtime environment and there's a couple of other frameworks out there like sales j/s happy Jas colleges and I haven't used anything other than sales at work I personally like Express because super bare-bones and if you're trying to start off learning about web applications and how arrest API works I think starting with some of those bigger frameworks or libraries is going to leave you a little bit confused there's a lot of like magical generation and hooks and whatnot going on so for this tutorial we're gonna start with Express and just kind of walk you through how to create a restful api that connects to my sequel database to store certain things so that kind of wraps up the overview let's go ahead and start building out a project in I'll go ahead and talk about what I'm going to be building in this tutorial all right so I'm gonna start off showing you a pre-built application which we're going to rebuild and try to work her way towards which I created it over my spare time so basically I created an app called treta tab tracker which we can use to track guitar tabs right so there's a couple of other sites out there like ultimate guitar tabs or whatever comm but I wanted to try to replicate that in something that's a little bit more user friendly and easier to use so the app we're going to build in this tutorial was going to look like this we have a main page which if you click browse here takes you to this songs URL and what this page has is if you're logged in already which I am over here I'm already logged in and I'll just go ahead and log out just to come demonstrate that so if you are not logged in the Browse tab allows you to search through songs so if I wanted to type in let's say reliance K for an artist it'll filter search the back end for that artist if I have searched for genre it'll show up a search for like country my other song will show up so basically the functionality is here we have this little panel which allows us to search through songs we have the songs displayed down here if you were to click on let's say one of the names or genres and go ahead updates our filter here and also get updates a URL query string now if I were to click view it takes us into the song in which we have a link to the YouTube video where we can listen to the song it has again that basic information it has some tabs over here so I can easily go through and you know play through or try to learn the song and guitar and then also on the right we have some Erick's so super straightforward and basic application now if I were to log in go here login has my password and information saved we get a little bit more functionality so on the Left we have our recently viewed so anytime you click view into one of these we're going to keep track of what you view before so you can easily just go to songs that you viewed in the past and then also we have a section down here called bookmarks song so if I were to go into I say getting in to you and say bookmark you know bookmark this song for my user account so now if I were to go back to the Browse tab I have that song bookmarked over here and again I can go back and view that we can also since I am the owner or the one who posted this song I can go in and edit this song so we have their own little edit song panel or view or route which we can edit the typical metadata that you have on a song such as the title artist genre album we can put a link to the album image and we can also put a youtube ID which is used for displaying that embedded YouTube video and then of course on the right we have our lyrics and our intro and then we have an about page nothing special go back to browse and then lastly we have the ability to add new song so ever were to click on this plus arrow over here we were given a crate song routes where we can enter in that was same metadata information and you know it'll print out red if you don't have a filled in because these are all required fields and once you have those set up you can kick create and it will create the song for you and in this instance we can't because we haven't filled out all the fields so that is an overview of what we're trying to build very very simple it's like a very bare-bones web application but it's still enough functionality to I think get you past the stages of being an intermediate or from being a beginner in transitioning into an intermediate developer like we're gonna build all this from scratch starting with a bare git repo which I'll actually build in this tutorial so let's go ahead and get started trying to build out this exact same functionality alright so starting off I have my github account right here so I want to go hook go ahead and just click on repositories I want to create a new repository and I'll name this one tab tracker and then this will be public I'll make it MIT so when you one can just grab it and do what they want with it and a description will say a view UJS expressjs web application for keeping track of guitar tabs so now if I click create repository github will create that tab tracker project for me and in this instance we can click clone or download I'll go ahead and copy this link and remember that you can change it to HTTPS if you don't have SSL setup on your machine I'm not going to cover up how to set that up but if you try to clone it with this SSH and it doesn't work go ahead and switch it to HTTPS and try that way but anyway I'm going to go ahead and copy this link and then I'm going to go to my console and say get clone and paste that URL and that will go ahead and download that git repo project and put it inside my workspace folder so now I can go ahead and go into our CD which is changed directory into tab tracker and right now I have a folder at my workspace location called tab tracker which has absolutely nothing in it except for a license cool so now if we go back we can go ahead and open up our visual studios code editor which I'm going to open up that same folder which we just clone so I'll go to workspace I'll go to tab tracker so now our visual studios editor is opened up to that project and we can start creating and adding files and folders as needed alright so now at this point we have a blank project folder now we want to set up our client or view j/s application for the front-end so starting off there is a project called view - CLI which you can use to kind of build up template project so in this case you want to install it using NPM install global or u CLI so if I were to copy this command and go back to my terminal and run it that will install the view CLI client in this case I already have installed so I'm really going to do now if you read through the docs that says you can use it by typing view in it the template name and then the project name so in this case we can say view in it webpack and then the name of your project so I'm gonna save you in it webpack and the project name is going to be client alrighty so now that view and it is done installing we can actually use it by running view in our command line so if I were to do a view list for example that'll tell us all the different templates we can use to build up our view applications so in this case I'll save you and knit webpack because that's one of them that's specified here and that's the one that has like all the goodies that you'll probably need and then I'll do view a knit web pack and then the name of the folder I want to create which is client that's gonna take you through a walkthrough which asks you a couple questions like the name of your project I'll keep it as client part of the project description keep us default author yeah whatever if you build runtime and compiler just stick with that view router yes yes let your code yes in es hunting is just basically the way to keep your code very consistent so you know make sure you don't have extra semicolons all your spaces are lined up and good so I'll do standard set up unit tests with karma and mocha sure why not tonight watch sure why not and now at this point we have a client folder which you can see here after I did an LS which lists all the files in my directory we see we have a client folder here and I were to go into the client folder and list out we have now a bunch of different files which are kind of used for running our view application and then a better way to visualize this if I were going through my tab tracker and go to the client folder again we have a bunch of files that are built up from the view and knit command and a lot of these aren't to worry about like this is just pre baked boilerplate project set up which you don't need to worry about you might need to later on as you get more advanced with like sitting with pack and setting up your build and whatnot but for the most part we have a project that is ready to go but before we can actually do anything we need to install all of our NPM dependencies or no dependencies so if we were to look at this package that JSON file and if you're not familiar what with what this is package law Jason is a way for the NP project to understand what dependencies your project needs so we have a basically JSON file which has a list of dependencies and dev dependencies so right now none of these are installed on our machine right so what we need to do first before we can even try to run our front-end application is we need to go back to our terminal and go ahead and just run MPM install and what that's going to do is is going to go off to the NPM repository and it's going to fetch every single package which is declared in this file it's going to install it locally into a node underscore modules folder inside of this client folder here so basically when we tell our project to run it knows where to find different packages such as you know Express our es Lent our view view router etc and in the future of this tutorial we're going to go ahead and add more dependencies as our project becomes more complicated so we're gonna go ahead and let that run and might take a little bit of time because it's going to download a bunch of dependencies but after it's done you don't have to run this again unless you're trying to update modules or something in the future alright so now that npm install is done running i'm just gonna show you what a version of node i'm using I'll do node - - version and I'm on version 8 - 1 so I recommend that you have the same version of node or Beyond at least version 8 or the latest version just so that you're not running into issues because this will change in download different dependencies and build them up depending what version you're note on so again make sure you're in node version 8 points something at least but at this point all the modules are done installing we should be able to see that node modules folder locally so if I were to LS grep node modules we see that we have a folder called node modules now and just to visualize that inside our vs code editor we have a node modules which has all of those dependencies and they're sub dependencies added to that project folder which is pretty big right so all these plus all their sub dependencies and whatnot are inside this folder and that's just you know a little bit background information it's good to understand how this is being set up but just know that this is where all our dependencies are coming from so when we import stuff in the future you know that basically we're just going into these sub projects and downloading and using their source code right so now all the node modules are installed at this point we can actually run npm run dev which is going to start up our view JSF front-end server and the reason we can run NPM run dev is because if you look at that packages a JSON file over here we see that we have a script section in the inside that script section we have a line called dev so I could do MPM run dev npm run start npm run build or any of these and what that's going to do is going to execute a command behind the scenes called node build dev server which basically builds up our source code and loads up a HTML web browser and points it to our server so now if I go back to my browser we see that magically we have a chrome browser pointed at our view jeaious application and everything is ready to go cool so at this point just to recap we cloned a github repo locally torrent machine we use view CLI to kind of build up a boilerplate project which can be used to create a view J's front-end application and then finally we did an NPM install to make sure we have all the dependencies we did NPM run dev which went ahead and started our web server and our UJS application and now we have a tab which is ready to go to see the view JSF application running so I might seem like a lot of work but remember it's a one-time thing we don't have to do any of that stuff again other than if you wanted to start up your server I give you shut down your computer and come back the next day you just need to run npm run dev and everything will be ready to go for you so now at this point we've done a lot of work so it's very good to make sure you always commit your changes like as small changes that usually make it very often commit them to your github repo so in this case if I were to you will get status we see that we have a bunch of changes well in this case a subfolder because we just added something so I'll go back says that we have a client folder added and what we want to do is we actually want to add all the changes that we've done we want to go ahead and make a commit and give us some you know initial message so I said let's just go ahead and say and that the UJ has application using view CLI so that's going to go ahead and add or add all of our files to the staging area of our local git repo and it's going to make a commit so we see that all these changes were added to our commit and now lastly we want to go ahead and push those changes to our master branch on the remote origin repo so basically at this point recap we added all the files we made a commit with this specific message and then we push it all to our remote origin repo which is on github so now if I were to go back to my project on github refresh the page we see that client is now there we have all those files inside of our client folder of the branch master and then if I were to go to our recent commits here we have two commits and the last commit we did in it the view J's application using view CLI which if you remember is the exact same message that we've put up here and now if I were to click into this I can see all the different changes that happened with this commit right a ton of stuff not really useful because there's just so many files so make sure your commits are small and make sure you do them often so again that was a kind of quick overview of how to use git make sure you commit often and make sure your commits are pretty small and then that was also demonstrating how you can see your changes in github so if you're not familiar with git or github or all these things continue watching and I think after some time this will start the click and make sense as you get used to continuously committing to a remote repo but if you feel lost at any point be sure to pause and go read up on some information about get about NPM about view about whatever you want but at this point let's go ahead and move - setting up the back-end project or or pretty much setting up the expressjs back in REST API okay so what I like to do in my project is we're going to have the client code and the server code separated but in different folders of our git repos so if you see here we have a client folder I want to go ahead and make a server folder which is going to hold all of our server code so that the client and the server don't overlap it's a little bit easier to manage and deploy separately and sometimes you make separate git repos in general with your client having a different repo and your server have a different repo but for the sake of this tutorial let's keep it straightforward to have a client and a server fold server folder with a very simple you know divide or separation between the two so I went ahead and made a server folder and if I were to go ahead and go into that I'm going to go ahead and split the tab here and typically I have my client on the left so I can do like NPM run dev here they have the clients always running and then on the right I can just go ahead and do CD into the server folder let me just fix that really quick because that auto load in my browser so now that's in this case remember the left is just our view GS application running so we don't need to worry about this left tab anymore the right tab is where we're going to have all of our server code or Express GS code so we have a blank folder here nothing in it and I can visualize that by going to here we see that we have nothing inside the server tab the first step we want to do with initializing a new you know server project is we want to enable it with NPM so we need another package of JSON file which we can create doing NPM in it - f-for force and basically that's just going to create a pipes a JSON file and put it inside that server folder so now I see I have a package.json file here no big deal we're familiar with this as a scripts and as a test and what we want to do is first of all we're going to install something called node Mun which is something very useful for continuously restarting your server so I'll do MPM install and - hi save node Mon we also want to install let's go set you guess lint alright so now that those two packages are done installing what we can do is go back to that servers package JSON file I'm going to go ahead and just delete that test and put in two lines I'm going to do a start command close this we have a start script which pretty much is going to run node man over some file so right now we don't have an apt ideas created but we'll do so in a second and it's going to run a linter over our code and then it's going to run our server now this don't I would say don't really worry about this this is kind of getting into the weeds of like your setup but just know that we're just gonna add these they're just gonna work we need to set it and forget it not worry about anymore and then later down the road you can learn more about NPM and how NPM scripts and node min works and all this other stuff so again we're hitting you with a lot of information at once but I think that's good so that you have exposure to you know how a full stack web application works so at this point let's go ahead and make a new folder here and we're gonna call it source and inside that source folder we'll make a new file called a Padilla's so inside this app dot JS file we want to define a web application so just to kind of start off I can say console dot log hello and now if I were to save that file let me make sure everything looks good okay so save the package.json file we saved the API J's file and if we were to go back to our terminal we should be able to do an NPM start command because you remember in that package so jason we have a start script and there's a there's a couple of keywords like start which you don't need to do run I technically I could do npm run start but in this case since its start which is a special keyword i can just do npm start hopefully this works we might run into an error let's see it says it can't find es lint that's because I forgot to run and initialize for Uslan so let me just go ahead and run that really quick so if I were to go to node modules es Lent and then should be like a bin file all right so that's kind of a little bit of setup so basically remember we do the npm install we install dias lint so now I basically just want to run the es lint script so that it creates a configuration file for us to use so I'll do node I'll pass it a file that I want to run and then I'll pass a flag called the NIT and when we do this it's going to give us a prompt and I'm just going to say use a popular star style guide I'm gonna say use a standard style guide which format JavaScript and so I'll give this a second to finish running all right so now that hasn't done we should be able to do an impious tart which will spin up no daman it'll run and lentor over our code and then it will start our server so in this case yes lint ran and it says too many blank lines at the beginning the file max of one is allowed so if I go back to here and just remove those blank lines save it our project should restart it should run the linter over that file and again print out any more errors this is a new line required at the end of the file but not found right so now at this point no demands should pass lint and then our app runs and it prints out hello and then our app will finish because that's basically all our app does at this point remember we have a node script that just prints out hello and then it's done okay so let's take a breather little recap we made a server folder we did npm init force to create that package that JSON file we installed two dependencies which were node mon Annius lint in fact these are probably deb dependencies so i could just put them down here no biggie and then we created those two scripts we have the start script in the lint script in which start is going to run node bond over our apps JS file this is our main entry point make sure you remember this is the key key information and then we're going to also run lint over that all over all of our javascript files and then of course you we created our app dot JS file here which just prints out hello so again has a lot of work just to set up a little project and there are other you know ways to generate an express package on the back end but i decided to take a you know from a scratch approach for the back end just so you have more exposure to npm you know creating files creating projects crane scripts versus the vgs stuff there's a lot of stuff going on with web pack which i don't even want to deal with or teach so i think it's better to use a generator for the front end because there's a lot of stuff the back end you could use a generator or you could get your hands dirty and try to learn how to do it by hand and that's what we're gonna do in this case with the express server already so now in this case we can just go ahead and do ctrl C to close out of that infinite writing no daman script again no daman we'll just watch our javascript files and then if we save or change any of those files it's going to restart a server and we'll see how useful that is in a second but to start off what we need to do is start installing a couple of those dependencies that will need to create an Express application so to start off we're going to need an application or a module called Express or at anyone called body parser we're going to need one called cores already new one called Morgan which is good for printing out logs and then I think that's good enough to start off with so let's go ahead and install those No Tennessee's we just installed a couple of dependencies not that big of a deal we assumed that done in the past we add - - save to make sure it's added to our package Jason here now if we go and we have those four dependencies added to a package Jason let's see so now at this point we can actually start building up a very basic Express Jas server so if I were to do an NPM start again I'm just to get everything you know ready to go and running what we need to do is go back to our app dot J's file and let's go ahead and start importing some of those modules that we just imported or installed right so first we can do a caused Express is equal to require Express we can do a constant body parser is equal to require body - parser and basically we're just requiring those same modules verbatim which you can see here on the right side where we do require and then putting them to some type of environment variable or not environment variable but putting them to a constant or variable here and basically what this is doing is it's going to dive into that node modules folder it's going to find the package called Express or cores so right here you see this one called cores and it's going to find the main file and just include it here so in this case if I were to look at packages Jason of course should be a main one here which is Lib index a Jas and basically what that's going to do is when you acquire cores it's going to go ahead and just grab that course package of course it closed down it's going to grab this index file and pretty much put whatever it exports into this file so again we're learning more stuff about how modules work in node.js but it's probably super confusing right now but it'll make more sense and down the road as we start using it more and so finally it's just finish off with you know declaring or requiring that last package we installed called Morgan now at this point we have an app which has these four dependencies included so let's build up an Express app so I can say Const app is equal to Express and that's going to build us an express server which again is just a very basic web application that's used for building up rest end points or whatever type of end points you want and then we want to start enabling some of those packages so that we can easily hit our back in and have logs printed out cores we don't have to really worry I'll think I can talk about that later body parser is for allowing you to process JSON data very easily so you can do app use first of all I'll say use the body or the log use the log generator called Morgan and then this is something that if you look at the Morgan Docs it says pass a string of combined that have it print out it logs in a certain way we'll see it in a second app don't use body parser JSON basically it's saying allow our Express app to easily pars any JSON requests that are sent in and then we'll say after I use cores to allow any host or client to access this not going to talk more about cores but pretty much unique cores if you want a server to be hosted on a different domain and you want any clients from around the world to hit your server and it's kind of a security risk to have it enabled so just if you do have it enabled make sure you have a good no security covering your application and finally at this point we can just do app dot listen whoops and then we can say process that you need port or port 8081 so at this point if I were to save this file and hopefully I don't have anything wrong with the actual code I've been typing but save the file it's going to lint my code and it's going to restart my server so the server is running at this point but unfortunately there's no way to hit it because they don't have any endpoints so I'm going to go ahead and just create a very very simple endpoint called get on status in what we want to do is just return something so here is how you define routes and Express right so you give it the method that you want to post or you want to use so in typical HTTP requests you can do a get request if you do a post request you can do put pache you to delete I think there's some others but these are the main five but basically we're doing app dot the name of whatever command so in this case we'll do a get request to a status endpoint now I should use slash status and then once we get a request on our server with that in point what we can do is just send something back so I'll say res dot status or red sauce in go ahead and send back some message objects to say hello world okay so delete all that stuff save this hopefully it works every started it seems like it's working so now at this point I'm going to show you yet another tool so if you give me one second actually before I could actually use do this so we have an app or running on port 8081 right so we should just be able to go on a chrome go to 881 and do a slash status and we see here we get message helloworld back so this shows or demonstrates that we have a server actually running on port 8081 it's handling an endpoint called slash status when it gets a request is going to go ahead and send back a JSON object which has attributed and then the string hello world exclamation mark if we go here we just saw that it gets returned to our browser when we hit this get endpoint and by default when you do a request in your Chrome browser is going to do the default of a get request so let me demonstrate another application we can use the kind of test out our back in so I'm going to go ahead and load up an app called postman which you can download from I think the chrome app store give me one second it's loading up right now actually I just I just saw a little bug so it's printing out combined here it's supposed to be combined so let me go ahead and change that and save that and just to show that what that does is now if I were to hit this endpoint we actually get some you know some logs it tells us what device hit us he got hit by chrome worse than sixty whatever it was to the end point slash status it returned a 304 or something and then I think it also tells you how long the end point took but anyway that's what this Morgan lagers doing just kind of it you know went off on a tangent there but to kind of demonstrate another way to test your back-end API you should download I think there's one called arrest clients this one is called postman it's a very useful tool and I think it's invaluable that you actually use it but basically allows you to do different requests so I can say do a get request to that status endpoint so I do this it says hello world I can go ahead and save that to my tab tracker so if I would say that's a tab tracker I can easily just load up my application and then you know grab that endpoint and test it whenever I want but basically you can chose the URL you want to test you can choose the different methods that you want to send to it you can define headers you can define bodies so if I would do a post I could define like a JSON body here or upload a file via this is a very very useful application and I highly suggest you download it because it's very helpful to test out endpoints as you create them and as you debug them so again going back I'll just go ahead and close out of that and we'll come back to this in a little bit as we create more endpoints and stuff that gets a little bit more complicated but for now again let's just do a nice little recap so going to the code we created an Express application is running on port 8081 and this is just allows us to overwrite that port if you want to using environment variables which we'll cover probably later on but basically we created a status in point when we hit it it sends back this and I think I already covered that so pretty much wraps up setting up a client using view j/s and then setting a server which is going to use Express GS and both of these are going to get a little bit more complicated down the road we're going to add a lot more logic lot work endpoints a lot more files but it good to know that it's very easy to set up using generators it's also good to know how to set up a project yourself using just you know MPM install look through NPM and find what packages you want and install them and again now we just did a bunch of work on the server side so let's go ahead and go back and we can add those so get add all get commit actually that was probably a mistake we want to go ahead and do a git ignore file first so that we don't upload every single node modules that we just installed so this message I'll say add everything I don't get commit and say setup of the express Jas server and then I'll go ahead and push that to our back in or push that to github and again if I were to go to get up here refresh the project we now have a server folder at this location with that same you know app Tijs that we've built up so I mean hopefully this wasn't too complicated it might have been a lot of information at one time but I think as we continuously add new functionality in the process I'm going to do is add functionality to the front end have it point to the back end and then implement the back and end points that we're trying to hit right so we're going to keep on doing that for every single page and every single feature and panel inside the front end so it should end up clicking overtime so with that being said let's go ahead and get started building the first piece of functionality for vue.js application and that's going to be a register page or a register route okay so to start off we want to be able to access or do these type of get requests and post requests against our Express j/s application so one MPM module we should install on the client just remember this is in the client folder we want to go ahead and install a package called Axios which is a library which can be used for doing those HTTP requests to a back-end so while that's installing let's go ahead and move over to our client folder here and what we can do is inside the source folder I'm going to go ahead and create a folder called services and then inside here I'm going to create a a file called a PJs and what this is going to be used for is basically setting up some type of connector which can be used to hitting up the back end so I'm going to go ahead and first of all import that Axios library that we're installing or importing and now we want to have this file give back a connector so if I were to go here and just do let's see so this is a function and we need to return a connector so what I can say is return X you just create and then that's going to take in a couple of things so first of all we need a base URL and that's going to 0.2 our back-end API all right so that should make sense we're saying create a SAN Axios object which is going to point to our back-end URL of 8081 and this API thing can be used for like hitting our different endpoints so now that we've created that we can go ahead and create a new folder or file I mean called authentication service j/s and what this is going to be used for is basically hitting that register endpoint that we haven't yet built but we're going to build in the future so I'll say import API from services slash API so now we have an API object that's imported from that API file that we created here which is basically just going to be this X US object and now we can actually just deep export a object that has a couple of methods so in this one I'll just say register credentials so basically what we want to do is have a object which allows us to call a register method which will hit that register end point which we haven't yet built yet so if I were to do something like this basically what we're saying is this authentication service ojs is going to export an object that has a register method to it and then we can call this like so we can say authentication untick a ssin service dot register and then we can pass it let's say email at gmail.com and then password can be like 1 2 3 4 5 6 so basically this is how we call this method from another file and we'll see you this in a little bit when we start building out that registered endpoint and then basically what this is doing is we're gonna pass that email and password to this post method of the Axios module which is going to do a post request to the register end point on our Express server and then is going to use those credentials so what we can do here is go to the back end now and if we were to create a endpoint called register instead of using get so we say post register and then let's just go ahead and send back a message that says your user was registered have fun so now we can hit this register in point with a post request it should return this message to us and then you should see how that kind of links up to what we're doing we're doing a post request to the register endpoint and we're sending in some credentials in fact if we wanted to access those credentials we can go back to our rest service and we can say we could actually say like hello and then the name of the email so wreck that body on email close this so we can see what's going on so now if we were to send in that email and password payload to this register endpoint it's going to send back a Hello your user was registered to have fun and just to visualize that with postman because remember I said it's very useful to use postman if we were to go to this register changes to post change this to JSON and I'll say email is testing at gol Calm keep forgetting that this needs to be real JSON and then password is one two three four five six if ice to a sent there it returns back from their back-end hello testing at gmail.com your user which registered to have fun so I'm going to click I'm going to go ahead and save this let's say register a new user so now we have an in point color register a new user I'm going to go ahead and delete this one because we're not using up so again this kind of shows you how useful postman is we don't have a UI yet so it's good to make this or use postman to kind of test your endpoints and then once we get the UI we can start getting those endpoints and see how it actually works all right so again a little recap on our back end we have a register in point which takes a post request and it will return a message with the email that we provided in the payload and then a little information you can access the payload using rec that body dot email on your express server and then for the front end as a recap we created two files we create the API which returns in Axios object that points to a certain URL and then we created this authentication service which allows us to call a register method on it which will simply post whatever object that we pass into it down here so this is how you call it we say authentication service that register we passes some JSON object and in this case we're passing an email and password to be used later on so let's go ahead and actually start implementing a UI to be to use for them this authentication service because we have like the whole behind-the-scenes stuff ready to go we have the back and ready to go and we have some methods in our JavaScript front-end for how you kind of communicate with that back in ok so I don't kind of like jumping all over the place and jumping from the client to the server and back and forth and I think that is a good way to kind of get you exposed to all the different things that happen in full stack development like this is how I kind of work naturally I'm not just like I like to implement the backend first sometimes or implement the front-end and then integrate them together with a little piece of functionality so to start off what we need to do is inside the UI we want to be able to hit a log or a register in point so if I were to try to get a register here it doesn't work because there is no registration in point so our first task is we need to build a register in point in register components so we can display so to start off go ahead and close out these because you don't need these anymore so if I were to go to our router inside our view GS basically this is the functionality or the code which designates how do you hit different routes so in the URL basically if we hit the path slash it takes us to a hello view or hello component so what we want to do is we want to make a new path I could click sorry about that so which basically we want to have a register path it's going to be called a register and then we want to display a register component so right now we don't have a register component so let's go ahead and just copy that and say register so if I were to say this this will probably fail because we don't actually have a register component declare it anywhere so now at this point we can go to the components folder we can say you know just I like the copy and paste existing code so I'll go ahead and just rename this one to a register dot view and then inside here we can just make a very base like div get rid of all this jazz we don't need this don't need that hmm let's see technically we don't need data at this point and we don't need any of these styled scripts yet boom so we have a very bare-bones view jeaious register component which if I were to say let's say I'll just say like h1 register so now if I say this I go and we have a register page here in fact I'm not sure why this giant views here I think it's because I need to go into the main app file here and again just get rid of that I don't mean I don't really need that stuff okay so I get a cool thing with the view or yeah view j/s the whole like view CLI product that we set up anytime you save your file it will refresh and hot reload your different things that change so that's just good to know it makes it super easy to use so now at this point what we want to do is inside of a register component we need to have two different things so we need a let's say an input field and that's going to be a type of text and then I'll say name is email type is actually type should be email right so basically we need a register page which has a email section and it has a password section it may be a button that says register so what I'm gonna do is go ahead and do those three things so I'll say give me an input box which has a placeholder email if I were save this we get an input that says email in it I'm gonna go with it go ahead and go here we need something called password see that boom we get a password and this is just super super basic HTML with no styling and I'll go back through and style this with probably material design in a second and then lastly we want a button and that's going to have let's say register all right so we have an info box called email we have a input box for password when you have a register button so at this point what we actually want to do is inside view j/s what you can do is you can bind the HTML to your controller so basically everything inside the script tag is your controller and you can kind of bind your HTML using special keywords as attributes which will kind of link things together so I mean they say it's bad practice to kind of use two-way bindings but I don't necessarily think that's true as long as you keep it like bass inside your component I mean well we'll use a view X in a little bit you know I'll spell that out there's a framework called view X which is kind of like the flux way of doing things react does it very similar with redux and we'll use that later on for a couple of key store related objects but for now what we want to do is just do a V model and set that to email here and do the same thing down here for and basically what's happening is it's saying when view runs go ahead and grab this input find any type of property or data or something called email and bind it so now down here if I were to say email is equal to a blank string password is equal to a blank string and save that right now it's putting in like autofill settings that's really annoying so I'm just going to go ahead and put ABC one two three so if I save that we see that those are put into our input box so what's happening behind the scenes as the v-model is the two-way binding school is saying set this inputs value to whatever this is and vice versa if I were to type into this input go ahead and update this down here so what what can do is kind of demonstrate that is I'm gonna go ahead and say watch email and whenever the value of email changes I'll say console dot log email has changed value so now at this point in my console down here whenever this changes it's going to go ahead and print out email has changed and that's just kind of the demonstrate how the two-way binding works as I type into this input box my data model is updated in vice-versa if my data model is updated so I could do another thing so I'll say mounted and that's basically whenever this view component is mounted onto the page I'm going to run a command it's all right now just to set timeout of hundred seconds in fact I need to do function because I need to use this so I could say this dot email is equal to a hello world I call so make sure this is a fat arrow basically when the page loads after about two seconds what we're gonna do is change email to ABC and this will demonstrate what happens with reactivity and health if the data model changes the actual view will change so if i refresh the page you see that it starts with ABC and then after two seconds it changes to hello world so again this was a good demonstration of how the two-way binding on B model works for input boxes so basically what we're trying to do here is when we click the register button we want to hit the register in point with some data and do something so now what we can do is just go ahead and get rid of all this you know temporary border plate code and we want to add a listener to this so I could say on click we want to say register so basically if anyone clicks this register button is going to go ahead and call a register method so down here I can say methods I can say click or I can say register you could say I'll see you register button was clicked get rid of all this get rid of all the watch because that was just kind of for demonstration and get rid of mounted and now if I were to save this when we click that register button with some values so to put some random values and click register we see that it now calls register button was clicked and then we have the username and password so at this point it should make sense as to why we need that what we can do with that so if we can go up here we could simply import that authentication service from if you remember that services authentication service here import that service and then what we could do is just call register on it and say email is equal to this dot email password is equal to this dot password and then I'm going to use a weight and async here because I think it's much better than using promises these days and I could say response is equal to that so basically what we want to do is call that end point remember there's a register end point on our node service we're going to pass an email and password and then we're gonna wait until it give it a response back and once we get that response we can just go ahead and print out response time data save this file this should refresh and then we click register with that and we get back a message hello see cyber at gmail.com your user was registered to have fun and again we can go to our endpoint hero node and we see that every time we click that register button it's hitting our node server right I keep doing that a couple times so we're getting our node server requests and we're sending a request to that register endpoint alright so I think this is a good stopping point I think we you know covered setting up an entire project front in the backend with few J s and expressjs for the backend and then we also set up how to create a very simple login or registration page using the exos or xeo some library and then also defining that end point in our Express application so at this point remember after you've made some progress it's very good to go ahead and commit your changes in this case I'm going to go ahead do it in vs studio so that I'm not you know overwhelming you with command-line lingo so what we could do here is just go ahead and say add everything so and then a commit message would be setting up the registration page and they go ahead and push those changes to the master branch and again if I go to my github refresh the page I should be able to see that we now have that register in point here so all of our code is now on github we're at a good State and I think we can stop this video for today and come back later and start implementing some more stuff all right thanks for watching

Channel: freeCodeCamp.org

Views: 326,478

Rating: 4.9362187 out of 5

Keywords: learn to code, programming, coding, javascript, web development, coding tutorial, learn to program, learn programming, learn vue.js, vue.js, vue, express.js, node.js, vue.js tutorial, javascript tutorial, vuejs tutorial, vuejs, vue js 2 tutorial for beginners, vujs tutorial for beginners, vue.js tutorial for beginners, vue js 2, vue js tutorial for beginners, vue js 2 tutorial, vue js tutorial, vue.js 2 tutorial

Id: Fa4cRMaTDUI

Length: 55min 56sec (3356 seconds)

Published: Sat Sep 02 2017