How to create war file of angular project?

Question

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

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?

Syed Anas · Answer 1 · 2020-10-01T09:19:50.320

3

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

To do that

Just create your angular dist by ng build command.
Copy the contents of everything in that folder.
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
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

edited Oct 01 '20 at 09:19

answered Sep 26 '20 at 08:27

Syed Anas

1,459
3
19
38

@bunT can you tell me in detail what steps you did ... also tell me the content inside your dist folder can you paste a screenshot of that in your question. – Syed Anas Oct 01 '20 at 08:56
I followed this answer.. https://stackoverflow.com/a/54629606/10109195 – bunT Oct 01 '20 at 09:08
@bunT I have updated the answer, see if this is how you did it – Syed Anas Oct 01 '20 at 09:20
your steps also write but u didn't mention the pom.xml for build as mentioned in above link. – bunT Oct 01 '20 at 09:23
I am listing my assumptions here and let me know if they are correct, You have a spring boot project which already has a pom and you create a war file which is in deployable state. Now you need to run angular as well on the server but the server only accepts war file. my suggestion is, before creating the war file copy the contents of angular dist folder in your spring boot resources/static folder as depicted in the image above. Once copied now create your war file and deploy it on server. You can now access the angular as well – Syed Anas Oct 01 '20 at 09:27
I did same as you said but it dosent work.. I will try again. – bunT Oct 01 '20 at 09:34
@bunT sure and if you face issue please edit the question and paste the server logs – Syed Anas Oct 01 '20 at 09:47
im getting this error message when i try to run it on tomcat server. FAIL - Application at context path [/wabit-0.0.1-SNAPSHOT] could not be started – bunT Oct 05 '20 at 08:07
@bunT that is good news, this is a different error, change the name of ur war wilfe from wabit-0.0.1-SNAPSHOT to simply wabit.war and also understand this. When you deploy wabit.war your contextpath will be `http://localhost:8080/wabit` after that you can access your apis. So make sure your angular also has base path till wabit. – Syed Anas Oct 05 '20 at 12:29
I did as you said then how can i access frontend here? I mean what is the URL? – bunT Oct 09 '20 at 12:50
http://localhost:8080/wabit this will be your context path – Syed Anas Oct 18 '20 at 17:12

score 2 · Answer 2 · answered Sep 26 '20 at 07:10

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

should i need to import angular project in eclipse or i can do mvn clean install in vs code? — bunT, Sep 26 '20 at 07:53
You will need to install maven. but no you will not need to use eclipse just use `mvn clean install`. In the directory containing the pom.xml — Ruokki, Sep 26 '20 at 08:20
After importing angular project into eclipse i converted project into maven project then i added pom.xml as you mentioned and also created web.xml file.After that i did maven install and it created war file in target folder. — bunT, Sep 26 '20 at 08:45
I will let you know if war file suceesfully run on Sentora hosting panel. — bunT, Sep 26 '20 at 08:46
I go through this https://bezkoder.com/integrate-angular-spring-boot/#comment-4982 and this application run on same port for me. But after that i created war file of that project and tried to run on tomcat but it is not working. Do you have any idea how to run this appication? — bunT, Oct 10 '20 at 08:32
This did not work for me I get Error assembling WAR: webxml attribute is required (or pre-existing WEB-INF/web.xml if executing in update mode) — wwjdm, Sep 08 '21 at 02:48

How to create war file of angular project?

2 Answers2