404 Page while running Spring and angular in same port

Question

I created Spring boot + angular 8 application which was running succesfully in two different port like 8080 and 4200 without any issues. Then I decided to run the application in same port (8080). I ran ng build --prod and got the dist folder. Moved that Dist folder into the spring application and the folder looked like this image

The corresponding pom.xml is as follows

  <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-resources-plugin</artifactId>
            <version>3.0.2</version>
            <configuration>
                  <outputDirectory>${project.build.directory}/target/classes/static/</outputDirectory >
                  <resources>
                      <resource>
                          <directory>${project.build.directory}/fleetManagement/dist/fleetManagement</directory >
                      </resource>
                  </resources>
                <nonFilteredFileExtensions>
                    <nonFilteredFileExtension>woff</nonFilteredFileExtension>
                    <nonFilteredFileExtension>ttf</nonFilteredFileExtension>
                    <nonFilteredFileExtension>woff2</nonFilteredFileExtension>
                    <nonFilteredFileExtension>eot</nonFilteredFileExtension>
                    <nonFilteredFileExtension>swf</nonFilteredFileExtension>
                    <nonFilteredFileExtension>ico</nonFilteredFileExtension>
                    <nonFilteredFileExtension>png</nonFilteredFileExtension>
                    <nonFilteredFileExtension>svg</nonFilteredFileExtension>
                    <nonFilteredFileExtension>jpg</nonFilteredFileExtension>
                    <nonFilteredFileExtension>jpeg</nonFilteredFileExtension>
                </nonFilteredFileExtensions>
            </configuration>
        </plugin>

When I ran the aplication and hit http://localhost:8080 - it goes to HTTP Status 404 – Not Found but the api's are still running , like http://localhost:8080/api/vehicles - provide json data from backend

My application.properties file as follows,

server.servlet.context-path=/api
server.port=8080

stackoverflow.com/questions/55848395/… this might be related to your question. — Penguin74
do you have the properties server.servlet.context-path=??? in your application.properties ? — RUARO Thibault
Possible replica of the same stackoverflow.com/questions/53058824/… — Tushar Jajodia

RUARO Thibault RUARO Thibault · Accepted Answer · 2020-02-17T09:05:16

What is happening

When deploying your application and copying your ressources inside the src/main/ressources folder, you then expect Spring to render the front app for you. But Spring is a server, and as a server, it serves you given the configuration you gave him.

By using server.servlet.context-path=/api, you tell Spring : Everything will be prefixed by "/api"... Therefor, if you try requesting : http://localhost:8080/, Spring will tell you it knows nothing about such a URL, because for him, everything is supposed to be prefixed by /api...

So naturally, you would say : Then, let's access http://localhost:8080/api. But it is not that easy... I don't know yet exactly what is going on, but I guess you have index.html file inside your src/main/resources or src/main/resources/public... and when you try to access http://localhost:8080/api it will try to lookup for a file index.html inside src/main/resources/{public}/api/index.html... And it doesn't find any. Hence the exception.

Temporary solution

I've faced a similar issue with VueJS and Spring Boot. Without loosing too much time, my solution was to remove the properties server.servlet.context-path=/api and manually prefixing my controller with the annotation @RequestMapping.

@RestController
@RequestMapping("/api")
public class MyController {
    ...
}

It should do the trick, but I am not a big fan.

404 Page while running Spring and angular in same port

1 Answers

What is happening

Temporary solution