All-In-One: Build and Deploy MERN App to Heroku | Free and Easy | MERN Tutorial

hi guys it's madina from tech news with another programming tutorial and today we're going to learn how to deploy full stack merlin applications to heroku completely for free and is not even so complicated but i had some issues with deployment i tried amazon web services i tried netlify i was going to try firebase today but i got i got lucky with the solution and successfully deployed it to the office so bear with me it's gonna be a lengthy tutorial because we're gonna build a simple man app from complete scratch so you understand everything that is happening um and without further ado subscribe to my channel and let's go [Music] ah hi guys i'm so excited to see you here let me see um yeah because i'll be i've been coding all day i kind of have pain in my eyes so let's start as i said from scratch okay and first thing first first thing first let's go to our terminal city into our desktop and create a new directory which i will call just my mon app okay now cd into my learn app and here we will create our react oops yes create a react app um okay and npx create react app that we will call react dash what's up with me uh that we will call client okay i can do it without the glasses come on i'm not so old while it is creating let's open up another window oh it's much better like this now open up another window and in our root directory let's create our server file okay now we can go to our vs code and open up this new folder that we just created my morn app okay and um is empty for now let's go back to our terminal and in our roots folder we're gonna initiate the npm with all the default settings for now one two three four five six seven eight nine and ten okay and now we're gonna install some packages for this tutorial we're gonna need express mongoose body parser and the course hit enter okay all installed let's just our creature creates our how react app is created let's just go to our server.js file and start configuring the server okay as usual constant express equal required express and we have our app that will be uh using express and then we we have our body cursor that requires parser package and we have our course here i will also create a path package that will require pass and we don't need to install it but apparently it's quite useful now let's specify that app is using body parser dot json okay app dot use course okay here we will have our mongoose connect connected and here we'll have our api route and here we'll just update listen at a port with a function that will just the log that express is running and let's create our port constant here that will set to process dot env dot port or let's say i don't know six thousand okay now just to check if it's working let's send something to our express app dot get at the root route function request and respond i'm not doing it with the arrow functions because they're so confusing for me and i don't like the way they look so response dot send express is here save go back to our terminal and we can node one run server.js file okay uh localhost we set 6000 might be tempered down man why it's running what's up did we save everything that's very strange maybe let's do five thousand doesn't matter really expresses here maybe i don't know everything about force and you're not allowed to sport 6000 but i don't know what was the problem anyway let's change it to 5 000 and our express is working so what's up with our react application okay is create let's uh cd into our client i will also make it bigger oh my gosh what's happening i just want to increase the font size we are in our client and we can run npm start just to see that our react application starts uh correctly and it starts on port 3000 and here is our react app okay so now as i said it's going to be a very very simple application where we will have just the ability to extract from the mongoose data from the mongodb atlas to our react interface and we will be able to add things to our database and to delete them from the database so basically almost all the crowd operations but first let's connect our mongoose right our database here i have mongodb atlas and these are my databases i'm going to be using this movies database if you don't know how to create uh databases and clusters in mongodb i have another tutorials or tutorial on this link in the description below so as i said i'm gonna be using this movie's database as you can see currently we have just one collection movies and it has only two movies the incredible hulk and the avengers yes i'm a marvel fan and it has a few fields just title genre and year genre do i pronounce it correctly i hope so it's not my native language english anyway so let's keep that in mind and let's connect this database with our application i go back to the clusters click connect connect application copy this link and go back to our server.js file so here we specify mongoose.connect why is strange let's just uh change that mongoose dot connect and here will be our uri here i want just to change two things the db name as we said is movies db as it is called in our tv atlas and the password i'm using for my db account is this one okay so we connected our mongodb atlas now let's just create our data schema and model to be used in this application so data schema we will call it movie schema that will be just an object where we specify which fields it has it has a title that is a string it has a genre that is also a string and it has a year that is also will be also a stream okay so once again if we go to our collections and to our movies database to movies collection you see we have title genre and year so basically we are just recreating the schema here and now for our model we will use the name movie that will be a mongoose dot model and it will be referred to as movie and it will be using movie schema okay so now add our let's create our first route that will just take uh this model and extract all the movies from the database okay so let's call this route slash movies so just to avoid confusion is it means the route will that will will be accessing from the front end will be like http localhost 5000 slash movies but in order not to do to type that we're gonna just create a proxy in our client folder so in our clients folder let's go to package.json and just specify the proxy right away proxy key http localhost 5000 okay so now we can access this address from our client folder just um without typing anything here just uh by typing like this slash movies okay and here we want to send all the movies so we need to use our movie model and find all and after we find all the movies uh we have access to the movies that we just found we want to send a json a data with all these movies and now we want to extract this uh data in our front end so we go back to our client folder to our source files uh let's not change anything of the default and go straight to app.js and we will do all the code here without thinking about components and stuff i will just remove everything in between the main divs and here we will fetch the data from our backend now we have the proxy and we want to fetch the data for this we're going to import a couple of methods from react that the first one is called used state and the second one is use effects from react okay so uh i hope you're already familiar with the state so this is not a hooks tutorial so i'm gonna skip that part and let's just use a use state method to create our movies um data and our function set movies that will we will use to manipulate these data use state and the initial state will be an array of objects uh and here we will eventually receive our movies from our database so they will have also a title that will be initially empty genre that will be initially empty and here that will also be empty okay and now we can use effect to fetch this data it's not necessary i think to use effects but it's just how i used to do this here i have an anonymous function and here we can fetch data from where from our localhost blah blah blah so from our proxy and after all this we have slash movies okay and then we receive some response and we can check that if response is okay we will return this response in json format okay and after that we take this json response and we set our movies to be equal to this json response so sets movies um json response okay now let's see if it works actually let's map through the movies so supposedly supposedly our movies are now filled with the movie data from our database and we can map through them and for every mapped movie we want to return let's say just h1 okay that will contain just a movie dot name or we don't have name movie.title save it and go back to our react app and see what we have here i come on don't let me down maybe we need to restart the npm actually because we specified a new proxy let's just do that and pm start come on yay so you see we received this already from our mongodb atlas and we want also to return a div and inside this div we'll have a movie title and then we will have a paragraph with the movie dot genre and we want to have a paragraph oops what did i do with the movie dot year okay okay uh but we also want to later to do to be able to delete the movie so i'm going to return also a button that says delete okay so uh the first route is finished now let's create another route that will be like adding the movie to the database for this we will uh return a form let's call it um add movie and here we will have a form inside which will have an input actually we will have three inputs for the title uh genre and here and we will have a button that will say add movie okay i'm don't care about the styling now just to keep it as much simple as possible let's just create the functionality and deploy it okay um but we do need to specify the name and the value of each input so in this case the name will be title here we'll specify the name as genre and this will be the name of year this is required for us to be able to parse from the body request in our server in our server okay and here we'll also have um a function that's when we type something in the input we will track what we type so we track the changes it's an unchanged method on change attributes that will um have activate the function handle change and it will be the same function for every other input okay let's create this function function handle change we'll take an event and for this function i don't want to change these uh movies that i receive from the backend so let's create another state for a movie okay and set movie singular and it will not be an array so it will be just an object where we also have title that is empty initially we have genre that is initially empty and a year and now we can use this state to handle change so every time we change or as type something in the inputs it goes here so basically what we can do here this is the event and event has two let's say event has two pieces of data that we pass here it will be the name and the value okay the value in this case will be whatever we typed here and set to be equal to the movie okay so the first one will be movie.title movie dot title the second one will be movie dot genre and the third one will be movie dot year and so now here we can deconstruct our event to have a name and a value and it will be deconstructing the event.target so now we can use this name and value to set our movie um to the news to set a new state for our movie how do we do that we say set movie equal set movie singular equal to whatever is our previous input and then we want to return an object um because the movie is an object where we will have all our previous input and what is changed about this object so i'm gonna use the dynamic variable here we will set the name to value so if our name um if our our value is changing how to explain normal normal words okay it doesn't matter so anyway if you do like this it will only change the addre the key that is changing here okay we are done with that and let's also create this uh function for the button on click that will activate handle okay let's call it add movie okay and it it will not be just a function without props so we're gonna pass here the id of the movie so ah no sorry it's for delete what am i talking about add movie will just be a simple function add movie that will create here function add movie but it will also take an event and it will prevent event the false behavior let's also log something like movie added and we want to send our movie to the database for this we need axios did we install axios to remember dependencies we did not install axios so okay let's open up our terminal here cd into client and from client folder we're gonna install axios okay it's installing while it's installing let's just import it here and we can do here when we click add add movie button we take this axios method post and we specify where do we want to post so our proxy plus slash let's say new movie okay and we want to pass this new movie as a variable so we need to create this variable let's call it new mode okay and since basically here we'll create our new move arrival that will be an object with the title uh java and year and if you guess this will come from our states so our title will be movie.title etc so let's specify it here movie.title uh movie.genre and movie dot er so now we are posting to our back end this object new movie so let's go back to our why is it so red what's up what did it do wrong nothing it's perfect okay ah okay i see now should be three dots okay so now let's figure out this new movie route in our server.js file can i move myself here uh server.js file and we create a new route um this will be delete movie away sorry add the movie okay so app dot it will be a post method and add slash new movie as we said in the front and this should match basically and it will be also a function of request and response and here we we can deconstruct the object that we just sent from the front end like we can create the title that will be parsing the body request so we specify requests dot body dot title then we'll have a genre that will be request dot body dot genre i'm sure there are easier way to do this but honestly for me is much more clear what's happening when i do it like this and we'll have our year constant that will be parsing the body and take out the here attribute attribute some problems with my with my voice today anyway and from this we can create a new movie that will be using our model and when we create an a new movie we should specify new movie and this refers to our model and that will be an object with the title that comes from from here we have genre and [Music] not sure even if i spelled it correctly and here okay so when we click that button add movie we are making a post request to this route and passing this new movie and we are reconstructing this movie here and we take this new movie and we save it in our model okay so let's try that let me save it here go back to our react app and let's test it test test test add movie okay movie added but there was no alert because i didn't specify alert i specified console.log okay let's try it again uh i like also what do you like i like also x moment sci-fi i don't remember which year but uh something like this maybe movie added okay and now it's also in our database if we go to mongodb atlas and refresh we're gonna have all these movies here x-men so cool cool now let's just implement the last round delete and then we're gonna switch to deployment okay but i'm also cooking here in parallel so i will switch off also my oven one second see i'm wearing my shirt yeah i did it on um teespring so if you want to buy it there is a link in the description anyway let's figure out the axios dot delete methods here where we want to activate delete where when we press this button so on click we activate a function that will be called delete movie and this function will take an id that comes from the database and the database id is starting with a low dash yeah id and it's not just load id we need to specify that it comes from the movie property so movie dot low dash id and we cannot do in line functions like this so for it to work we need to specify the parenthesis and our function so now we can create this function here um delete movie that takes id and here we can call it whatever we want and it will do axios dot delete at which route uh at the route let's say slash delete and slash uh id because id will be like a part of url so you can do it with the backticks with with the backticks but for me it's simple just to add id here okay and we want also to alert the user that movie deletes so now this is basically all we have to do from our front end and now let's figure out this api end point in our server so remember slash delete slash plus id so in our server i create app dot delete root route and it will be slash delete slash and it will be a dynamic part of url that you specify like this with a call and etc and as usual will be a function for question response uh where we have access we can reconstruct this id is not a body request now it's a part of request parameters so we specify rec dot paragraphs dot id and now we can take our movie model again and find by d and delete where the model id equals to this id so when they match we will delete this item and then we have also access to an error function it's not i think it's not necessary but i'm just going to specify this that if there are no errors we will locom movie deleted but else we're gonna lock the error so now we finished with this route i think it should work let's test it let's delete this delete okay and this is deleting so our uh application is now complete and we have different routes now let's uh go to the boring part of deploying it okay okay so for deployment uh i will just look at my notes a bit okay first things first let's close it here oh it's working we know this let's just open up our terminal let's tap everything okay clear and first what we want to do we want to delete from our clients that the git ignore file because we will not need it we will not deploy all this node modules we will be just sending the static files when we build in production so let's delete and when we go to our terminal we are in the client folder we want to make this folder not a git repository so we specify rm rf dot git okay so now if we check the git status it should not it yes not a git repository okay cool so let's city out of here and let's create a git ignore file in our root directory so touch dot git ignore here it is and here i'll specify just node modules okay now let's create also in the same directory our proc file and in our proc file we're gonna specify web node server.js this is the name of our server file save now here we need to add a little script um that i will explain to we we have to add a little script that goes like this that's if basically if we are in production we want to use express static method okay so when we move to production we will build all our react application to into static files and basically we want our back end to use the static files instead so let's just specify that if their process dot enb dot node low dash enb is equal to production then we want to have dot use express static and it will be using the um static folders that are located in our client will be located we haven't built it yet in client build when we go to production this folder will be built when we run and pm run builds okay so and we want app dot get everything and here we'll have a function as usual request response and it will send a file and this file is index.html that is in our client folder but when we build it will be located in our client builds folder so here we can use our path package that we required here and specify path dot result and here we provide the path to our index.html static file so we specify the current directory dear name then we go to the client right then we go to the build folder and we send the file that is called index.html so basically this is all we need in this server.js file okay now let's work a bit on our scripts first of all let's go to our root directory package.json file and we'll write another script that is called um heroku pauses the gate okay just specify like this heroku dash post build oops and here we will have something like that looks kind of strange to me but we need to specify it npm config production equals false and then we want to npm install dependencies for our client and that's why we specify prefix dot client so it knows that we want these dependencies for our client side and i think this is it what else do we need let me see okay i think we are ready to deploy let's go to our terminal we are in the root folder okay so let's just check the kids stars it's not a git repository so let's initiate and check the git status okay uh let's add before adding everything let's create our heroku application because we need to change our proxy address now let's type heroku log in confirm log in now we are logged in and we can create heroku create and this we need to cop b because this will be the address of our new proxy let's go back to our client package.package.json i'm sorry i'm so tired and let's change the proxy from our local host to heroku address okay what else now um now that we have a heroku app created if we go to heroku we have all our apps here and this is a new one that we just created let's go to deploy and just follow the steps here we already logged in get get in needs and we need to add this this remote address okay what do we have here oops what do we have here let's add everything okay and commit with the message first comment okay now our status should be clean and we should be ready to push to heroku so let's just say before pushing is very important we need to build our static folder in the client side so let's go to our client cd client and we're gonna run this command npm run build i know some badass developers are making some fancy scripts for this but i tried them it didn't work for me and honestly i prefer to do it manually so okay what we have built our static folders you can see them now here in the client this folder built now we can now we can cd out of the client uh check again the git status because i think yes we need to do it again hit add to add this build folder git commit add a static client folder and if we check the status is clean now we can just push i guess so get push hero master boom and now i'm gonna pray to all my gods and then if you're successful i'm gonna end this tutorial and i'm gonna have such a nice homemade dinner it's actually quite simple just some meat and some pasta but i like it just like my mom used to do i'm not cutting any part of the video just for you to see if we are successful or not while we are waiting do you think guys wish uh that i should make some music on the background uh due during the tutorial itself because i usually do music in the intro part and the outro part but not during the tutorial so any suggestions i think would be nice but i don't want to disturb you because when i'm watching tutorials i am quite distracted by the music oh wow i'm excellent at the small talk now bill succeeded compressing i see that i see what's happening don't let me down i tell you done oh please please please it's not the end i know it's successful but sometimes it doesn't work let's just go to our heroku and open our application and if everything is working yay it's working let's just test let's delete this um xml here movie deleted okay delete it from the database and let's add another great movie um comes to mind maybe maybe maybe something like i like flash series no uh it's also i buy it and i don't remember the year so i'm gonna say 2014 at the movie movie added and tada i hope you enjoyed it and it wasn't too long uh please if you have any questions any comments i'll be so happy to help you i feel so excited to make tutorials that somebody will find useful and that somebody actually needs so write me in the comments bye bye uh so guys thank you for watching i'm so excited i was trying to publish this tutorial for quite some time now it's been over one week that i published a tutorial and if you like please give me a thumbs up and i'll see you in the next video bye

Channel: Marina Kim

Views: 5,112

Rating: 4.9327731 out of 5

Keywords: how to deploy react app on heroku, how to deploy mern app to heroku, how to deploy mern app, how to deploy mern stack, how to deploy mern to heroku, how to deploy mern project, how to deploy mern stack on heroku, deploy mern app to heroku, deploy mern, deploy mern app, deploy mern to heroku, deploy mern stack to heroku, mern stack, mern stack project, mern crud, mern tutorial, mern heroku, mern stack developer, build and deploy mern app, build mern stack app, mern crud app

Id: ouZy7s7bHjw

Length: 42min 21sec (2541 seconds)

Published: Thu Nov 19 2020