How to run my maven project (angular+springboot) on tomcat?

1
votes

I have created a web application based on angular 8 and spring boot. I implemented the codebase locally and it is working fine. My Angular code(client) is running on localhost:4200 and spring boot(server) is running on localhost:8080. Till here everything is working as expected.

Now I want to deploy this whole web application as a single bundle so that I can deploy it as a single war on tomcat.

I am creating the war file using maven.

But when I deploy this war file on tomcat and start the tomcat I am not able to see the expected login page on the browser.

Basically, I don't have much understanding of maven and was following resource available in below link on the internet to generate the war file.

https://dzone.com/articles/building-a-web-app-using-spring-boot-angular-6-and

So I am not able to figure out whether the issue is with my build or the URL through which I am trying to access the resources.

if I deploy only the UI build, then if I hit localhost:8080, I am able to see the login page.

I am having three pom files as mentioned in the tutorial. 1. parent-pom 2. server-pom 3. ui-pom

Below are my pom files

parent-pom.xml:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.dzs.licenseGenerator</groupId>
  <artifactId>lg-parent</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>pom</packaging>
  <parent>
        <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-parent</artifactId>
      <version>2.1.6.RELEASE</version>
      <relativePath />
  </parent>
  <modules>
   <module>LicenseGenerator_Backend</module>
    <module>LicenseGenerator_UI</module>
  </modules>
</project>

server-pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>com.dzs.licenseGenerator</groupId>
        <artifactId>lg-parent</artifactId>
        <version>0.0.1-SNAPSHOT</version>
         <!-- lookup parent from repository -->
    </parent>
    <artifactId>LicenseGenerator_Backend</artifactId>
    <packaging>war</packaging>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>com.dzs.licenseGenerator</groupId>
            <artifactId>LicenseGenerator_UI</artifactId>
            <version>${project.version}</version>
            <scope>runtime</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
            <artifactId>maven-resources-plugin</artifactId>
            <executions>
                  <execution>
                      <id>copy-resources</id>
                      <phase>validate</phase>
                      <goals><goal>copy-resources</goal></goals>
                      <configuration>
                        <tasks>
                                <echo>Displaying value of pom.xml element</echo>
                                <echo>[project.build.directory] ${project.build.directory}</echo>
                                <echo>[project.parent.basedir] ${project.parent.basedir}</echo>
                            </tasks>
                          <outputDirectory>${project.build.directory}/classes/resources/</outputDirectory >
                          <resources>
                              <resource>
                                  <directory>${project.parent.basedir}/LicenseGenerator_UI/dist/lg-app/</directory >
                              </resource>
                          </resources>
                      </configuration>
                  </execution>
            </executions>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-failsafe-plugin</artifactId>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-surefire-plugin</artifactId>
            </plugin>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-war-plugin</artifactId>
                <configuration>
                  <packagingExcludes>WEB-INF/lib/tomcat-*.jar</packagingExcludes>
                  <warName>lg-app</warName>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

UI-pom.xml

<?xml version="1.0"?>
<project
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"
    xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>com.dzs.licenseGenerator</groupId>
        <artifactId>lg-parent</artifactId>
        <version>0.0.1-SNAPSHOT</version>
    </parent>
    <artifactId>LicenseGenerator_UI</artifactId>
    <name>LicenseGenerator_UI</name>
    <url>http://maven.apache.org</url>
    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>
    <build>
        <plugins>
            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>1.4</version>

                <configuration>
                    <nodeVersion>v10.16.0</nodeVersion>
                    <npmVersion>6.9.0</npmVersion>
                    <workingDirectory>src/main/web/</workingDirectory>
                </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>
                    <execution>
                        <id>prod</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <arguments>run-script build</arguments>
                        </configuration>
                        <phase>generate-resources</phase>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>
</project>

Just to ensure whether my code structure is correct or not I am posting a screenshot of my Project Explorer in Eclipse.

enter image description here

2
javaangularmavenspring-boottomcat
Build your angular project separately in production mode by using ng build --prod. Then you ll get dist package(jar). Extract your dist in var/webapps/www/html. Then you could access your login by hitting your host. - Narendhran
same way you can put the spring-boot war file into tomcat/webapps directory without extracting the war package. - Narendhran
yes, but I want single war to serve the purpose. Secondly, why do I need to extract the dist folder? - Naveen Yadav

2 Answers

1
votes

Use ng build –prod command for generating production build artifacts.

Run this command in your UI project folder.

Post generation of production build you should see new folder named ‘dist’.

You have to use Maven resource plugin to package as single jar. As i can see you already have the plugin in you pom, just verify the directory folder to pint to dist folder.

After this just run maven clean install . After running this you should see jar with both Angular 6 & Spring Boot application on the target folder.

Execute with Java –jar command to launch the application, you should see the Angular application served from static folder.

0
votes

You can use frontend-maven-plugin for kicking off your frontend build. Once the frontend build is completed, it will generate the resource files in dist directory.

After that you can use the maven-resources-plugin to copy the files from dist to the required location in the target directory.