Angular App Guide

By: Nadeem Qasmi · February 2,2022
This article is preserved from the Cloudtek archive. Its technical details reflect the original publication.

Are you a beginner who wants to learn how to make an application using Angular 7+ on AWS?

It is easy. Just follow up with me. Let’s take a look at how we can deploy an Angular application using Angular 6 or 7 (Angular 2+) on the Amazon Web Server EC2 instance. I am writing this for people who are new to EC2 and Angular, and who are keen to deploy a simple Angular application on AWS. I am assuming that you are familiar with the basic AWS terms such as EC2 instance, security group, etc. An EC2 instance is just like a remote system that runs with Ubuntu or any other Linux flavor provided by AWS on which we can install the required servers, software, plugins, etc.

Let’s start by creating an Angular Application:

Start by making an angular application using basic angular CLI commands.


                            First, Install angular CLI locally ( npm install -g @angular/cli)
                            
                            Create a demo app ( ng new my-demo-app)
                            
                            Get into your app and run it ( cd my-demo-app )
                            
                            ng serve --open

Now we will be able to see the application running on the local host: 4200. A simple application that any beginner can start with.

EC2 Instance deployment

We are all set to deploy since we already have an application ready. I hope you have the EC2 instances ready with SSH in it with PuTTY or your terminal. Once you log in, you will find a blank terminal with very basic software in it. Next, we will start the installation with a few important packages such as server, git, vim, etc.

Installation:


                            
                                Update your Ubuntu packages ( sudo apt-get update )

                            
                            
                                Install git to pull your code ( sudo apt-get install -y git )

                            
                            
                                Install npm and nodejs ( sudo apt-get install -y nodejs , sudu apt-get install -y npm)
                                install node on

                            
                            We will use Ngnix server for this setup ( sudo apt-get install -y nginx )

Once everything goes fine, hit public_ip>? and you will see a NGNIX running page which means that your server is running on the given port. Next, install Angular CLI in order to run Angular services. (sudo npm install -g @angular/cli)

Configure NGNIX

For configuration follow the steps given below

cd /etc/nginx/sites-available
Create a file with the site name. (sudo nano your-site-name )

Update the file with the code given below:


                            server {
                            listen 80;
                            listen [::]:80;
                            server_name http://your-site-name.com;
                            root /var/www/my-demo-app/dist;
                            index index.html index.htm;
                            location / {

In the first attempt to the server, request as a file, then as a directory, and then fall back to displaying a 404.


                            try_files $uri $uri/ /index.html =404;
                            }
                            }

In the above file, change ‘your-site-name.co’ with your site name and `root` details to your app-name.
A quick background check is essential whenever any Web server wants to show a home page. It will look for index.html. When we build an Angular application, it will create a bunch of files (html, assets, css, js) which will be used to show the content of the site. Here, the root should be such that it points to the directory where index.html should be present.

Now let's save this file and link it in another directory


                            cd /etc/nginx/sites-enabled
                            sudo ln -s ../sites-available/{your-site-name}
                            ls -l
                            sudo rm default //removes default directory

Build

It is finally time to bring in the code and start building it. Go to the directory where we want to generate the build and clone your code. Now push the application that you created in the beginning to any git repository such as Github, Bitbucket, Gitlab, etc. This is to pull the code in here. We can pass the code using any FTP software but Git will be an easy and hassle-free method.

Let us pull the trigger now.


                           
                            cd /var/www
                             sudo git clone https://my-demo-app.( Change directory to your app, and build it 
                            cd /var/www/my-demo-app
                            ng build --prod --build-optimizer

If the build throws any angular devkit error, run the following code to build it again


                            sudo npm update.
                            This will generate the /dist folder inside ( /var/www/my-demo-app/dist )
                            
                                Now restart Ngnix server. ( service nginx restart )

Your application should be running now. Try public_ip on your favorite browser. I hope you can see your page now ^_^