Deploy a Full Stack App - React, Node.js, Express, Mongo | MERN Tutorial

our myrn stack project is ready to deploy [Music] hello and welcome I'm Dave today we will deploy both the front end and back end code for our myrn stack project I'll provide links to example source code and all resources in the description below our mertonstack project is essentially complete and we're ready to deploy both the front end and back-end code repositories there's just a few setting changes that we need to make first and we're going to start in the front end code base and that is from Lesson 12 at least our starter code so let's just change to lesson 13 here in the package Json and we can save that change but we need to add one more dependency and I know you think this is fairly late in the game to do that but you'll see why we're doing this one let's type npm I and then we need the at symbol and then F vilers slash disable Dash react Dash Dev tools and this dependency will do exactly what the name says we're going to disable react Dev tools for our deployment okay now that we have added that and I'll close the terminal you can see we've got that new dependency right here now we're going to apply that in the index.js so let's open up the source directory and go to the index.js file I'll get rid of this extra line we have here between the Imports I'm going to add this extra import here this is import and then it is disable react Dev tools and you can see it comes from at F biller slash disable react Dev tools once we have that we can put it into place it doesn't go inside of the render it can actually go above we'll type if process.e and B dot node EnV and then we'll say equals with three equal signs production so this only happens in production mode then we will disable react Dev tools so we just call that right there and that's all we need to do to implement that but this will disable reactive Tools in our production mode when we we have deployed our application so now to go with that change let's go to the app directory and then we'll go to the store.js and this is for Redux and notice we have Dev tools set to True here let's just change that to false inside of our store.js and now this disables Redux Dev tools and finally let's go inside the API directory to the API slice and we need to change our base URL value you can see we still have it set to localhost Port 3500 well this is going to be https now and we're going to host our application on render.com and I can already just put in what the API address will be so we're going to call it Tech notes Dash API and then it will be at Dot onrender.com and after that change we are ready to deploy the first step in deploying our code will be ensuring that it is on GitHub and we need to do that with Git so we're going to initialize a repository if you already have a code repository by the way with Git and GitHub that you're doing with this project you could skip this part but I'm going to quickly show how I push the code to GitHub so we'll have get a knit and after we initialize a repository I'm just going to add all of the code with Git add and a period or dot we've added all the code now so let's Commit This so we'll say git commit and dash M for message and we'll just say ready to deploy and after that we need to have a repository on GitHub to push our code to so let's go to GitHub let's create a new Repository and we'll just call this repository Tech notes and we'll scroll down and click create repository after that we get a page that tells us what we need to do to push the code and we have an existing repository on our computer so we can do this from the command line we need these three lines I can just click the little icon over here to copy all three we can go back to vs code now and in vs code I'm going to expand this so we can see more of the terminal and if I right click it will paste all three in and I'll just press enter and we are pushing our code to GitHub and it should now be there so we can go back to GitHub and I'll scroll up and I'll click on Tech notes and here's our code so it is now in my GitHub account and then I can go to render.com and that's where we're going to deploy our code and now what I need to do is create an account if I don't have one now I already have so I have a dashboard link here that's just ready to go but you need to create a free account it does not ask for any payment information and that's one thing I like about this for students you can just set up a free account without having to provide a credit card or anything like that and after you do you may have to confirm your email address you may want to pause the video and do all of that to get your account set up but then you should have access to a dashboard so I click dashboard and I don't have anything deployed here yet so now I have options static sites and web services we're going to do one of each today our react app is a static site so I'm going to click new static site and it says connect to repository so one thing you'll do when you set up your account is connect your render.com account to GitHub and you can see mine's already connected over here so you want to make sure you do that after you connect GitHub to render and you could probably log in with that if I remember right but double check that either way once you have your GitHub connected you can see your repositories here and you can see Tech notes from my GitHub account is right here so I just want to click connect now I'm connecting the repository and now I need to put in a name here and so I'm going to do the same thing I'll call it Tech notes and then it has a few other questions I'm using the main branch of my code repository now here's where we need to put in the build command and render.com defaults to yarn if you use yarn you're probably already set up but since I'm using npm there's a change or two we need to make here so instead of yarn build it's going to be npm run build and that goes along with the scripts in our package Json and after that it says the publish directory well that is the build directory for a react app I believe so we can just leave that where it is and we're pretty much ready to go I'll scroll down and we click create static site now this will start to show us how it builds the site and this takes just a little while so once it gets going it shows in progress here and you can watch everything that's happening here on the server and this will take a while so what I'm going to do is go ahead and jump to the end but you can set and watch the entire thing for your application if you want to okay I'm back and you can see it says your site is live and it did take a few minutes compared to where we were and that's okay even after it says your site is live you might give it just a little bit of time and that's fine but let's scroll the window back up and it gives us our URL right here which is Tech notes Dot onrender.com and we can copy it or I could just right click and open in a new tab once we do that we've got our Dandy repairs web page and the whole app is not going to work just the public pages will for now we haven't even deployed the back end so we can see this we can go to the login at least look at the page so it is deployed it's just not going to work yet now we need to make a few settings changes to the back end code and deploy it now I've got the back end code base open and I'm of course I have The Lesson 12 code once again so let's just change this to lesson 13 and save that file but now let's jump to our allowed Origins and if I remember right that's in the config directory and there we go aloud origins.js we want to make some changes here now if Dan D our stakeholder had a URL like the dndrepairshop.com of course that's what we would use and it would probably have the three W's and then not have the three W's as well so we would want to provide both of those if it was available both ways however that's not what we have today what we have was our Tech notes then dot onrender.com so we'll go ahead and remove the Dandy repair shop URL and we can also remove localhost we do not want anybody else to be able to access this application from The Local Host Dev environment on their computer so we'll also save that now our allowed Origins is really just one origin for this deployment after that let's look at the core's options and this is a decision that needs to be made here and do you want to leave the origin in or essentially if it does not have an origin is what I should say if do you want to leave that in or not because that will leave it accessible to an application like Postman something that's running from the desktop that does not have an origin URL so you need to make that decision whether you want that in there or not for today for me I'm just going to leave this in here but you might want to remove it for a deployment especially if you were doing this for for a customer okay after that the only other thing I want to highlight is we do have the dot EnV file that should not be pushed to GitHub you do never you never want to share your environment variables on GitHub so that should be listed in your git ignore file dot EnV should definitely be in a DOT get ignore file before we do anything about pushing the code to GitHub okay now that I've gone over that let's go ahead and open up a terminal window again and I'm going to initialize a git repository so get the knit and once we have that initialized I'll get add and Dot just to add all of the code and then git commit Dash M and here I'm going to say ready to deploy back end and now that I've committed all of the code we're ready to go back to GitHub in our browser so let's do that and we're here at the tech notes repository now let's create another new repository for the backend code so I can go to my repositories and there it has the new Button as well so I'll create a new one and I'm going to call this Tech notes Dash API and now that that repository name is available we'll scroll down and create that repository it shouldn't take long we once again get the code that we need to run from the command line to push our code to GitHub so I'm going to copy that go back to vs code and NBS code I'm going to expand the terminal just so I can see everything and when I right click puts all three lines here inside of the terminal I just need to press enter once and it's going to push my code to GitHub and it should be complete we'll go back to Chrome and let's see if we have the code inside of GitHub now at the tech notes Dash API there it is and now we should be able to find it inside of our render.com account when we click new so let's click new and now this will be a web service this is going to be a node.js rest API and you can see we have Tech notes Dash API available right here so we will connect and now let's provide a name here and I will just say Tech notes Dash API as well looks like the node environment that seems fine your region may be different than mine the branch will be Main and now we have a build command to put in and for our node project here this will be npm install so this will install all of the dependencies that that are needed and then we have a script here and instead of saying node server.js we can just say npm start because we have the start script in our package Json from there let's scroll down and you can see it has the current free plan highlighted and that's exactly what we want so let's just create a web service once we do this we'll be able to enter in our environment variables and so as this deploys we can see it's in progress let's click environment over here and we can add environment variables you could also browse to your dot EnV file and they will accept it that way but I'm going to add them over here and there's one extra one that we need to add and that is the node version that we want to use so I'm going to say node underscore version here I'm going to put 16.16.0 because that's the one we're using after that we need to go ahead and paste in the other environment variables we have and that includes the database URI that also includes the access token secret so I'll bring that over and then we can add one more and that is going to be the refresh token secret now I will go ahead and cut away to enter my values so you don't see those and you can enter your values and come back okay my values are now entered and I want to click save changes and so those changes have now been saved let's look at the events tab here and you can see the deployment is changed because the environment was updated so this is the deploy we want to watch right here so I'll click deploy once again this takes a while this takes longer than the react app on the front end so we'll just want to watch this and of course you can watch the entire thing I'm going to cut away and come back okay I am back and it has completed and we can see the last few messages and that did take several minutes it says build successful but even after that it was deploying and then it detected the node version that we put in with the environment variable and it started the service within PM start and then we start to see things that we would normally see in the console as well so let's scroll back up and let's look at the log which would be the console for node.js and you can see the last several messages were also logged here in this console okay now that we've got that you still might want to give it a minute or two after it says it is up and running to go ahead and propagate out everywhere but then we could go ahead and right click and we should see our splash page that we created if we launch this and right now we still don't have the CSS and if I reload there we go we've got the CSS now so it was just getting ready to share everything I don't like that full white page I like the darker page myself okay so now we know our Tech notes API is up and running and that means our front end should now be ready to interact with mongodb and the back end that we have so let's hit the employee log again and we'll go ahead and enter in Dan D our stakeholder and I'll enter in his password if you have a different user you can do that and I'm going to tab on down and say trust this device as well and then sign in we've got our spinner I Want to Say Never As far as saving the password for this but everything looks like it's working as it should let's see if we can see the tech notes we got those right away because we prefetched that data we didn't even have to see a spinner to wait that's great now we can see the edit note it seems to be working fine so let's go back to the user list you can see Dave is inactive on the user list and it has a different color rather than active and everything seems to be working good here as well we went to that edit user page already so that's great we could of course enter in a new note or try a new user all of those things but we've tested that out already we won't spend time on that during the video everything seems to be good for the application and it's nice and fast I'm going to go ahead and log out make sure that works too everything is good here and with the deployment in place we can bring up our user stories I'm keeping track of this back in the front end code repository by the way and we have officially replaced the current sticky note system and of course we'd want to confirm that with our stakeholder we did provide easy navigation and we had display current user in assigned role that was in place for a little while already we had notes can be deleted by managers or admins and that was definitely true we saw the trash can there available for DND anyone can create a note and we had confirmed that with the employee account Joe that we created employees can only View and edit their assigned notes that was true for Joe as well but managers and admins can view edit delete do everything they should with the notes and that is also true only managers and admins can see the user settings so we could check that off only managers and admins can create new users we can check that off and desktop mode is most important and that's essentially what we looked at with full screen but it should be available in mobile let's go into Chrome and we've got the web app open I'll open up Dev tools and I need to click away yeah Chrome has been a little buggy for me lately on the dev tools I don't think that's anything to do with our app here we see it in an iPhone 6 7 and 8 and now let's go ahead and look at maybe an iPad if it fits in there yes it looks great there too let's check maybe just an iPhone 6 and of course the smallest would even be an SE it looks like everything's fitting let's give one that's decent sized here let's get to 75 percent maybe and then let's try the login oh once again I'll log in as Mark the manager sign in we've got a little bit of a wait and now we're logged in and we can view the tech notes and of course we don't see as many columns on the smaller Mobile screen after that we can view yes we can edit the note let's go to users the same here everything looks good there's our test user yes everything is working and looking good in Mobile I think success so we can go back and check off our last item you might have noticed that I'm getting some console log messages as we run the app and of course when you deploy you probably want to go through your code and remove all of those I did not do that and that's just because it's tutorial mode I leave a lot of those things in there to help out viewers and students but you probably would want to remove all of the console log statements and notes like that before you deploy your application as well hey success we have checked off all the user stories and our app is functioning for for our stakeholder that's great now what happens usually after you deploy an app and you meet all of those expectations or hopefully do they will want additional features now don't just say okay and do those of course that's scope creep that makes the project continue to go on especially if you're a freelance developer you've given your bid and you have met every expectation along the way so you need to charge for those additional Services don't sell yourself short and a couple of things I could think of that might be wanted one would be an archive for old tickets so that ticket list did not continue to grow and grow and you might want to be able to search that archive as well they might eventually want this to tie into some Financial or billing software where they could bill each ticket directly from this application and then also they might want to save drafts of notes as they edit a note say their token expires it's been a week and they forgot to log back in during that week well they'll get a notice they won't be able to save that draft so that's something else I would suggest and you may think of many more things that you could add to this application again just remember to don't say okay and just add the extra features without charging more don't sell yourself short on your effort congratulations though you have completed the myrn stack project remember to keep striving for Progress over Perfection and a little progress every day will go a very long way please give this video a like if it's helped you and thank you for watching and subscribing you're helping my channel grow have a great day and let's write more code together very soon

Channel: Dave Gray

Views: 96,324

Keywords: deploy a full stack app, how to deploy a full stack application, build and deploy a full stack react app, how to deploy a full stack aplication, build, deploy, deployment, fullstack app, deploy a fullstack app, how to deploy a fullstack app, mern, mern stack, mern stack app, mern stack project, mern stack tutorial, mern tutorial, mern app tutorial, deploy tutorial, react deploy, react deployment, node deploy, node deployment, react, node, node.js, react.js, nodejs, reactjs, js, mern tut

Id: l134cBAJCuc

Length: 20min 49sec (1249 seconds)

Published: Fri Sep 09 2022