How to Deploy Angular on Apache Remote Server Example – Use Vultr Hosting

deployment-angular-client-on-apache-server-with-vultr-hosting

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

Related post:
Angular 6 dynamic Navigation Bar – add/remove Route dynamically

Technologies

– Vultr Hosting
– Apache Server
– Angular

Goal

Video Guide

Objectives

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

deploy-angular-client-on-apache-server-with-vultr-hosting-result-2

– Sub-folder deployment ->

deploy-angular-client-on-apache-server-with-vultr-hosting-sub-folder-deploy

How to achieve it?

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

deploy-angular-client-on-apache-server-with-vultr-hosting-copy-production-build-from-local-to-remote

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:

deploy-angular-client-on-apache-server-with-vultr-hosting-all-file-sub-folder

Practice

Sourcecode for deployment at: link

Start Vultr Hosting Server

Follow the link to Login to Vultr Hosting.

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

vultr-server-ip-infos

Install Apache Server

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

deploy-angular-client-putty-connect-to-vultr-hosting-server

– Install Apache server by cmd:

– Check your Apache server: sudo systemctl status apache2

deploy-angular-client-on-apache-server-with-vultr-hosting-check-apache-server-active

Build Angular Client

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

deploy-angular-client-on-apache-server-with-vultr-hosting-build-angular-production-image

– Output is dist folder:

deploy-angular-client-on-apache-server-with-vultr-hosting-output-production-image

Deploy Angular Client on Apache Server

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

deploy-angular-client-on-apache-server-with-vultr-hosting-copy-production-build-from-local-to-remote-1

– Restart Apache server by cmd sudo service apache2 restart

-> Check results:

deploy-angular-client-on-apache-server-with-vultr-hosting-result-1

deploy-angular-client-on-apache-server-with-vultr-hosting-result-2

– Press SignUp button, got 404 Error:

deploy-angular-client-on-apache-server-with-vultr-hosting-result-error

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

deploy-angular-client-on-apache-server-with-vultr-hosting-result-error-1

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:

– Restart Apache server by cmd sudo service apache2 restart

– Press Button SignUp, index.html is redirected:

deploy-angular-client-on-apache-server-with-vultr-hosting-result-error-1-fixed-redirect-index

Deploy in Sub Folder

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

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

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

– Copy build files from local to remote server:

deploy-angular-client-on-apache-server-with-vultr-hosting-all-file-sub-folder

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

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

Restart Apache Server by cmd sudo service apache2 restart

– Result:

deploy-angular-client-on-apache-server-with-vultr-hosting-sub-folder-deploy

SourceCode

AngularDynamicRoutes

By grokonez | November 16, 2018.



Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*