Full Stack Vue App: Learn MEVN in one video with Mongo Express Vue and Node js

being able to build and deploy holistic applications is a crucial developer skill nowadays and today we're going to learn how to do so using modern web technologies like Beauty yes which is a popular JavaScript front-end framework nodejs along with a spread for creating the REST API in MongoDB which is the most popular node sequel database out what is usually known by the name of the MeV n stack by the end of this video we will deploy the app to the internet so you can share this project with your friends if you are new to the channel please like and subscribe and now let's take a look at what we are going to be building today the app consists in an interface to create bucket list items so you can keep track of everything that you want to do before dying we can remove the items that we don't longer want and we can edit current values as you can see we are live in the Internet and every request is being sent to our back-end node server we will start from scratch and I will explain every step involved in this process let's start by setting up MongoDB we are going to be using Atlas which is a service to store in the cloud you could also set up locally for the purpose of this video first sign up for an account once you're done select the free plant that gives you a sandbox that you can play around with a mono cluster we are going to select the default settings here for the region and the type of cluster you could change the name of the cluster if you wanna but for the video we will keep it to the default once you save the settings let's wait for a few minutes since it can take a little bit of time to create a cluster when the process is complete let's click on the connect button which will give us a quick way to add user and whitelist IP addresses for connecting let's start with a user you want to make sure that you use a strong password save this for later since we will use this in our application the IP address that we are going to set up for this tutorial will give access to anyone that has your user and password ideally this IP address should be the one that you have your server in production but let's keep it open for the tutorial when you have added that in the next step select this option that will give you the your URI that we will be using to connect to the cluster replace the password and save this configuration for later when we set up our packet now moving on with the project let's create a folder that we will be working on let's give it a name and then CD into the project we will initialize or package a song with NPM at this point make sure that you have installed nodejs in your computer you can download not is from the official website - Mac Linux or Windows now let's open the project with PS code we're going to install some of the dependencies needed for this project we will start with the backend Express could be your Mac and framework as we mentioned before mongoose will give us tool to connect and interact with MongoDB but the parser will transform the body of the request to Jason and course will allows allow our front-end dev server to make Ajax calls to the bakken and finally Morgan will lock all the incoming requests to the server for the DEP dependencies we are going to be using node moon which is a tool to give our application running in refreshing every time we made a change and concurrently which allow us to run two comments at the same time we will be using these to run our back-end server in our front-end AF server at the same time for the next part let's create a new file called server at Jes which will be our entry point for the application let's quickly made a hello world app to see if everything is working as expected let's require Express and declare or up at the part that we want to listen now let's declare this get method from the app that will return a hello world message to anyone requesting access to the root of our server finally let's listen to that part and log to the console if the operation was successful let's open the terminal and execute our program we can see that the server is running correctly for the next part we are going to be adding some scripts to run our server and change the main property to the server that yes we will refresh our application every time we make a change and we are passing the ignore flag to ignore or client view app that we are going to setup now let's create a new app with a Busey Ally first make sure that you have installed that in your system and now let's create our app with the quit is common the name of the app will be client because I have two are installed in my computer I'm going to be using the am flag which will tell the see light to use NPM to install the packages here let's select the manually option it should take a minute to install everything now let's take a look at what we have in your package that jason of the client we can see that we have a service script that we can use to run the front end up without reload what we want to do now it's been able to run the dev script from the server in the one from the client at the same time of course you can run one every time but it would be more convenient to have both running with one comment let's go to the package agent of the server and there we will have the following script what is common we'll do is run our dev server from the root of the folder we are going to use the prefix flash so we can run this in the client folder and now let's add a dev what this will be doing is run our server and our client at the same time as I mentioned before we can test the script and we can see that we have both outputs and the last thing that I want for this initial configuration is that I want to be able to make API calls from the client with a route path of our server I mean without the need to add look at the hosts to every request in order to do that I'm going to add a new view that conflict JS file and we will have the following configuration we only need this for development so we don't want to add the URL in your I just request from the front in every time we try to access the API path we will proxy the request to localhost 3000 in this case is the place where our back end is running now that we have our start project let's begin with our pipe make it back in API we will start by adding a config file we can use this file to connect to the correct port into MongoDB in the root of the project create a file called confited J's and add the following we are exporting a config object that has the Mongol URI that we will be using to connect to our manga cluster this will be the one that we configure it before in atlas I'm going to stir this Anna as an environment variable because I don't want to check this sensitive information to github I advise you to do the same but you could also have the URI in plain text here if you don't want to put if you don't plan to public this repository this will not stir the URI as a environment variable that we can read in your code with process that and me be aware that this variable will only be available as long as we keep this terminal session open so for future use you can add these to your bash profile where you can have where you have other MB variables for Windows you can run the same command but make sure that you are using the kit bash terminal for the port will also be using an ember areevo I usually said in our production servers if we don't have that variable it will fall back to the part 3000 now that we have our config let's open the server dot JS file and let's connect to MongoDB with Mongoose first let's require Mongoose in our config file that we just created and then let's try to connect because the connection is a non synchronous operation we're going to be using promises and once the way is connected we're going to console.log a message if the operation fails we're going to lock the error we are passing some configuration here so make sure to pass the pause the video and copy this configuration let's run our server to see if this works as you can see we are logging the success message which means that we connected successfully to MongoDB finally we are going to make use of the other libraries that we installed course will allow us to make Ajax requests from our front-end dev server to the vacant Morgan we log every request to the server in the console and we're using the tiny configuration that gives us small messages embody parser will transfer the body of every request to jason once we have this setup let's create a schema in model with a mongoose i'm going to create a new folder called models and here we will create a file called bucket list item that J's so this could be the name of our module let's import a schema and model from Mongoose and now let's declare our schema it will be an object that has a description property which is a required string and you will also have a date that is the type of JavaScript date object and the default value will be the current time of the server now we're going to declare our model with a schema and export it so it can be used in from other files now that we have the Claire or modules let's create the rows for the rest API I'm going to create a new folder called and here let's create a file called bucket list items in a folder called API here first require the modules that we need we are going to be using rotor from Express in our model that we declare before now let's declare an instance of the router the first route that we are going to declare is the root of this end point we are going to use our router get method that can handle get requests and for the second argument we can pass an a sync callback function to handle or logic because this is the root of our endpoint we are going to await for all the items in the collection with a fine method that we have in our module if there is no results we are going to throw an error otherwise we are going to first sort the response by date using the rates or methods and then transform our data object to milliseconds so we can subtract it and compare it finally we are going to send back our sorter items responds with a status of 200 because this promise could fail let's handle a possible error with a try-catch block if the request fails we are going to send back a 500 error with the message of the error now let's handle a post request to create new items we are going to use the post method of a router and we are going to listen again to the root of this endpoint because that will be an a sync function that takes there right the request and response as parameters now let's declare a variable with our bucket list item constructure we will pass or read that body that has all the properties that we need to store to the constructor let's add another try-catch block that we handle or a sync code we are going to declare a bucket list item cons that will be the result of our model safe operation don't forget to await the result if we don't have a result we are going to throw an error and then we are going to send the project say that with a 200 status the catch block again will send back up 500 error with the error message for updating existing items we're going to use a boot method of our router and we are going to declare the IV of the eaten as a parent with a when with this Collins syntax for or a sync callback function we are going to use our try catch block and first less the construct or IP from the request that params object we that let's away for define by ID and update method from our model the first problem will be our IV and our second is going to be our update an item that comes from the request that worried this method will make sure that this item exists and then it will update it I want to return the updated object to the client for doing that I will spread the response that underscore underscore doc which is the dog that was found with the method and then I will merge it with the updater properties that come from the records that body of the request as we Ferb will check that we have a response and then we send it back with a status of 200 otherwise we throw an error and send back an status of 500 with a message of the error finally we need a way to delete our items for doing that we are going to use or delete method for an hour router and like our put method we are going to declare the ID of the item as a parent with this : C syntax the assing call back function here will also have a try-catch block we first use the ID for undirected params object and then less away for fine by ID and the lead from our model this method will take the ideas apparent and we will return the removed item if we have the item within a 200 response otherwise with runner and in a 500 responds with a message now let's sport our router so it can be using from other files at this point we have declare all of our routes and models now we only need to use them in our entry point file let's open servitor J's and require or roads then we are going to use the rows from the AP / backer list items and point it's time to do some testing I'm going to be using in Sony which is an amazing tool for debugging api's but we feel free to use postman or other tool if you prefer let's create a new request that in this case will be a gift request that points to a P is API as large bucket list items let's make the request and we can see that we get an M theory as expected because we don't have any it items yet we can now add a new item to our collection using the post method the in point will be the same and let's pass some JSON body to the request cool we have a 200 response with the object was created now let's update the value of the description with an emoji and we will use a put method with a bid of the object as a parameter that we just updated the object I will add another item with our post Madonn unless remove this item as previous with the ID param and finally let's remove it with or delete endpoint we will need to pass the ID of the item item to the URL and let's use the delete option here in insomnia now that we have our server ready let's move on to review front-end first let's open the terminal and see the to the client folder there we will install access access will help us to make Isaac's request to our server feel free to use the native fetch API if you want or any other tool let's see the back to the root of the folder and run the server in the fronton and at the same time now let's click clean up or code in the app that view file I will first remove the initial code and then I will remove the initial component now open the index that HTML file of the public folder and here we are going to add the city m4 Bulma which is an amazing CSS framework that we are going to be using and also let's add the CDN for material icons so we can have icons in our application now let's move to the app that view and the first thing that we are going to do is fetch all the Eaton's from the server let's first declare a new data property with that will be an empty array to store all of our items now let's use the amount you lifecycle hook to make or API call to get the items this hood will be called when all of our Dom elements are rendered into the screen then we are going to use the icy keywords so we can make use of a weight for making the a Jax call we are going to use axel so let's import axis first now in the mount for function let's away for the API call with a get method from axis we will pass the road over back an API and then let's stir the response in a variable now let's assign the that data of the response to the events that property of the component this will take care of fetching or data but now we need to display this the data to return let's first add a div with the ID of app and give it some style so it does not expand in all the screen now for every item we are going to use a div that has the notification CSS Wilma class let's up here the V for directive in the element and we will read the item and the index from the items array we will also find the key prop with the idea of every item these will help you to keep track of which Dom elements being added or removed from the zone the children of this element will be a node and inside we are going to bind the ETM description with a beaut template syntax we now shall be able to set um note for each item now we need a way to add new items with the front-end let's first add an input element with the help of all my CSS classes this will give us an input and a button to add new items now we are going to declare a new data property the initial value will be an empty string that we will be binding to our input with B module B module will take care of reading and updating the description property every time we interact with the element now we need a way to save the value of the input to the back end let's add a click event listener to our model and pass the add item function to it we will also disable the bottom if there is nothing in the description so we don't have any empty values the add item method does not exist yet so let's create in the methods part of our component this method will use a sink and a weight so let's add the async keyword at the start of the method here we will first away to the post request that we're making with make it with axis the road will be the same as the one from orchid code and the data will be an object has our current description value of our company once this is completed we are going to be pushing to the items array the data value of the response with witches or item created after that we need to reset our input to the initial state let's test this out we will add a couple of items and we can see that these work as expected now we need a way to remove items from the therapies for doing that let's change your item HTML markup so we can have two columns we will create a new element with the columns class provided by Palma and a column class to each child the second child will have the is narrow class so it only uses the space that it needs the second child will have our material icon element and we will listen to the click event to call the remove the item method with the item in the index as arguments the remove item method will be also a sink we will first a way for the axis that solid metals the rod will be our base URL concatenated with the ID of the item so the server knows what we are going to delete after that we are going to remove the item from our items array with a splice method let's test this out you can see that this item is removed from the Dom and if we refresh the screen we can see that the changes were persisted to read Divi the only thing that or UI is missing now is the ability to edit current items for doing that we are going to be adding a edit icon and other left of the palette icon to keep track of what we are updating I'm going to create two new data properties they edit edit description will be a stream that gets updated when we edit the item and the selected object will be the item that we click now let's add a select method we will invoke when we click in the Edit icon of an item this method will take the item as parameter and it will apply the selected and edit description aesthetic with a eaten values now let's add the event listener to the icon we now need to display an input box based on the selection we will use the be if directive that it will render the element it was selected that ID probe is in the is the same as the one from the item the value that we are going to bind here to the B model is the indeed description property that we'd created prefer to keep track of what we are headed don't forget to add the B else directive to the plane read on the pita so this will be displayed if the previous condition is false let's test if this works I don't want to write all of this selected logic every time I need to check if a item is select so let's create a method that can handle this this method will return a boolean that indicates if an item is selected or not now let's use this in our template so much better don't you think once we are in edit mode I would like to have a way to go back to read-only mode and also a way to save the changes let's add that I am using a ternary operator here if the item is selected I'm going to show the close icon otherwise it will show the Edit icon let's do the same for our click listener if they eat them is select we can unselect otherwise we will select let's now write our own select method this method does not receive any params and will only set or edit data to read the fall we are going to do the same for the trash icon if the item is selected we will show the Save icon otherwise we will show that a lid 1 the click event will also have logic if the item item is selected we will update otherwise we are going to remove it they updated item method will look like this it takes the item and the index as params we will first away for the boot operation with axis and store store the result in a constant acceleration the road would be our base URL concatenated with item that ID per the data to update the docs it takes as a second parent will be the uh knob jet with the Edit description that will keep tracking or a state once that is completed we will update our array with the updated value with the data of the spawns after that we are going to unselect so they use of leaves the edit mode let's test this out we can see that we can enter the edit mode and then leave it by clicking in the close icon if we want to update we click the Save button and Dayton leaves the edit mode let's refresh the page and we can see that our changes are pimp persist to remote database finally let's add the CSS so the icons course cursor is a pointer when we hover in and let's add an h1 tag with the title of the site now that we have everything working let's deploy or application to Heroku Heroku is a managed infrastructure platform to deploy application and this means that we don't have to setup any server manually it offers a free tire that is the one that we are going to be using before deploying we need to add some scripts to package digestion of the server these scripts will be executed when we deploy or application the Feres scripts will run our application when deploying hiroko request this start script the next one we'll build our client from the root of our app we will first need to install the dependencies of a client and then build the blue up with a bill come and perfect for the client folder this common we will run when we push our code to Herrick now the final thing that I want to do is that I want to serve or static files from the bill client so I'm going to the server that is file and here first I'm going to check if we are in production so make sure you remove this hello warm and such that we have here and I'm going to check if you are in production so we are using the note that Northern be variable and this would only be true if we are in our production server or if you change your environment by our variable so what we want to use here is we want to use the static method for an express and when what we want to serve is the dist folder that is going to be created when we build our application with Bill come with the build comment and then what I want to do here is for every every path that everyone is trying to access are going to serve send the HTML file so we are just read that same file and what we are going to send is a client list index.html file so we're making use of path and we need to import but require path at the top of our file so once we have set up everything here let's move on to Heroku and if you haven't sign up for an account yet do sign up and once you are in the dashboard we are going to create a new application so the name of the application for me would be this one is but you feel free to add then any name that you want so I'm going to create the application and we can see that we need to install the Hiroko CLI so if we go back here we have a bunch of options to install depending on a system that you are because I'm a Mac I will prefer to use pre and we also have some installers for Windows and in wanto you can use a command line once you have that let's go back to our project and open the terminal and what we want to check here is if it was installed the Roku CLI and we can see that we have this version the next step will be to log in to our account so we can run Heroku logging and this will open a browser tab that will prompt us to login so now we're logged in into our account and because Hiroko uses get to push your code to the server make sure that you have git installed in your computer so what we want to do here before initializing or get is that the busey alive by default initialize a git repository in the client so if we go to the client we can see that we have get there but we don't want to have a repository in the client we want to have a repository in the root of our project so I will make sure to remove get I'm going to remove get by romona removing the git folder so this folder was created with a CLI and this will remove get from this folder so we don't longer have it in the client so let's go back to the root and now that we click clean that up we also will need to add a git ignore file so make sure to create this file and what we want to add in this file is the dot not modules folder because we don't want to check all of this huge folder to get so once you have your git ignore file let's initialize gift in the root of the folder so we is in initialize that get here and what I want to do now is I'm going to add a stage all of our changes so we add stage all of the changes and now I'm going to commit this so we have a clean tree now and I am going now to add the hero remote with this comment so this this we will use a Heroku CLI and we can say git remote add and what we are going to add is the name of our project so this is the name that we created in Heroku so this is this is the name it will be different for us and this is the remote that we are going to add once that is added as you remember we had or URI as an environment variable so we need to have this environment variable also in Heroku for doing that I'm going to use a hero cou CLI and we can say that the hero config set URI is the name name of the variable is going to equals all of this string so make make sure that you have quotes here and let's get enter this will add the variable to the server now I want to add one more thing is because we have we need as you remember we are building our application from the root we need to install all the dependencies of the client in all of the dependent and the dependencies of the client to build our application our dev dependencies so that's why we need to set this npm config production to false so it can it can install those dependencies so I'm going to set does that config variables and now we are good to go so for pushing our code we are going to use git and we are going to pull to the hiroko or in reading the master branch so this would trigger the bill and now is installed all over the it should take a while so I would pass the video and I will go back to me okay the bill was completed and now we can open this URL that is our public URL to our application if we open this URL we can see that the app was not as successful so we have our items and we can edit and we can see that it was updated if you have reached to this part of the tutorial congratulations thanks for sticking to the end and if you enjoyed this contact please consider subscribing to the channel and like in the video this really helps to keep the content and it can also reach to more people

Channel: Esteban Codes

Views: 18,258

Rating: 4.8998075 out of 5

Keywords:

Id: vr6O-IYebXA

Length: 34min 15sec (2055 seconds)

Published: Sun Jun 07 2020