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:
In the project root you must include a file named proxy.conf.json containing:
{
"/api": {
"target": "http://localhost:8080",
"secure": false
}
}
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.
