Beginner’s guide to deploying an Angular 5 application

Angular framework is great for anyone wanting to build an interactive single page application. The framework helps you create simpler Progressive Web Applications (PWA) and works great with other view libraries like React and Vue. However, a confusing aspect about Angular -- or any SPA as a matter of fact -- is what’s the best way to deploy the application into the cloud?

In this tutorial, we’re going to deploy our brand new angular 5 application and see how we can do it in the cloud.

The Usual Deployment Workflow

Imagine that you’re working on a MEAN-stack project. The stack comprises of MongoDB for the backend, Express for the server, Angular for the front-end and Node.js as the runtime environment. If the project is rather small and doesn’t require any collaboration, you can push your release manually into the cloud. If that’s the case, you will be creating a bundle and then copying the build artifacts from your localhost into the server. But I should warn you, that’s not really a good approach. Instead, you would want to automate the whole process with a single magical command that does everything from building, optimizing, testing and deploying. We’ll talk about that in a moment.

The next thing to consider is the architecture and the type of server that you are going to use. We can either use a full-fledged server or a static web hosting solution. If you’re confused about the two, here’s how you can differentiate between them. An Angular build usually comprises of static assets that do not change over time. The static assets include an index.html file, .css files, .js files and images. So, it’s perfectly okay for you to push the code into a static object storage service. The advantage of using a static container against a server is it’s cheaper and can handle the volume of traffic without any extra configuration required.

For a MEAN-stack project, the ideal architecture should look something like this with AWS as the cloud host.

Let me explain the structure first. The RDS instance runs the database. However, if you’re explicitly going to use MongoDB, you might have to replace that with an EC2 and an AWS EFS volume attached to it. The server-side node application will be running inside an EC2 container. Angular, being static, can be hosted on an S3 bucket. Amazon CloudFront speeds up the distribution of static and dynamic content and acts as an intermediate cache.

Now that we have a better idea of how everything’s connected, let’s see how we can deploy our Angular application on a S3 bucket.

Prerequisites

I am going to assume that you have a basic understanding of how Angular works and the different Angular components. Create a basic Angular project if you haven’t already. As usual, I am going to use Angular CLI to create one.

npm install -g @angular/cli
ng new deploy-demo
cd deploy-demo
ng serve

As you might already know, the ng serve command compiles all the files and generates the webpack bundle. But the build artifacts are served from memory which is not what we want for production because we need the generated files available on disk so that we can them push them into a cloud server.

Worry not! The Angular CLI is equipped with everything that we need to create optimized production builds without having to rely on a third-party library.

Build Your Angular Application

The CLI comes with a build command that you can use to build your Angular 5 application.

ng build

The above command writes generated build artifacts into the output directory which is by default the dist/ directory. However, the compiled files are not optimized and won’t perform well in a production environment. You can create optimized builds by appending the --prod meta-flag to the build command. The --prod meta-flag enables Ahead of Time (AoT) compilation that results in faster rendering, and other production-level optimization such as bundling, minification, uglification and dead-code elimination.

To further reduce the bundle size, you can add another optimization flag as follows:

ng build --prod --build-optimizer

You can read more about optimizing Angular at the project’s GitHub page on optimization.

Configure the Bucket

As discussed earlier, we’re going to deploy our application on Amazon S3 bucket. Register on Amazon if you haven’t already. Then follow the steps below to configure your bucket.

1. Create a new bucket. The name you choose should be globally unique across all the buckets.
2. Once you’ve created the bucket, go to the properties tab and select Static Web Hosting.
3. The index document and the error document should point out to index.html. If you’re using Angular router, this helps to configure the S3 to return the application’s host page (index.html) when it encounters a route that doesn’t exist.
4. Set the bucket’s permission. Each bucket has a permission that determines who has read/write access to the bucket. We are going to write a new policy that lets public access to read the objects stored in the bucket.

   {
   "Version": "2012-10-17",
       "Statement": [
           {
               "Sid": "PublicReadGetObject",
               "Effect": "Allow",
               "Principal": "*",
               "Action": [
                   "s3:GetObject"
               ],
               "Resource": [
                   "arn:aws:s3:::angular-demo/*"
               ]
           }
       ]
   }

   Replace angular-demo with the name of your S3 bucket.

Deploy the Application

To deploy the app manually, you have to copy the contents of the dist directory into the S3 bucket. You can either drag and drop them,or use the Upload button to upload the files into the bucket. Make sure that the index.html is located at the root level because that’s the location we had specified earlier.

You can find the URL inside the Static Web hosting tab. Mine looks like this:

http://angular-demo.3-website-us-east-1.amazonaws.com

Automate Deployment using CLI Tools

The manual approach to syncing files between development and production is tiresome and old-fashioned. You will have to create a production build, optimize it, and then manually drag-and-drop the files which requires too much interaction from the developer. Instead, you can automate the whole process as follows:

1. First, we need to install the CLI tool. I am going to use the official AWS CLI.

   pip ins tall awscli --upgrade -user 

2. Generate the access key and the secret for your account if you haven’t already.
3. Configure the tool to work with your account. You will need to use the access key generated in the previous step.

   >aws configure
   AWS Access Key ID [None]: AKIAIOSFODNN7EXAMPLE
   AWS Secret Access Key [None]: wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY
   Default region name [None]: us-east-2
   Default output format [None]: jso

Now, you will need to write a deployment script that uploads the build artifacts to the server.

#/bin/bash
#upload files
aws s3 cp ./dist s3://BUCKETNAME --recursive --acl public-read

Replace BUCKETNAME with the name of your bucket. You can now add the deployment script to your package.json so that when you run npm deploy, it generates an optimized build and uploads the new build to the server. That’s it!

Conclusion

Deploying an Angular application is easy, isn’t it? This is particularly true when you treat an SPA as static HTML website because you can resort to traditional hosting techniques. Unlike dynamic websites that require a server, client-side web apps can be hosted on storage engines like Amazon S3. Hopefully, this tutorial has been of help. Share your thoughts about deploying Angular applications and your experience while doing so.