[FIXED] Integrating Spring boot server and Angular CLI application into a single executable

Issue

I have designed a solution in which spring boot application comprises of websocket functionality receives socket connection from client as wells consumes REST API calls from the Angular CLI application.

right now Spring boot runs separately, and angular CLI executes individually (npm start).

Any idea i can integrate the both into a single executable like dist war or something so that i can start both and run both..

Solution

I have a project that uses Spring boot as backend and angular in the front. I serve the angular using Spring. So, it is possible to generate .jar or .war as you want.

The way I integrate it is the following: to serve angular in spring, you need to build your project with ng build --prod and copy all files generated here to the static folder in spring. Nonetheless, you need to adjust the routes, that is, defining the angular and spring responsabilities.

To adjust the routes, you may include the following configuration:

@Configuration
public class AngularConfig implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {

      registry.addResourceHandler("/**/*")
        .addResourceLocations("classpath:/static/")
        .resourceChain(true)
        .addResolver(new PathResourceResolver() {
            @Override
            protected Resource getResource(String resourcePath,
                Resource location) throws IOException {
                Resource requestedResource = location.createRelative(resourcePath);
                return requestedResource.exists() && requestedResource.isReadable() ? requestedResource
                : new ClassPathResource("/static/index.html");
            }
        });
      
    }
}

In dev phase, it is very boring to build angular. So, it's very desired using ng serve (with the spring server up, of course). As angular cli serves on localhost:4200 and spring on localhost:8080, you have to make a proxy between the address (I guess you've already done that, but in any case...)

1. In the project root you must include a file named proxy.conf.json containing:

   { "/api": { "target": "http://localhost:8080", "secure": false } }

2. Next, in the file package.json, replace "start": "ng serve" to "start": "ng serve --proxy-config proxy.conf.json"

There you go! It should works.

Finally, it's very boring copy and paste the build. So, if you're using maven, you can include a rule to make it for you every time you start spring. Put it in your pom.xml:

<build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
            <plugin>
                <artifactId>maven-resources-plugin</artifactId>
                <executions>
                      <execution>
                          <id>copy-resources</id>
                          <phase>validate</phase>
                          <goals><goal>copy-resources</goal></goals>
                          <configuration>
                              <outputDirectory>${basedir}/src/main/resources/static/</outputDirectory >
                              <resources>
                                  <resource>
                                      <directory>${basedir}/../frontend/dist</directory >
                                  </resource>
                              </resources>
                          </configuration>
                      </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

Of course, you should set the paths according to your project.

After build angular and execute the spring. If you're using maven, just do: mvn package.

Answered By - André Pacheco
Answer Checked By - Timothy Miller (JavaFixing Admin)