Deploy Angular CLI App to Heroku

everyone was here I had a request recently from a viewer asking about how to deploy an angular application to Heroku and while the process is relatively simple it can be a little bit tricky to get set up so that everything builds correctly so in this video we're going to look at how to deploy an angular application filled with the angular CLI to Heroku so let's take a look okay so the first thing you want to do is to head over to Heroku comm and if you're not familiar with Heroku it is a cloud platform as a service and it's going to make it very straightforward for us to deploy our code to web and it supports more than just a node back end supports Python and Ruby which I believe was the original language that Heroku supported go closure Java just a variety of other languages and so it allows us as developers to kind of just focus on the code and not worry so much about some of the DevOps type problems that might arise in attempting to deploy a web application to a server that we might have to set up manually Hiroki is just going to take care of that build and deploy step for us and it's going to be as simple as pushing our code to a repository hosted by Heroku so go ahead and sign up if you don't have an account it is free to sign up and it will be free also to push your code to a free tier Dino that you can run on so so here you'll be able to see other applications that you've pushed to Heroku and if you haven't pushed or hit a particular application after a certain amount of time the Dino that it's all well and so you can see that with the sort of faded icon here with the threesies meaning that this is an application I pushed up a few weeks ago and haven't touched it since so the Dino that it's running on is is sleeping for now so what we'll do is click new and we're going to create a new app and you can name it or Heroku we'll give it a name we'll just allow Heroku to name it in this case and then you're gonna want to choose your runtime selection whether or not you're in the US or closer to the US or Europe and then we'll create an application and so it's going to give it a name here usually it's going to be like an adjective noun followed by some numbers then what we're gonna do is we'll go down here and select our deployment method and we're going to use haruka get you can actually deploy by pushing directly to a github repository or to Dropbox we're gonna look at how to do it directly using the Heroku CLI so if you don't have the roku CLI the next step is to of course install it so there's a link here and depending on what your operating system is there's going to be a few different ways to install it if you're on iOS looks like you can use homebrew there's particular tutorials on Windows so we're going to use the just the Windows installer and if you're on abouttwo and you can W get the script here and the install script I found it pretty easy to deploy on Ubuntu and maybe a little bit more difficult to deploy on Windows just because you're going to want to make sure you have Ruby installed on Windows which will take a few extra steps so go ahead and download the Heroku CLI and if you have a terminal window open that you're working in you're just going to want to make sure you restart that after you install the Heroku CEO lies so that we can run Heroku commands okay so let's head back over to our app page and Heroku actually just displays the instructions on how to deploy your application here so it's really just a few steps however we are going to need to configure our angular application so that a few things happen when our code gets pushed to Heroku so let's take care of that step first so you'll need to open up the directory that your angular application lives in and then in the root directory you'll notice that there should be a package.json file so this file actually just defines all the dependencies that our application needs to have installed in order to run so if you look you'll see a section for dependencies and some things in there and then you'll also see a section for dev dependencies and some more packages in there so Heroku is actually going to install everything it sees in our dependencies section here so we actually need to move a few things out of our dev dependencies and put them up into our dependencies and so I'm going to take the angular CLI and angular compiler CLI out of dev dependencies and I'm just going to move them up into our normal dependencies here and I'm also going to move the typescript dependency out of dev and up into normal dependencies here yeah we'll just make sure the commas are in the right place okay all right the next section we're going to look for is the list of scripts and so you'll see a section called scripts and when we push our code to Heroku it's going to look here to see if we have any pre install which look like this or post install scripts to look like this and so these will obviously just get run either before or after our dependencies are installed so in our case we want to worry about what happens after our dependence dependencies are installed and we're gonna run ng build a ot and then the target equal to production okay so just looking through this command that is going to get run after our dependencies are installed so ng we're going to use the angular CLI to build our project and so if you recall the ng build command just creates a compile then built version of our application in a dist folder which can then get served up in the browser and äôt stands for ahead of time and that defines the type of compilation that the application like how the application will be compiled so this is distinct from just-in-time compilation in short it's going to allow for just a faster application and so yeah the compiler is going to run once at Build time we'll just go ahead in and use ahead of time compilation here and then we set our target to production okay so the next thing that we're going to do is we're just head down to near the bottom of this file and then I'm going to add another section here called engines and in here we're going to specify the node and the NPM versions that we used to build our application okay this is useful because it will let us sort of like prevent any kind of version issues that we might have so pirozhkis gonna look here and it's going to explicitly install whatever version of node and NPM we specify if you're unsure of what versions you are running just head over to the command line here and you can just type in for node you can type in node - B and you'll see that and then for NPM the same applies as well okay great so we just have one more step before we are ready to deploy our angular application to Heroku we need to create a small node server that we can use to serve up the compiled files that are in our district tree and for that we'll use Express which is a very lightweight node web framework so make sure that you're inside of your angular application directory and then we need to NPM install Save Express and note that this is actually also going to add Express to our list of dependencies in our package that JSON file that we were just editing so let's go take a look at that file in our editor and if you reload it you should see that Express shows up here in our list of dependencies okay so let's go ahead and create our Express server so for that I'm just going to actually open up a new tab here and we're gonna call this file server j/s and so that should exist in the root directory of your angular application and this is gonna be a pretty small file but let's look at what we're gonna do here so first we're gonna require Express okay then we're going to create another constant called app and we'll set that to Express and now we're gonna tell Express to serve up the the set of static files that are created when our dist directory gets created when the app is built so we'll say happy use Express that static and then we need to point it to the dist folder so the static function takes as its argument a path and this double underscore dur name is just a node variable which is going to return the path to the current directory and the second part of this is the dist folder which contains all of our static files okay and then we want to make sure that we start the application by listening on whatever the Heroku port is so we'll have that listen process you need a port or 8080 okay then there is the next part of this server which is a little bit more complex but it has to do with something called path location strategy which is something that angular applications used for routing anyway so in order to set up our server properly we're going to define a constant tab and we'll require and then we're going to say app dot get going to walk them in a wild card here that's in file joy and so this little bit of code is essentially going to allow angular to handle our routing instead of the server so when we type in some sub route of our application we're going to always make sure that our index that HTML file gets served for any other route that gets typed into the address bar so when a get request is made for any of our sub writes we we want to make sure that angular is the thing handling the routing and not this and not the server okay the last thing that I'm gonna do here is just write some output to the console here you could change this to specify guest listing on whatever port that you're gonna be listening on any case I just want to write a little bit of feedback letting us know that the server is running otherwise it will just run silently which could be fine too now with our server built we actually need to tell Heroku to run this file when the application starts otherwise it won't serve up anything so we need to add that one final thing to our package JSON so look for start in our start scripts and instead of ng serve we're going to say a node server ojs okay so back at the command line here if you don't already have a git repository initialized here you're gonna want to do that and you can do that just with get in it and so that will initialize a new git repo here and then the next thing to do is to log in to Heroku so if you've installed the Heroku CLI successfully you should be able to type in Heroku the log in and then here we'll just type in your email address and password okay so now I'm logged in and then we simply type in Heroku get remote Hey and then the name of whatever the application was when you created the new app at Heroku and then just as you would any other git repository we're gonna add so get add and then get commit and we'll say initial okay yep and something to note here which you probably wouldn't want to do if this were a real application is you probably wouldn't in general want to commit a bunch of your static assets like images and things into source control instead you'd want to rewrite the parts of your application that are serving these up and have them get served from like AWS or some other resource and then the command is just get push Heroku master okay and you'll see this start to build you can see that Heroku has detected that it is a node app so that's pretty cool and it installs the particular node in NPM binaries that we specified and then it's actually going to build our dependencies and install all of the node modules that are in our package dot JSON file okay once that's complete and everything's downloaded it's going to run our build so ng build ahead of time target production as we specified you'll see that build has succeeded you'll see that it gets launched and yeah everything gets deployed we can hit our application now at this URL so now that it's deployed let's go take a look so now your application is no longer running on localhost but should be running on Heroku so this is actually live on the web and you can see that everything works as expected so as I mentioned before you may want to consider if you're serving up images rather than putting them in version control actually rewriting your application particularly if it's this gallery application to serve the images from somewhere else that you might have them hosted like AWS or elsewhere anyway yeah so it's really as simple as that so you know you just need to take care of those few extra steps of writing the small note server in express making sure your package dot JSON file has the correct dependencies that it starts the server that you created and that it properly builds your angular project after all the dependencies have been installed and then it's really just as simple as pushing that to Heroku one thing I would highly recommend as a next step that you look into if this is going to be anything more than a very small application like this is to make sure that the application runs over HTTP if you head over to dev center Heroku comm slash articles slash SSL Heroku actually has a really good article about how to get set up using SSL here and just a few more lines of code in our Express server to force any requests coming in over HTTP to get redirected to HTTPS but yeah that's something that once you kind of get everything set up should be relatively straightforward if anyone is particularly interested in seeing a video of setting up SSL for the Heroku app I'd be more than happy to make a video for that let me know how it goes for you hopefully you guys don't have any trouble deploying your angular application to Heroku and now that it's on web it will be really easy to of course visit from anywhere and share with your friends and family and it's also a great way to kind of show off your work as part of a development portfolio for example so if you enjoyed this video I'd appreciate it if you subscribe and be sure to let me know if there are other topics that you're interested in learning about alright guys catch you next time

Channel: Wes Doyle

Views: 29,650

Keywords: deploy angular app, deploy angular heroku, heroku, node js, deploy node heroku, heroku tutorial, angular 4 tutorial, angular tutorial, deploy to heroku, heroku angular cli

Id: 0bOJjAUXjhI

Length: 17min 2sec (1022 seconds)

Published: Fri Jun 16 2017