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

11 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

  2. I am also commenting to let you understand of the notable discovery our child encountered browsing your site. She even learned several things, which included how it is like to have a very effective teaching heart to make other individuals without problems fully understand a variety of tortuous topics. You undoubtedly surpassed her desires. I appreciate you for churning out the valuable, trustworthy, educational and in addition easy thoughts on this topic to Emily.

  3. We’re a gaggle of volunteers and starting a new scheme in our community. Your website provided us with helpful info to work on. You’ve performed an impressive process and our entire group will probably be grateful to you.

  4. Thanks for another informative site. Where else could I am getting that type of info written in such a perfect way? I have a undertaking that I am just now operating on, and I have been at the glance out for such info.

  5. Thanks for the sensible critique. Me and my neighbor were just preparing to do a little research on this. We got a grab a book from our local library but I think I learned more from this post. I’m very glad to see such excellent info being shared freely out there.

  6. Excellent post. I was checking continuously this blog and I am impressed! Very helpful information specially the last part 🙂 I care for such information a lot. I was seeking this particular info for a long time. Thank you and best of luck.

  7. Can I simply say what a aid to search out somebody who actually is aware of what theyre speaking about on the internet. You positively know the right way to carry a problem to light and make it important. Extra people need to read this and understand this facet of the story. I cant imagine youre not more in style because you undoubtedly have the gift.

Leave a Reply

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