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
- 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.
- https://tomcat.apache.org/download-90.cgi (Tomcat 9 download link)
- 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.
<em><strong>ng serve -o</strong></em>
Now there are couple of things i want to make clear.
- If you have developed the Social application following this tutorial, it will invoke the underlying node js server and your application gets deployed automatically.
- 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.
<em><strong>ng build --prod --base-href /Social/</strong></em>
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).
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.
I hope you liked this article. Kindly support us by sharing this blog.