Loading...

Beginner’s guide to deploying an Angular 5 application

View: 116    Dowload: 0   Comment: 0   Post by: admin   Category: Web Development   Fields: none

Angular framework is useful for building Single Page Apps and Progressive Web Apps. This article covers everything you need to know about deploying an Angular application in under 2 minutes.

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.

Mean Stack Architecture

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.

Beginner’s guide to deploying an Angular 5 application

Angular framework is useful for building Single Page Apps and Progressive Web Apps. This article covers everything you need to know about deploying an Angular application in under 2 minutes.

Posted on 29-03-2018 

Comment:

To comment you must be logged in members.

Files with category

  • Twitter-like Hashtag Function in PHP

    Twitter-like Hashtag Function in PHP

    View: 0    Download: 0   Comment: 0

    Category: Php&mySql     Fields: none

    If you ever want a function to hashtag and style words within a string which has '#' next to it like twitter. This piece of code will help

  • Mini Youtube Using ReactJS

    Mini Youtube Using ReactJS

    View: 25    Download: 2   Comment: 0

    Category: Javascript     Fields: none

    This is one the best starter for ReactJS. MiniYoutube as the name suggests is a youtube like website developed using reactJS and youtube API. This project actually let's you search , play and list youtube videos. Do check it out and start learning...

  • PSITS Automated Voting System

    PSITS Automated Voting System

    View: 24    Download: 3   Comment: 0

    Category: Php&mySql     Fields: none

    A free sourcecode for PSITS Automated Voting System develop in PHP programming language. The purposed of the system is to automate the process of voting and maintain the quality of data

  • Document Management System in VB.Net

    Document Management System in VB.Net

    View: 24    Download: 1   Comment: 0

    Category: Forum PHPBB, VBB     Fields: none

    This is a Client Server project entitled Document Management System written in Vb.net and SQL Server Management Studio R2 2008 database for Mines and Geosciences Bureau . There are three (3) sections in the Mines and Geosciences Bureau, namely: under...

  • PHP-University Application System

    PHP-University Application System

    View: 30    Download: 6   Comment: 0

    Category: Php&mySql     Fields: none

    Greeting from Malawi the warm heart of Africa. I developed this university registration system project just to share with the people who can make use of the project like this and at the same time for others like students who can learn from it. This...

  • School Event Management System in PHP/MSQLi

    School Event Management System in PHP/MSQLi

    View: 22    Download: 0   Comment: 0

    Category: Php&mySql     Fields: none

    This School Event Management System can create school events such as Volleyball games, Basketball, Cultural presentation, Election of school officers etc . During school election Instead of having a compile list of candidates and voters this system...

  • Resort Reservation System with PayPal/Credit Card/Debit Card Payment

    Resort Reservation System with PayPal/Credit Card/Debit Card Payment

    View: 27    Download: 0   Comment: 0

    Category: Php&mySql     Fields: none

    This reservation system has the ability to help its customers find available rooms, cottages and even function hall for their convenience . And in here, they will also have the idea of the room rates where they can quickly reserve for their family...

  • Activity log

    Activity log

    View: 20    Download: 0   Comment: 0

    Category: Php&mySql     Fields: none

    Simple program to track user's activity log-in time and online/offline status.

 
File suggestion for you
Loading...
File top downloads
Loading...
Loading...
Codetitle - library source code to share, download the file to the community
Copyright © 2018. All rights reserved. codetitle Develope by Vinagon .Ltd