Upload Single File Option in a Maven Angular Project
In my last leap boot angular 5 article, we implemented a total stack cease to end spider web application using spring kick angular 5.In this article nosotros will talk over about different ways to deploy spring boot and angular app on tomcat. We will exist creating a multi module maven project with backend(server) and fronted(client) and look into 4 ways about how to deploy it using maven-war-plugin, maven-resources-plugin, jar packaging etc.
Angular 7 got released this October and hither is an Athwart 7 full stack App example with Spring Boot.
Spring Boot Angular 5 Project
Outset of all, let me cursory about what we built in our last instance. We used angular CLI to generate angular v project and modified it to have functionality such as list user and add user. We used bound boot to betrayal REST API for the crud functioning and integrated leap information to communicate with MySql database. We fabricated use of ng serv to serv the angular project on localhost:4200 and it was consuming APIs exposed on localhost:8080. Following was the final project structure.
Different Means to Deploy Spring Boot Athwart Awarding
The best practice to deploy a spring boot and angular application is to seperate the user interface code with the business logic.This provides decoupling of the client code with server code and hence the application becomes highly scalable and manageable. The fronted developer can continue with the fronted development in parallel with the backened programmer. The backend code becomes free to apply and integrate different engineering science stacks and information technology becomes available for multiple clients such as the same APIs can be re-used for building android awarding and same can be integrated with 3rd party clients too.It also reduces the downtime of your awarding. Whenever, your APIs are not available or down, your client application is nevertheless upward.
But sometimes it becomes an overhead to manage two server for a small squad and a small application. If a single full stack developer is treatment all the UI and server related configurations, packaging fronted and backend application into a single spider web application is sometimes more helpful. Withal, you lot can betrayal REST APIs and integrate angular fronted code inside the aforementioned application and deploy to a tomcat and other mobile client can reuse the aforementioned APIs.
Now when coming to deploy a java web awarding, nosotros take ii different ways to do this. Afterward the introduction of Jump Boot, y'all can package your application as a Fat jar file with embedded tomcat and database and run as an executable file. Likewise, you lot can use multiple maven plugins to create a .war file and deploy it to a standalone tomcat.
In this commodity, we volition mainly look into 4 ways to deploy spring boot angular application and they are - using node server and tomcat, using maven war plugin, using maven resources plugin and spring boot jar packaging
Bound Boot Angular Multi Module Project
Nosotros already have 2 existing projects - userPortal(server) and portalApp(client) and now nosotros will convert it into a multi module project. To exercise this create a new folder - portal-parent and move both the existing project into this folder and create a pom.xml file in portal-parent directory. This pom.xml will have module defined as the two existing child projection - userPortal and portalApp and the packaaging blazon will be pom. Then, whenever nosotros build this parent the child modules will be built start.
Make sure we have client projection i.e. portal-app equally the first kid included in parent pom else the build will neglect as in that location won't exist dist folder generated while generating the .state of war file.
<modelVersion>4.0.0</modelVersion> <groupId>com.devglan</groupId> <artifactId>portal-parent</artifactId> <version>0.0.i-SNAPSHOT</version> <packaging>pom</packaging> <name>portal parent</proper noun> <clarification>portal parnt</description> <modules> <module>portal-app</module> <module>user-portal</module> </modules>
And, post-obit is the sample pom file of client project i.e. portal-app
<groupId>com.devglan</groupId> <artifactId>portal-app</artifactId> <version>0.0.ane-SNAPSHOT</version> <packaging>jar</packaging> <name>portal-app</name> <clarification>Demo project for Spring Boot</description> <build> <plugins> <plugin> <artifactId>maven-clean-plugin</artifactId> <version>ii.5</version> <configuration> <filesets> <fileset> <directory>dist</directory> <includes> <include>*</include> </includes> </fileset> </filesets> </configuration> </plugin> <plugin> <groupId>com.github.eirslett</groupId> <artifactId>frontend-maven-plugin</artifactId> <version>ane.6</version> <executions> <execution> <id>install node and npm</id> <goals> <goal>install-node-and-npm</goal> </goals> <configuration> <nodeVersion>v8.9.0</nodeVersion> <npmVersion>5.5.one</npmVersion> </configuration> </execution> <execution> <id>npm run build</id> <goals> <goal>npm</goal> </goals> <configuration> <arguments>run build</arguments> </configuration> </execution> </executions> </plugin> </plugins> </build>
Deployment with Maven State of war Plugin
The maven war plugin creates a .war file past collecting all the artifact dependencies, classes, resources of the web awarding. Hence, here in this configuration we will configure our client projection to push all the static resources to target/customer and afterwards while creating the war file we will apply maven war plugin to include this in the .war generation and put it inside /static folder. And of course, bound boot has a feature to look into static folder for static resources and our angular static resources will be served.
And so now how volition nosotros become the final build of static resources. Well, this will be washed by angular itself.If yous await into angular-cli.json you lot willl notice ane JSOn property as - "outDir": "dist",. This means the final output will be pushed to dist folder if we build the athwart projection. And we will accept now configuration in the customer pom.xml file to build the angular project using npm. To and so this we have to make changes in the customer pom.xml equally follow:
This configuration volition download and install the node and npm as configured in the pom file and npm install will install all modules listed every bit dependencies in package.json and in the execution phase the terminal sources volition exist pushed to dist binder equally per the configuration in bundle.json.
Also, we will have configuration in the pom file of server where we will configure our maven war plugin to include the resources of ../client/target while building the war file.Also, it volition have the angular client every bit jar dependency. And like this the terminal war will exist generated and now you can deploy it to any standalone tomcat.
client pom.xml
<build> <finalName>client</finalName> <plugins> <plugin> <groupId>com.github.eirslett</groupId> <artifactId>frontend-maven-plugin</artifactId> <version>1.6</version> <configuration> nodeVersion>v8.9.0</nodeVersion> <npmVersion>5.five.1</npmVersion> </configuration> <executions> <execution> <id>install node and npm</id> <goals> <goal>install-node-and-npm</goal> </goals> </execution> <execution> <id>npm install</id> <goals> <goal>npm</goal> </goals> </execution> <execution> <id>npm run build</id> <goals> <goal>npm</goal> </goals> <configuration> <arguments>run build</arguments> </configuration> </execution> </executions> </plugin> </plugins> <resources> <resource> <directory>target/client</directory> <targetPath>static</targetPath> </resource> </resources> </build>
server pom.xml
<build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>jump-kick-maven-plugin</artifactId> </plugin> <plugin> <artifactId>maven-state of war-plugin</artifactId> <version>3.2.0</version> <configuration> <webResources> <resource> <directory>../user-portal/target</directory> </resource> </webResources> </configuration> </plugin> </plugins> </build>
Later these changes run mvn make clean install and your war will be generated.
Deployment with Maven Resources Plugin
We have already configured our customer to push all the static sources to dist folder in higher up configuration. At present, nosotros will be using maven resource plugin to copy all files from dist folder to /src/main/resource/static folder of our server project and spring boot will server these resources from the /static folder. Following is the pom configuration.
<plugin> <artifactId>maven-resources-plugin</artifactId> <executions> <execution> <id>copy-resources</id> <phase>validate</phase> <goals><goal>copy-resources</goal></goals> <configuration> <outputDirectory>${build.directory}/classes/static/</outputDirectory > <resources> <resource> <directory>../portal-app/dist</directory> </resource> </resources> </configuration> </execution> </executions> </plugin> Deployment with Spring Kick Jar Packaging
In this case we will be packaging the angular project as a jar. Then no changes reqired in the client pom file.Too, we do non require to configure whatsoever maven plugin in the server pom file. Remove all the build configuration except leap-boot-maven-plugin. Don't forget to add client project jar dependency in the server pm file. So, at present when we build our projection the jar will be included in the META-INF/resources directory and Spring Kick is preconfigured to serve static content from this resource binder. Ane thing you crave to change is in the build parameter of package.json.
"build": "ng build -prod –output-path META-INF/resources"
Node and Tomcat Server Deployment
In this case the athwart project can be hosted on node server and bound kicking application can exist hosted on whatever other application server. To practise this run ng build command to generate the dist folder and copy this folder to backend node server. Doing this can assist in load balancing both the server separately.
Deploying Athwart app on Nginx
In a higher place methods of deploying athwart app useful while deploying as a unmarried war file merely in that location are use cases when nosotros desire to deploy the angular app as a standalone app. While doing then, either nosotros can make use of Node Js for server side rendering. Ane use example of server side rendering is SEO. But we can also use Nginx on the cloud to serve our angular pages. Here is my another article where I take explained about deploying angular app on Nginx in deject.
Source: https://www.devglan.com/spring-boot/spring-boot-angular-deployment
Post a Comment for "Upload Single File Option in a Maven Angular Project"