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 ozenero-angular-deploy such as:

vultr-server-ip-infos

Install Apache Server

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

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

– Install Apache server by cmd:

sudo apt-get update
sudo apt-get install apache2

– 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:

<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-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 ./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:

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 /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:

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

SourceCode

AngularDynamicRoutes

20 thoughts on “How to Deploy Angular on Apache Remote Server Example – Use Vultr Hosting”

  1. I am not certain the place you are getting your information, however good topic. I needs to spend a while learning more or working out more. Thank you for fantastic information I used to be searching for this info for my mission.

  2. Heya this is kinda of off topic but I was wondering if blogs use WYSIWYG editors or if you have to manually code with HTML. I’m starting a blog soon but have no coding skills so I wanted to get advice from someone with experience. Any help would be enormously appreciated!

  3. Hi there! Do you know if they make any plugins to assist with SEO? I’m trying to get my blog to rank for some targeted keywords but I’m not seeing very good success. If you know of any please share. Thank you!

  4. Thanks for your handy post. Through the years, I have come to understand that the particular symptoms of mesothelioma are caused by the actual build up of fluid between the lining in the lung and the chest cavity. The ailment may start while in the chest place and spread to other areas of the body. Other symptoms of pleural mesothelioma cancer include losing weight, severe breathing in trouble, throwing up, difficulty taking in food, and inflammation of the neck and face areas. It really should be noted that some people having the disease tend not to experience virtually any serious symptoms at all.

  5. Hmm it seems like your website ate my first comment (it was super long) so I guess I’ll just sum it up what I submitted and say, I’m thoroughly enjoying your blog. I as well am an aspiring blog blogger but I’m still new to everything. Do you have any recommendations for rookie blog writers? I’d genuinely appreciate it.

  6. Good blog! I truly love how it is easy on my eyes and the data are well written. I am wondering how I could be notified whenever a new post has been made. I have subscribed to your feed which must do the trick! Have a great day!

  7. I cling on to listening to the news update lecture about receiving free online grant applications so I have been looking around for the finest site to get one. Could you advise me please, where could i get some?

  8. After examine just a few of the weblog posts in your web site now, and I really like your method of blogging. I bookmarked it to my bookmark web site list and will be checking again soon. Pls take a look at my site as well and let me know what you think.

  9. With havin so much content and articles do you ever run into any problems of plagorism or copyright violation? My website has a lot of completely unique content I’ve either authored myself or outsourced but it appears a lot of it is popping it up all over the web without my authorization. Do you know any ways to help protect against content from being ripped off? I’d certainly appreciate it.

  10. I know this if off topic but I’m looking into starting my own blog and was wondering what all is needed to get setup? I’m assuming having a blog like yours would cost a pretty penny? I’m not very internet savvy so I’m not 100 sure. Any tips or advice would be greatly appreciated. Kudos

  11. Another issue is that video games are generally serious in nature with the main focus on mastering rather than amusement. Although, it comes with an entertainment element to keep children engaged, every single game is frequently designed to improve a specific set of skills or program, such as numbers or scientific research. Thanks for your publication.

  12. Do you mind if I quote a few of your articles as long as I provide credit and sources back to your weblog? My blog site is in the exact same niche as yours and my users would really benefit from some of the information you present here. Please let me know if this okay with you. Regards!

  13. It is the best time to make some plans for the long run and it’s time to be happy. I have read this post and if I may I want to counsel you some attention-grabbing issues or advice. Maybe you can write next articles regarding this article. I want to read even more things approximately it!

  14. Hi there! Do you know if they make any plugins to assist with SEO? I’m trying to get my blog to rank for some targeted keywords but I’m not seeing very good success. If you know of any please share. Cheers!

Leave a Reply

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