Spring Boot war deployment with Angular app as static resource

Question

I have a Spring Boot backend and an Angular frontend application and can successfully create a runnable jar file from them by simply copying the Angular app into the resources/static folder of the Spring Boot app.

Running the jar works fine, i can access the application on localhost:8000 (since i have the server.port property set to 8000 ) and it works as intended.

Now i would like to create a deployable war file instead of the runnable jar and deploy the app in Tomcat, so i've applied the war plugin and declared the following gradle dependency (as per this guide ):

providedRuntime 'org.springframework.boot:spring-boot-starter-tomcat'

Now the build successfully generates a war file, and Tomcat can deploy and start it without any errors. After the deployment the app is available at localhost:8080/myapp

The problem is when i'm actually opening the app, it seemingly tries to fetch the Angular resources from the wrong location and thus resulting in 404 errors:

As you can see it it tries to fetch the Angular files from localhost:8080/filename , but i think it should be localhost:8080/myapp/filename (although i'm not sure).

I've tried changing the server.servlet.context-path property to /myapp , but it has no effect (i guess it would affect only the embedded container).

I'd really appreciate any advice on how to solve this problem.

Answer 1

I've managed to fix it.

First, i had to change the base href of the Angular app in its index.html from / to ./ as in:

<base href="./">

After this change the Angular resources did not throw 404 errors anymore, but the backend endpoints still did.

I had the following in my environments.prod.ts :

export const environment = {
  production: true,
  API_URL: '/api'
};

I'm calling my backend endpoints through this API_URL , so i had to change this as well in a similar manner:

API_URL: './api'

After these changes everything works fine.