How to Depoy Angular on Apache Tomcat Remote Server – Vultr Hosting VPS Example

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

Related post:
Angular 6 dynamic Navigation Bar – add/remove Route dynamically
How to Install Apache Tomcat on Ubuntu Remote Server – Vultr Hosting Example

Technologies

– Vultr Hosting
– Apache Tomcat Server
– Angular

Goal

Deploy Angular Client on Apache Tomcat remote VPS:

deploy-angular-on-apache-tomcat-remote-server-with-vutr-hosting-app-manager-with-angular-app-deployment

deploy-angular-on-apache-tomcat-remote-server-with-vutr-hosting-app-working

How to achieve it?

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

deploy-angular-on-apache-tomcat-remote-server-with-vutr-hosting-copy-build-files-from-local-to-depoy-folder

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 Tomcat server will return 404 – Not Found error.
-> Configure 404 error on the server to redirect requests for missing files to index.html:

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

Practice

Sourcecode for deployment at: link

Start Vultr Hosting Server

Follow the link to create a Linux Vultr VPS.

install-java-in-linux-remote-server-with-vultr-hosting-vps-tom-cat-server-information

Install Apache Tomcat Server

– Use Putty, login to above server gkz-vps:

deploy-angular-on-apache-tomcat-remote-server-with-vutr-hosting-putty-connect

Follow below article to install Apache Tomcat server:

Install Apache Tomcat on Ubuntu Remote Server – Vultr Hosting Example

– Check your Apache Tomcat server: sudo systemctl status tomcat

-> Result:

deploy-angular-on-apache-tomcat-remote-server-with-vutr-hosting-tomcat-status

Build Angular Client

– Build Production for Angular Client: ng build --prod --base-href "/gkzdemo/"

deploy-angular-on-apache-tomcat-remote-server-with-vutr-hosting-build-angular

– Output is dist folder:

deploy-angular-on-apache-tomcat-remote-server-with-vutr-hosting-build-out-put

Deploy Angular Client on Tomcat Server

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

deploy-angular-on-apache-tomcat-remote-server-with-vutr-hosting-copy-build-files-from-local-to-depoy-folder

– Restart Tomcat server by cmd sudo systemctl restart tomcat

-> Check results:

deploy-angular-on-apache-tomcat-remote-server-with-vutr-hosting-app-manager-with-angular-app-deployment

deploy-angular-on-apache-tomcat-remote-server-with-vutr-hosting-app-working

– Press SignUp button, got 404 Error:

deploy-angular-on-apache-tomcat-remote-server-with-vutr-hosting-404-error-2-sign-up

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

deploy-angular-on-apache-tomcat-remote-server-with-vutr-hosting-404-error

Configure 404 Error Redirect

– Add RewriteValve in /opt/tomcat/latest/conf/context.xml:


Full details context.xml file ->





    
    
    WEB-INF/web.xml
    WEB-INF/tomcat-web.xml
    ${catalina.base}/conf/web.xml

    
    

    


In gkzdemo project folder, create WEB-INF folder, then add a file rewrite.config in WEB-INF with below content:

RewriteCond %{REQUEST_URI} !^.*\.(bmp|css|gif|htc|html?|ico|jpe?g|js|pdf|png|swf|txt|xml|svg|eot|woff|woff2|ttf|map)$
RewriteRule ^(.*)$ /index.html [L]

Restart Tomcat Server with below cmd: sudo service tomcat restart

-> Check results:

Press SignUp button, index.html file is redirected:

deploy-angular-on-apache-tomcat-remote-server-with-vutr-hosting-404-error-2-sign-up-fix-error

SourceCode

AngularDynamicRoutes

3 thoughts on “How to Depoy Angular on Apache Tomcat Remote Server – Vultr Hosting VPS Example”

  1. Hey just wanted to give you a quick heads up. The words in your article seem to be running off the screen in Safari. I’m not sure if this is a format issue or something to do with web browser compatibility but I figured I’d post to let you know. The layout look great though! Hope you get the problem resolved soon. Cheers

Leave a Reply

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