[go: up one dir, main page]
Scribd
Upload
254 views3 pages

Integrate Java and Angular Webapp in One JAR

This document provides steps to deploy Angular and Java applications in the same artifact (jar/war file). It involves creating a parent Spring Boot project with backend and frontend modules. The frontend module requires adding Node.js and NPM configuration to the pom.xml file to build the Angular app. The backend pom.xml is configured to include the built frontend files. Running "mvn package" from the parent project will package both applications into a single artifact.

Uploaded by

Mahadi Hasan Joy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
254 views3 pages

Integrate Java and Angular Webapp in One JAR

This document provides steps to deploy Angular and Java applications in the same artifact (jar/war file). It involves creating a parent Spring Boot project with backend and frontend modules. The frontend module requires adding Node.js and NPM configuration to the pom.xml file to build the Angular app. The backend pom.xml is configured to include the built frontend files. Running "mvn package" from the parent project will package both applications into a single artifact.

Uploaded by

Mahadi Hasan Joy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Deploying angular and java applications in the same artifact (jar/war)

At first create a simple spring boot project and make it as your parent project. There will be 3
projects,
● Root project
● BackEnd project
● FrontEnd project

Then add backEnd and FrontEnd projects as Root projects module.


RootProjects pom.xml:
<modules>
<module>aml360ApiGetway</module>
<module>bkashAmlFrontend</module>
</modules>

There will be a problem, your frontEnd project won’t be added as a module because it doesn’t
contain the pom.xml file. So create the pom.xml file and configure the parent. Mention parents
package, groupId, artifactId, version properly.

Add node version in the frontEnds pom.xml.

<configuration>
<nodeVersion>${node-version}</nodeVersion>
<npmVersion>${npm-version}</npmVersion>
<workingDirectory>src/main/web/</workingDirectory>
</configuration>

After configuring node version and npm version, you need to add this in plugins as a plugin:
<plugin>
<!-- Frontend Maven Plugin configuration -->
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.8.0</version>
<configuration>
<nodeVersion>${node-version}</nodeVersion>
<npmVersion>${npm-version}</npmVersion>
<workingDirectory>src/main/web/</workingDirectory>
</configuration>
<executions>

<!-- #1 Install Node and NPM -->


<execution>
<id>install node and npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
</execution>

<!-- #2 Install project dependencies -->


<execution>
<id>npm install</id>
<goals>
<goal>npm</goal>
</goals>
</execution>

<!-- #3 Run package.json's build-prod script -->


<execution>
<id>build-prod</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>run-script build-prod</arguments>
</configuration>
<phase>generate-resources</phase>
</execution>

</executions>
</plugin>
</plugins>

You need to edit the package.json file and put a new script on the “scripts” attribute

"scripts": {

"build-prod": "ng build --prod"


}

Add build path and dist path of frontEnd in your backend pom file.
<frontend-bundle-dir>${project.parent.basedir}/bkashAmlFrontend/dist/bKashAML360Ang
ular/</frontend-bundle-dir>
<start-class>com.datasoft.aml360ApiGetway.Aml360ApiGetwayApplication</start-class>
Finally add some plugin to Gather the "dist" directory from frontend project

<plugin>
<artifactId>maven-resources-plugin</artifactId>
<executions>
<execution>
<id>copy-resources</id>
<phase>validate</phase>
<goals><goal>copy-resources</goal></goals>
<configuration>

<outputDirectory>${project.build.directory}/classes/resources/</outputDirectory >
<resources>
<resource>
<directory>${frontend-bundle-dir}</directory>
</resource>
</resources>
</configuration>
</execution>
</executions>
</plugin>

To create the package just run the command below at the project’s main directory.
mvn package

If mvn not found then just click here from root projects lifecycle:

It will take time and finally run the jar from your backend targeted folder and see magic.

You might also like