How to Deploy an Angular App (Angular 4)

If you're new to Angular, you might be a little confused about how to take your app from your development environment to a live environment on a different server that users can actually use.

The process is fairly straightforward, so let's get started.

If you prefer watching a video tutorial..

Be sure to subscribe to the Coursetro youtube channel for more awesome videos.

Prerequisites

Being that this particular tutorial is a part of our Free Angular 4 Course, I'll assume that you already have a project created with the Angular CLI. 

The Angular CLI allows you to run a command that creates a build for production, which we will be using.

Creating a Production Build

One of the tremendous benefits of the Angular CLI is the ability to create a production build of your app, along with AOT (Ahead of Time) compilation.

In the end, the ultimate goal is to create an app that is as small as possible in file size. So, to demonstrate this, let's run the following command in the console within an Angular project setup to work with the CLI:

> ng build

When you run the ng build command, it creates a /dist folder. Here are the files and their associated sizes after running the above command.

Note: Your file sizes will vary based on your project.

vendor.bundle.js              2.2 MB
polyfills.bundle.js           163 KB
main.bundle.js                13  KB
inline.bundle.js              6   KB
styles.bundle.js              10  KB

As you can see, we have a massive vendor.bundle.js file, because when you run ng build without specifying the production environment, it doesn't make use of uglifying and tree-shaking.

Let's re-run the ng build command, but specify the --prod flag (for production):

> ng build --prod

Now let's look at the files and their associated sizes:

vendor.bundle.js              352 KB    // Reduced from 2.2 MB
polyfills.bundle.js           57  KB    // Reduced from 163 KB
main.bundle.js                12  KB    // Reduced from 13  KB
inline.bundle.js              2   KB    // Reduced from 6   KB
styles.bundle.js              0   KB    // Reduced from 10  KB

So, adding the production flag reduced the bundle from around 2.4 MB to 423 KB, which is nearly an 83% reduction.

How does it do this? Well, a number of things are occurring when you add the --prod flag:

• Removes unwanted white space by minifying files.
• Uglifies files by renaming functions and variable names.
• AoT compilation, which removes the compilation process at runtime and instead performs compilation during the build process.

All of these things drastically reduce the file size of your Angular app, thus decreases load times.

Something important: You may have heard of AoT (Ahead of Time Compilation). As of March 1, 2017, when you specify the --prod flag as we did above, it automatically includes AoT. Previously, you had to explicitly specify an --aot flag.

Deploying your build

Now that your app is ready to go in the /dist folder, what do we do to show it to the world?  Well, you have several options.

If your app does not contain a backend, you can simply take the contents of the /dist folder and upload them to your site. The app will work if you're uploading it to the root public folder, such as mysite.com, but if it's within a sub folder such as mysite.com/whatever, you can specify the --base-href flag during the build process based on the folder structure of where the app will be placed.

Outside of uploading the files via FTP, you can quickly deploy your app to GitHub Pages using angular-cli-ghpages. 

The ability to deploy to GH Pages was previously a part of the Angular CLI, but it has been recently removed. It's now in its own package, so let's install that.

> npm i -g angular-cli-ghpages

Next, login to your github.com account and create a new repository for your Angular project.

Also, run through the steps it suggests to turn your project directory into a git repository (Note: You will need the git client)

> git init
> git add .
> git commit -m "First commit"
> git remote add origin remote-repository-url
> git push origin master

You're only able to use the angular-cli-ghpages CLI if you have a /dist folder. If you do, you can then run:

> ngh

With any luck, you can visit your Github Page URL for that project and it will now load your Angular app.

Should you run into any issues with the app not loading, it's likely because you did not use, or did not use correctly, the ng build --prod --base-href "https://USERNAME.github.io/REPOSITORY/" command.