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:
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: 3rd May, 2024 Have you ever wondered why some machine learning models perform…
Last updated: 2nd May, 2024 The success of machine learning models often depends on the…
When working on a machine learning project, one of the key challenges faced by data…
Last updated: 1st May, 2024 The bias-variance trade-off is a fundamental concept in machine learning…
Last updated: 1st May, 2024 As a data scientist, understanding the nuances of various cost…
Last updated: 1st May, 2024 In this post, you will learn the concepts related to…
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.