Deploy Angular App On Tomcat Server

There is a lot of craze for learning angular among developers these days. We have seen number of articles related to angular on this blog as well developed with the help of angular cli. If you have developed at least one angular application you might have used ng server -o command which invokes the default node js server and angular application gets deployed automatically. We may not want to deploy our angular application on regular node js server always but want to try our hand on other servers as well like tomcat server. In this article, I will guide you on how to deploy angular application on tomcat server.

If you are a novice and just started learning angular, I would suggest you first go through the following article.

Getting Started With Angular Development

Creating Angular App Using Angular CLI

Creating Social App using Angular and Bootstrap

Before we begin

You might be thinking that we are happy developing angular application using node js server then why we need some other servers like Tomcat. Well we know that angular applications are built using typescript, which ultimately gets converted into JavaScript. Tomcat server does not have support for typescript or JavaScript dependency management. Since angular applications need a lot of libraries and other dependencies, node package manager of node js server helps in the dependency management and compilation of typescript in angular application.  Angular CLI has given some built in commands with the help of which we can deploy our applications on production server.

Prerequisite

  • Tomcat Server: Since we are going to deploy our angular application on tomcat server, we need this one. At the time of writing this article, latest version is Tomcat 9 but you can even deploy on Tomcat 8. If you have not got a tomcat server yet on your machine, download from the given link below.
  1. https://tomcat.apache.org/download-90.cgi     (Tomcat 9 download link)
  2. https://tomcat.apache.org/download-80.cgi     (Tomcat 8 download link)
  • Node.js 6.9.0 or higher and NPM 3.0.0 or higher must be installed in your machine.
  • Angular CLI which is installed using npm install -g @angular/cli on command prompt, should also be there as we are going to execute various commands.

 

How to deploy angular application on tomcat server?

I am not going to develop the angular application from scratch as deployment on tomcat server is our main concern in this article. I will be using one existing application called social which is crafted beautifully using bootstrap. You can download this application from our GitHub page, just click here. Download this application as zip and extract it at any location of your choice. I have extracted in ” G:\Angular\AngularExample\” folder and named it Social(renaming is just a matter of choice).

Before deploying on tomcat server, make sure this application in running well. Open the command prompt and switch to Social directory. Hit the following command on command prompt.

ng serve -o

Now there are couple of things i want to make clear.

  1. If you have developed the Social application following this tutorial, it will invoke the underlying node js server and your application gets deployed automatically.
  2. But if you have download from our GitHub page then on invoking the above command will give you following error. “node_modules appears empty, you may need to run ‘npm install’ “

The most common cause of this error is due to missing node_modules folder in the directory from which you have called ng serve -o. node_modules is an important folder. NPM (Node Package Manager) basically installs packages locally into a project, specifically into the node_modules folder. It contains all the necessary packages or dependencies that are required to develop and run our application.

How to solve this error?

You can solve this error by invoking ng install command from inside project directory.

As soon as you execute ng install command, angular cli starts building node_modules in your project’s directory. Again execute ng serve -o command to see if the application is running successfully on node js server.

Creating A Build For Tomcat Server

Execute the following command to create a build for our Social App.

ng build --prod --base-href /Social/

ng build: compiles the application into an output directory and stores the build aritifacts in /dist directory.

–prod: value for environment( prod for production or dev for development).

–base-href: context root of your application, basically url with the help of which you will navigate your application.

Following are the build artifacts inside /dist folder.

You can open index.html in any preferred editor to check the value of  base href, you will find it set to /Social/.

Final Step For Deployment

dist is the folder we are concerned about. This is the what we will deploy into the webapps folder of tomcat. But don’t you think the name “dist” is not suitable as per the application we developed. I will leave it completely to your choice for its rename, but i would suggest you should. If you made up your mind to change its name, then pick up any suitable name. Create a folder at any other location and name it “Social“. Now copy the content of dist inside Social folder you just created.

If you already have tomcat installed in your machine, copy the Social folder in the webapps folder of tomcat.

Now start the tomcat server by double clicking on Tomcat8.exe which is inside the bin folder. It will start the tomcat server and our angular application “Social” will be deployed.

Since the server is now up and running on port 4040 (it may be different in your case), open any browser to access the application with /Social/ context path as the following (don’t forget to change the port number with that of yours).

http://localhost:4040/Social/

Congratulations, if you are seeing the above page. You successfully deployed this angular application on tomcat server. You can compose any post and hit the Post button. Your post will be added in the Feed section as show above. Now you can hit the like and dislike button. That’s it.

If you want to learn how to deploy this application on IIS Server, then click on the following link.

Deploy Angular Application On IIS Server

I hope you liked this article. Kindly support us by sharing this blog.

Share Knowledge
This entry was posted in ANGULAR and tagged . Bookmark the permalink.

7 Responses to Deploy Angular App On Tomcat Server

  1. Tommy Kubitz says:

    After reading your post, you have a great website with interesting content. But I think you can improve your current google ranks by using SEO website traffic net. My friend uses it and it works great. Just google it, it’s very nice tool to bring you a lot of new readers on a daily basis. Keep up the quality work!

  2. Santosh says:

    Thanks Bro …. It is working

  3. Manzer says:

    Hi,
    Thanks, but , as you can see on deploying dist folder (build folder) on tomcat server, app runs on http. How to run our app on https ?

    • Hi Manzer,
      Glad that you liked my article. In case you want to run your web app on https. First you need to have a certificate (you may generate self-signed certificate for testing purpose), and with that certificate you have to do configuration in your application server(say tomcat or jboss etc). Kindly follow this article Enable-ssl-or-https-in-apache-tomcat-8, that will guide you to deploy your application on tomcat server and access it on HTTPS SCHEME.

  4. Jim Rayburn says:

    I am trying to resolve an issue with using path location strategy (preferred) or even the hash location strategy. There is no issue when starting from the index.html but the problem I am having is when I type a route in manually. As an example I am working with a calendar system is being used by many companies. I am hosting at http://localhost:8088/ui. When I go to the url the working login page is displayed. Using ng serve, when I go to http://localhost:4200/calendar/123 the calendar for a specific client is shown. When I attempt this at http://localhost:8088/ui/calendar/123, it returns a 404. I have tried modifying it to use hash location strategy which simply returns the login page. I have attempted to use redirects in the rewrite.conf and web.xml but neither one has help.

    On my local machine I am using Tomcat 9, node v.9.5.0, and npm v.5.6.0.

    Do you have any suggestions that could help me resolve my goal of being able to manually type routes in?

Leave a Reply

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