Angular 5 Deployment - Deploy your Angular App

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..

If you prefer watching a video instead..

Be sure to Subscribe to the Official Coursetro Youtube Channel for more videos.

Creating a Build

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.

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.

Deploying 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 git@github.com:yourinfo/yourgit.git
$ git push -u origin master

Then, finally, we can use the Github-pages CLI to push our project to github-pages:

$ angular-cli-ghpages

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.

Other Deployment Options

You may be interested in deploying your Angular 5 app to Heroku, Azure, AWS, etc.. 

Check out these resources if this is the case:

• Deploying to Heroku
• Deploying to Azure
• Deploying to AWS

Conclusion

I hope you found this tutorial useful, and this marks the very end of the course!