ozenero | Mobile & Web Programming Tutorials

In the tutorial, We show how to deploy Angular Client with Production mode on Apache Remote Server with Vultr Hosting.

Technologies

– Vultr Hosting
– Apache Server
– Angular

Goal

Video Guide

Objectives

Deploy Angular Client on Apache remote server:
– Normal deployment ->

– Sub-folder deployment ->

How to achieve it?

Start with production build ng build --prod.
-> Then copy output folder (dist/ by default) to Apache server.

What are Production --prod optimizations?

Ahead-of-Time (AOT) Compilation: pre-compiles Angular component templates.
Production mode: deploys the production environment which enables production mode.
Bundling: concatenates your many application and library files into a few bundles.
Minification: removes excess whitespace, comments, and optional tokens.
Uglification: rewrites code to use short, cryptic variable and function names.
Dead code elimination: removes unreferenced modules and much unused code.

If the app uses the Angular router, When asked for a file that it does not have, Apache Server will return 404 - Not Found error.
-> Configure 404 Error on the server to redirect requests for missing files to index.html:

ErrorDocument 404 /index.html

With sub-folder deployment, we use base tag to re-configure href as below:

– The HTML base href="..." specifies a base path for resolving relative URLs to assets such as images, scripts, and style sheets.

Then re-build & upload output(dist/ by default) to sub-folder of Apache server:

Practice

Sourcecode for deployment at: link

Start Vultr Hosting Server

Follow the link to Login to Vultr Hosting.

– Create a small server ozenero-angular-deploy such as:

Install Apache Server

– Use Putty, login to above server ozenero-angular-deploy:

– Install Apache server by cmd:

sudo apt-get update
sudo apt-get install apache2

– Check your Apache server: sudo systemctl status apache2

Build Angular Client

– Build Production for Angular Client: ng build --prod

– Output is dist folder:

Deploy Angular Client on Apache Server

– Use scp to copy building files from local to remote server:

– Restart Apache server by cmd sudo service apache2 restart

-> Check results:

– Press SignUp button, got 404 Error:

– Press a link on Browser URL, got Error 404 ->

Configure 404 Error Redirect

We need configure redirect 404 error to index.html page.

– In Apache Server hosting, edit Apache configuration:

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

– Add ErrorDocument 404 /index.html

– Full file:

<VirtualHost *:80>
        ServerAdmin webmaster@localhost
        DocumentRoot /var/www/html
		
		# redirect 404 to index page
		ErrorDocument 404 /index.html
		
        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

– Restart Apache server by cmd sudo service apache2 restart

– Press Button SignUp, index.html is redirected:

Deploy in Sub Folder

How to deploy Angular App in sub-folder (example ./ozenero/demo) of Production Server?

-> Change value href of base tag in index.html as below:

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>AngularDynamicRoutes</title>
  <base href="/ozenero/demo/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body>
  <app-root></app-root>
</body>

</html>

Rebuild Angular client in Production mode with cmd: ng build --prod

– Copy build files from local to remote server:

Open Apache Server configure file by cmd: sudo nano /etc/apache2/sites-enabled/000-default.conf

– Change 404 error redirect to /ozenero/demo/index.html file:

<VirtualHost *:80>
        ServerAdmin webmaster@localhost
        DocumentRoot /var/www/html
		
		# redirect 404 to index page
		ErrorDocument 404 /ozenero/demo/index.html
		
        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

Restart Apache Server by cmd sudo service apache2 restart

– Result:

SourceCode

AngularDynamicRoutes