How to create war file of angular project?

Viewed 8278

I am working on project where I used angular as frontend and spring boot as backend. I want to deploy my project on Sentora control panel. It requires only war files to deploy on server. I created war file of spring project but I dont know how to create war file of angular project. I used vs code for angular. I tried to find the way of creating war file for angular on internet but didn't find any solution. Should I need to import angular project in eclipse? Please someone tell me step by step solution to create war file of angular project.

Update: Error while deploying wabit.war file

enter image description here

I deployed simple spring boot project demo-0.0.1-SNAPSHOT and it started.

wabit.war file is deployed but it doesn't start. It gives error

FAIL - Application at context path [/wabit] could not be started

Why is this happening?

2 Answers

You can use maven for doing that. Just add a pom.xml in you project with the following information.

With this configuration you will have to build your angular application in a file directory named dist.

<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>

    <!-- The Basics -->
    <groupId>your.group</groupId>
    <artifactId>projectName</artifactId>
    <version>1.0.0</version>
    <packaging>war</packaging>
    <!-- Build Settings -->
    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-war-plugin</artifactId>
                <version>3.3.1</version>
                <configuration>
                    <webResources>
                        <resource>
                            <!-- this is relative to the pom.xml directory -->
                            <directory>dist</directory>
                        </resource>
                    </webResources>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

After creating this file you will have to use the following command

mvn clean install

and the file will be created in the target/ directory

You can find more information on maven-war-plugins in the apache maven official documentation

Another solution is instead of creating a war file for your angular project just embed it in the spring boot war.

To do that

  1. Just create your angular dist by ng build command.
  2. Copy the contents of everything in that folder.
  3. Go to your Spring Boot project and paste them inside a static package in the resources directory. The path should be src/main/resources/static
  4. Create and deploy the Spring boot war file and your angular will run as well.

This is how you directory of spring boot should look like

enter image description here

Related