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:
How to achieve it?
Start with production build ng build --prod.
-> Then copy output folder (dist/ by default) to Apache Tomcat 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 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 Apache Tomcat Server
– Use Putty, login to above server gkz-vps:
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:
Build Angular Client
– Build Production for Angular Client: ng build --prod --base-href "/gkzdemo/"
– Output is dist folder:
Deploy Angular Client on Tomcat Server
– Use scp to copy building files from local to remote server:
– Restart Tomcat server by cmd sudo systemctl restart tomcat
-> Check results:
– Press SignUp button, got 404 Error:
– Press a link on Browser URL, got Error 404 ->
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:
