Build Angular application with Spring boot

Question

I want to build an Agular application, but I don't know how to build a project structure.

I have found 2 ways to build the Application. The first way that I chose was to build together Spring boot application and Angular application. The Second way was to build separate projects. With the first way, I can get access to static resources easily, but I think It is not a good way. With the second way, It is good because I can use Spring boot application for web and mobile clients.

Do I need suggestions on how to build spring-agular like projects? The basic problem is how to use effectively static resources in an angular project?

Answer 1

I have a project that uses Spring boot as backend and angular in the front. For us, it was better to serve angular using the spring boot. But you can do it in another way.

In a brief, spring boot works as an API to make CRUD, authentication, and others tasks we need. 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 and make a proxy (I'll show it).

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 up, of course). As angular cli serves on localhost:4200 and spring on localhost:8080 , you have to make a proxy between the address:

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.

TL;DR: you can work with to projects in the dev phase and include the build in the spring for production.

If you have any further question, let me know! Good luck.

Answer 2

My personal suggestion;

JHipster is a development platform to generate, develop and deploy Spring Boot + Angular/React Web applications and Spring microservices.