Configure Spring Boot for SPA frontend

Question

I have application where whole frontend part is laying in resource. I would like to separate things apart. And have separate server for UI, provided by gulp, for example.

Answer 1

If you are using Angular with Spring Data Rest, I think that the most straightforward way to do it is using angular hash location strategy.

Just putting this in the providers array in your app module:

{ provide: LocationStrategy, useClass: HashLocationStrategy }

and, obviously, import it.

Answer 2

For routing, according to this guide at Using "Natural" Routes (specifically here), you have to add a controller that does the following:

@Controller
public class RouteController {
    @RequestMapping(value = "/{path:[^\\.]*}")
    public String redirect() {
        return "forward:/";
    }
}

Then using Spring Boot, the index.html loads at /, and resources can be loaded; routes are handled by Angular.

Answer 3

EpicPandaForce has a great answer, and I wanted to expand on it. The following endpoint will allow matching on nested routes as well. If you wanted to have an admin section, you can configure it to return a different index.html.

@Controller
class PageController {

    @GetMapping("/**/{path:[^\\.]*}")
    fun forward(request: HttpServletRequest): String? {
        if(request.requestURI.startsWith("/admin")) {
            return "forward:/admin/index.html"
        }
        return "forward:/index.html"
    }
}

This RequestMapping (or @GetMapping) works by excluding any request that contains a period (i.e. "index.html").