Build angular 11 with Spring boot 2.x in one single jar

Question

I am facing an issue bulding an angular 11 with Springboot jar. If I runn separatelly the apps (the backend on 8080 and the ui on 4200) they work just fine, the connection and calls in between are ok and stable.

What I am trying to do is actually integrate this. I've seen plenty of examples but I don't know where and what Am I doing wrong.

Here is a picture of the Project structure:

Here are the maven plugins which are installing and copying the ui build stuff into the jar.

   <plugin>
        <groupId>com.github.eirslett</groupId>
        <artifactId>frontend-maven-plugin</artifactId>
        <version>${frontend-maven-plugin.version}</version>
        <configuration>
            <nodeVersion>${node.version}</nodeVersion>
            <workingDirectory>${frontendSrcDir}</workingDirectory>
            <installDirectory>${project.build.directory}</installDirectory>
            <environmentVariables>
                <CI>true</CI>
            </environmentVariables>
            <!--suppress UnresolvedMavenProperty -->
            <skip>${skip.ui}</skip>
        </configuration>
        <executions>
            <execution>
                <id>install-frontend-tools</id>
                <goals>
                    <goal>install-node-and-npm</goal>
                </goals>
                <configuration>
                    <nodeVersion>v14.16.0</nodeVersion>
                    <npmVersion>6.14.13</npmVersion>
                </configuration>
            </execution>
            <execution>
                <id>npm-install</id>
                <goals>
                    <goal>npm</goal>
                </goals>
                <configuration>
                    <arguments>install</arguments>
                </configuration>
            </execution>
            <execution>
                <id>build-frontend</id>
                <goals>
                    <goal>npm</goal>
                </goals>
                <phase>prepare-package</phase>
                <configuration>
                    <arguments>run build --prod</arguments>
                </configuration>
            </execution>
        </executions>
    </plugin>
    <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-resources-plugin</artifactId>
        <executions>
            <execution>
                <id>angular-build</id>
                <goals>
                    <goal>copy-resources</goal>
                </goals>
                <phase>validate</phase>
                <configuration>
                    <outputDirectory>${project.build.outputDirectory}/static</outputDirectory>
                    <resources>
                        <resource>
                            <directory>${frontendSrcDir}/dist/ui</directory>
                        </resource>
                    </resources>
                </configuration>
            </execution>
        </executions>
    </plugin>

In the jar the build files are copied under jar/BOOT-INF/classes/static. Here is the image

What Am I missing?

Answer 1

Spring boot automatically serves static content if you have a folder in "resources" called "static" or "public". So put all of the compiled files from angular in a folder called "static" under resources.

Doing so will make spring boot serve angular :)

Answer 2

In @Aborgh answer,

So put all of the compiled files from angular in a folder called "static" under resources.

That is correct, and I am just adding some more. Specifically, when you run the build command such as npm build, it generates static files such as xxx.html, xxx.js, xxx.css in the dist folder.

So you want to copy all the files under dist and paste them into your Springboot project, place them right into the resources/static folder.

---

Not relevant to your question, but I would recommend you put the static files somewhere separated from your Springboot backend application. Try reverse proxies such as Nginx so you can resolve requests such as https://example.com/api/xxx to your Springboot backend application and all other requests such as https://example.com/foo/xxx to your frontend Angular views.