How to serve the static html/css/img's to the browser?

[stefanesterer]

Is there an easier way to serve the static web resources (like index.html, css, javascript, ...) to the browser than creating a spring boot application and serve them with RestController there? Wouldn't it be nice to have two maven projects, one for frontend and one for backend?

[niwtro]

I would also try the easy spring boot / REST way for the backend, maybe separated into two modules one for the business logic and one for the web-/ REST API, which could then also be used by other client implementations. Than we could make a third module for a Spring Boot App serving the static HTML sources. If we agree on the HTML client approach, the App could also be used to publish the REST endpoints in the first place.

[stefanesterer]

I could implement a simple SubscriptionController via a spring boot maven project and you could start on the html client if you want?

[niwtro]

Sounds great! What about latest Angular for the frontend?

[stefanesterer]

the basic backend logic is there, now we need a client ;-) hint hint

[niwtro]

There now is a simple Angular client. It uses bootstrap 4 and ng-bootstrap.

[stefanesterer]

And how do we serve it to the user?

[LProemer]

You want thymeleaf for the html. Otherwise they must lay in classpath to load properly.

setup thymeleaf to be: spring.thymeleaf.cache=false spring.thymeleaf.prefix=classpath:/static/ spring.thymeleaf.content-type=text/html spring.thymeleaf.encoding=UTF-8 spring.thymeleaf.check-template-location=true spring.thymeleaf.check-template=true spring.thymeleaf.suffix=.html

.angular-cli.json must set the outDir to target/classes/static/

Now the css and images should already load correctly relativ to static folder.

For the pages you need a Controller.

@Controller public class FrontendController { @RequestMapping({"/", "/**"}) public ModelAndView handle(HttpServletRequest request) { return new ModelAndView("index"); } }

Now evry page should point to index. In the Anfular index file change the base-href to: <base th:href="@{'/'}" href="/"/>

This way Angular will inherit the working context from the server as base-href.

This are the tactics that worked best so far.

[stefanesterer]

I would like to be able to deploy the frontend independently from the backend. Can't I just put the static html/js/css/... stuff on a simple web server like apache on the same domain?

[LProemer]

Just think of angular as a normal html-page. evry resource you could reach from a normal html page you will be able to reach from angular. Just keep an eye on the base href. ;)

You can also use the assets folder of angular for static resources. Wich is propaply best practice.