By Gary simon - Nov 05, 2017
The following tutorial is a part of our 100% free course Learn Angular 5 from Scratch - Angular 5 Tutorial
We've created a very simple Angular 5 app to this point, and now we want to build and deploy it. The first step involves using the Angular CLI to create a production build, and the next step depends on the app and your needs.
Let's get started..
Be sure to Subscribe to the Official Coursetro Youtube Channel for more videos.
As mentioned, we need to use the Angular CLI to create a build of our app. Hop into the console within the project folder and run the following command:
$ ng build
This will take 5-20 seconds to run. The end result is a new folder called /dist within the project root folder.
I ran this command on the project we've been creating, and these are the actual sizes of the files produced:
5.83 kB 22.8 kB 200 kB 12.1 kB 3.26 MB
Wow, our app is nearly 3.5mb! That would take forever to load. It's really large because we didn't specify the --prod flag, which is short for production.
Run this command in the console:
$ ng build --prod
These are the new file sizes:
1 kB 2 kB 355 kB 60 kB 1 kB
Yep, nearly a 90% reduction in file size. This is because the --prod flag enables a number of optimizations that drastically reduces the size of the project.
You need to ensure that you add this flag whenever you're deploying your Angular 5 app.
At this point, if your app does not rely on any type of backend server (as in our case), you have a number of options.
You could take the files in the /dist folder and upload them to a server. Just note, if you're uploading them to a sub folder, you will need to run the following build command:
$ ng build --prod --base-href="myURL"
The --base-href flag will allow you to designate the correct URL for the app to load.
You could also use a nifty node package to deploy your app to github pages.
If you don't have an account at Github, go ahead and create one.
Then, create a new repository for your project.
Next, in the console, run the following command:
$ npm i -g angular-cli-ghpages
This will install a CLI tool globally.
You will also need Git, you can download it here.
Because we're going to push our Angular 5 project to a subfolder via Github pages, we need to rebuild it with the --base-href flag:
$ ng build --prod --base-href="https://YOURUSERNAME.github.io/REPO-NAME/"
Next, run these commands to setup our project folder push to the new repo:
$ git add . $ git commit -m "first commit" $ git remote add origin firstname.lastname@example.org:yourinfo/yourgit.git $ git push -u origin master
Then, finally, we can use the Github-pages CLI to push our project to github-pages:
If all goes well, it will respond with Successfully Published!
You can now visit the YOURUSERNAME.github.io/REPO-NAME/ address and the app should load.
You may be interested in deploying your Angular 5 app to Heroku, Azure, AWS, etc..
Check out these resources if this is the case:
I hope you found this tutorial useful, and this marks the very end of the course!