Angular Deployment : Host your Angular App on AWS EC2, Azure Virtual Machine
By: Chitransh Kulshrestha
Tags: Angular Cli, Deployment, Angular, Angular2, AWS

Hi, I am a Full Stack Developer works on tech stack like MERN, MEAN , Django, PHP, Spring Boot. Follow me on LinkedIn.

INRODUCTION

AWS and Azure are some of the most popular cloud service providers which are used by our community. A virtual machine is an emulation of a computer system. Virtual machines are based on computer architectures and provide the functionality of a physical computer.

In this article, we will learn how to deploy your angular app on any virtual machine, either it is on AWS, Azure, or any virtual machine provider. This is the simplest method to deploy any angular app within 5 min.

First Create an angular app using the command below:

ng new deployapp

After creating the app we will get this folder structure inside the created app:

DEPENDENCIES INSTALLATION AND REQUIREMENTS

For hosting any website, we need a server. Therefore for this, we are using apache and an AWS EC2 Linux server. You can take any server or cloud service provider which you prefer.

We need to enable port 80 for enabling to server to host the website. In AWS we can enable by EC2>Network Security>Security Groups> SELECT YOUR SECURITY GROUP>inbound rules

Now, We need to connect to the server by either using putty or using the command (NOTE: you have to run this command where your .pem file is stored):

ssh -i "PEM FILE NAME" Your Public IPv4 DNS

Installation of Apache Server in Virtual Machine:

sudo apt-get update sudo apt-get install apache2

You can check the status of apache server by running the following command:

sudo systemctl status apache2

Now transfer your angular project into your virtual machine using FileZilla. The YouTube link is attached to know about FileZilla and its usage.

REPLACE BASE HREF IN NDEX.HTML

( path: app/src/index.html )

Replace <base href="/"> to <base href="./"> in your index.html file

Add the below command to your angular project inside package.json

"build-prod": "ng build --prod"

In Angular, we have to generate the production folder by using this above command which is

ng build --prod

After running this command a dist folder is created inside your angular project and inside your dist folder there is a folder with with your project’s name

The content of folder <app name>/dist/<app name> which is created after the ng build — prof command has to be pasted to the location /var/www/html/ of your virtual machine.

Restart your apache server :

sudo service apache2 restart

Now the website can be visited on any browser by the url: your public DNS or IP.

HANDLING SOME OF THE COMMAN ERRORS AND MISTAKES

Most of the cases the routing would not work and shows error like PAGE NOT FOUND. We can solve this issue by using the below method:

Configure redirect 404 error to index.html page by editing the Apache configuration

Add Error Document 404 /index.html:

sudo nano /etc/apache2/sites-enabled/000-default.conf

replace the code with

<VirtualHost *:80> ServerAdmin webmaster@localhost

DocumentRoot /var/www/html



ErrorDocument 404 /index.html ErrorLog ${APACHE_LOG_DIR}/error.log

CustomLog ${APACHE_LOG_DIR}/access.log combined </VirtualHost>

Restart Apache server by command sudo service apache2 restart

If still it showing the same error then we need to add .htaccess file inside /var/www/html/ and paste the code below:

RewriteEngine on

RewriteCond %{REQUEST_FILENAME} -s [OR]

RewriteCond %{REQUEST_FILENAME} -l [OR]

RewriteCond %{REQUEST_FILENAME} -d

RewriteRule ^.*$ - [NC,L]



RewriteRule ^(.*) /index.html [NC,L]

Angular is a single page application and we need to run some extra scripts like .htaccess and Error Handing file in apache and in our project.

Now the project should run perfectly fine.

You can get more idea by following by Github

I hope this article will defiantly helped you and you learned something new today, keep learning.