Full Stack Vue.js, Express & MongoDB [3] - Prepare & Deploy

alright guys so up to this point we have a view front-end that we generated with view CLI it's inside the client folder we also have an express back-end in the server folder and we have them working together so we can add posts we can remove them and so on now we want to get it prepared for deployment we want to be able to build out our static assets from our development environment our dev server and put it into the public folder of the server and then push to Heroku alright so first up in doing so is going into our client folder and we want to create a special file called view config j/s and we want to put that right in the root ok not in the source but in the root so new file let's say view dot config dot J s alright now if we look at our post service that we created which is right here we're making all of our requests to localhost 5000 when we deploy to Heroku we don't want to do that we're not gonna have a separate back-end server with a front-end and it's different than our development environment so I want to be able to just make this two slash API slash posts ok just so I actually would take off the slash so API slash post like that so I'm gonna save this now if I go to our application and reload we're gonna get a 404 error because it doesn't know what the hell that that is there's no you know it doesn't know where to look so to fix that we're gonna go into our config that I just created and inside here I'm gonna just bring in the path module from just a standard and node module and require just to manipulate file paths and stuff like that so require path and then we need to module dot exports an object with different configuration options so we want to say dev server and then we want to set up a proxy okay and if you're if you've done this and react it's similar to in react you would go to your package Jason and you'd add a proxy value and then put whatever local holds 5000 or whatever port you're using so what I want to do here is say for anything that is slash API then I want to add a proxy for localhost 5,000 so target HTTP and then local host port 5,000 okay so let's save this and now if we go back let's actually reload the server just stop the view server here and the client and run it again let's go back and there we go so now we don't have to actually specify localhost 5,000 here it's gonna create a proxy for us so that's the first step now the next step is our build process when we do npm run build with view j is what typically happens is it creates a folder called dist inside your whatever your application is your in our case it would be in the client now we want to change that we don't want it to we don't even want it to be called dist we wanted to be call called public and we also wanted to go in the server folder so that our Express server can use that as its static folder okay hopefully that makes sense so to do that we actually edit this file so I'm going to put another value here of output der okay so output directory I'm going to use the path module I'm just going to say path resolve and the current directory so double underscore dur name and where I want this to be created is going to be in that server folder so we need to go outside of the client folder so dot dot slash will bring us out into server and then into a folder called public okay so that will change that and we just need to add a comma here so let's save that and now when we when we build out our assets it should go in the server folder and that's what we deploy to Heroku so you see we don't need any of this client stuff to be deployed to Heroku alright let's see I think that's all I want to do you mean yes oh I you know what I wanted to do is change the page title because right now it's just client let's actually change that to I don't know full stack view and Express I'll just say like I don't know micro posts not macro posts whatever you want to put is fine all right so we'll save that so now let's go ahead and try our build okay and again it should go into server public so I'm gonna go ahead and stop our client-side server here stop that and let's do NPM run build okay so building for production and normally it would put it in a dist folder in your view app but since we added that configuration now if you look in our server we have a public folder and that is our static those are our static assets for our view application so that's exactly what we want now before we even attempt to deploy there's there's another thing we need to do inside of our server index.jsp cuz right now it doesn't know it doesn't know to look to that that public folder and then we also need to be able to handle a single page application all right because in if we're not using a front-end framework if we go to like I don't know test.com slash hello what it's going to do is it's going to look for an actual file or fold called hello but when we use react or view or angular any any kind of single page application that we build the routing system and we're by the way we're not using any separate routes to this I mean we wouldn't technically have to do this for for our application but if you were to create any kind of routes in a single page application you'd want to do this on your back-end so that it handles this correctly and it just directs it to the index.html instead of looking for the actual hello folder or file that doesn't actually exist so those two things we need to add and we only want this done in production so what I'm gonna do is go right below here right above where we create the port and let's just say handle production so we just want to test to see if we're actually in production and we can do that by saying if process dot env if our environment dot node underscore env so if our node environment is equal to production and as soon as we deploy to Heroku this is true then we want to set our static folder by saying app dot use and then we say express dot static and we want the current directory so double underscored our name and let's just actually we'll just concatenate we could use the path module but I'm just going to just say the current directory and then slash public like that so it's gonna look at that folder as our static folder and then to handle the single page application what we want to do is say apt-get okay so for any routes basically we want to say for any route so I'm going to put an expression in here by doing double slash and then dot asterisk so what this is going to do is it's gonna if it's going to refer to any route at all wait a minute what's going on here oh all right so it's gonna refer to any route at all but it's very important that you put this below up here because you don't want when we hit API slash post that's an actual route that we want to hit we don't want to just direct it to index.html so we're gonna go ahead and add to this a function with request response just like we would any other route and we just want to basically send it to the index.html so we can say res dot send file and pass in double underscore dur name and let's just concatenate on just like we did above except we want to send it to public slash index dot HTML which is right here if we look in our public folder in our static assets for our view app we have an index.html so that's basically what we want to load all right so now what I'm going to do is go my view server my view dev server is stopped I'm going to go back to my back-end server which is still running and I'm gonna go ahead and stop that and this is I'm currently in the root you can see the server and client folders so now I just want to do a get a doll and get commit you can do these in separate commands if you want I just think this is a little quicker and let's say let's say added static folder and prepared SP a I guess I don't know it doesn't really matter we just want to make sure we have an updated commit all right so now our as far as git goes we're ready to push to Heroku but we need to get that set up now I actually I think on this machine I should have Heroku installed let me just say Heroku version yeah so I haven't installed but if you don't what you'll need to do first of all create a whoreo kakaw if you don't have one okay so so you go to Heroku comm if you don't have an account just create one it's free and then you need to install Heroku so let's say Heroku install so this will show you what to do if you're on Windows you know you can download the Installer mac OS download the install or a bun too you can do sudo snap install classic Heroku just go through it's pretty simple pretty self-explanatory and then once you do that you need to login okay so let's see I don't know if I'm logged in or not I'm gonna say Heroku I don't think I am so Oroku login so let's see that's the account that I want to use and then my password I think that's it yep so now I'm logged in to Heroku through my CLI and I want to now do Heroku create okay so that will actually create a Heroku app now if we were to go to this and we can actually do that by saying Heroku open it's just going to be the standard welcome page there's a couple steps that we need to do to push our application to to this to the server or what do they call them the hell they call them dinos or something but we want to now go to our Heroku panel and reload and you'll see something that got at it there was a vast earth right that's the one that was added so vaster if it'll give it a crazy name like this and we want to go into that and we can see like our analytics and stuff but we want to go to deploy and go down here so we've already logged in I've already done all my get stuff and committed and all that everything's ready to go but we need to add this remote repository so I'm going to grab this right here this get remote and add this or run this command so let's go down here I'll clear that out and paste that in okay so we'll run that it looks like I do have an older version of Heroku but it should be fine so now it's now that we've added that we've already I already have everything in my local repository if I do a git status you'll see nothing to commit everything is ready to go so I simply want to do a git push a rope to Heroku to the master branch and that should push everything except for our client folder because we put that in the get ignore and except for any node modules folders it's gonna build that stuff on its own that's why I love about Heroku it makes it makes deploying node apps very very easy all right so let's let's wish for luck here and let's do Heroku open and there it is we're now deployed okay so let's test it out this is post 3 ok it gets added I can double click and delete if I go to slash API slash posts everything is there so we're now completely deployed we're using the same database the same em lab database a lot of times you could create a file for that holds your local database you know for your development and then your production database you might want to have two separate ones but yes so that's it guys hopefully you enjoyed this and hopefully it made some sense I will put a link to the repository posite or e the github repository will include the client file you just don't want to push that to Heroku ok but that's it thanks for watching and I'll see you next time

Channel: Traversy Media

Views: 69,235

Rating: 4.9597855 out of 5

Keywords: vue, heroku, vue.js deploy, vue host, node.js deploy

Id: W-b9KGwVECs

Length: 15min 15sec (915 seconds)

Published: Mon Oct 08 2018