deploying spring and angular app as deployable war
This article represents steps and related code samples to deploy an Angular app (created with Angular 2.*, Angular 4.* or Angular 5.*) with a Spring Boot / Spring Web app as one deployable unit (war file) on the web server such as Tomcat, Jetty etc.
The following are the two different strategies which can be used for deploying web app built with Angular 5.* (and previous versions such as Angular 4.* or Angular 2.*) used for doing client side programming and Spring boot with Spring Web for server-side programming.
In this article, we will learn as to how to deploy Angular and Spring Web app as one deployable unit (WAR file).
The following represents the Spring Boot Web App:
Figure 1. spring boot web app
ng new helloworld-client
Execute the following command to create deployable artifacts (static resources) for the Angular app.
ng build -prod
Note that this will lead to the creation of following files/artifacts (bundles) under dist folder. These files will later be copied into Spring target folder.
Place following code within pom.xml. This would ensure that Angular app artifacts as shown in above section gets copied during execution of command such as mvn install.
<plugin> <artifactId>maven-resources-plugin</artifactId> <executions> <execution> <id>copy-resources</id> <phase>validate</phase> <goals><goal>copy-resources</goal></goals> <configuration> <outputDirectory>${basedir}/target/classes/static/</outputDirectory > <resources> <resource> <directory>${basedir}/../helloworld-client/dist</directory > </resource> </resources> </configuration> </execution> </executions> </plugin>
Make a note of the following:
mvn install
mvn spring-boot:run
One can come up with simplistic script such as following to deploy the Angular app artifacts frpm within Angular folder:
ng build -prod cd ../helloworld mvn install
Save above script as helloworld-client/deploy.sh. Change the permission and execute the script to deploy continuously and have Spring app access the most recent artifacts.
Last updated: 25th Jan, 2025 Have you ever wondered how to seamlessly integrate the vast…
Hey there! As I venture into building agentic MEAN apps with LangChain.js, I wanted to…
Software-as-a-Service (SaaS) providers have long relied on traditional chatbot solutions like AWS Lex and Google…
Retrieval-Augmented Generation (RAG) is an innovative generative AI method that combines retrieval-based search with large…
The combination of Retrieval-Augmented Generation (RAG) and powerful language models enables the development of sophisticated…
Have you ever wondered how to use OpenAI APIs to create custom chatbots? With advancements…
View Comments
It would be nice if you included how the angular app can post back to the same server. I think the js running on the browser knows where it loaded the js files and can post back to that same URL.