CODEWITHSUNDEEP
javaspringspring-mvcspring-boot
Mehrdad Abdolghafari
Mehrdad Abdolghafari

Reputation: 355

How seperate Front-End & Back-End machine in spring-boot?

I want to separate Back-End and Front-End(HTML Pages) machines.The back-end will be developed by Spring-Boot. How can return View in controllers to Front-End machine instead of "resources/template" in Back-End(Spring-Boot--->Apache Tomacat) machine?

For example :

@Controller
public class GreetingController {

    @RequestMapping("/greeting")
    public String greeting(@RequestParam(value="name", required=false,  defaultValue="World") String name, Model model) {
        model.addAttribute("name", name);
        return "greeting";
    }

}

I want to put "greeting" view in another server (Front-End).

Upvotes: 5

Views: 6998

Answers (4)

Josias Youmbi
Josias Youmbi

Reputation: 12

It's possible to do that with REST-Web-Service but the goal from Thymeleaf isn't to work alone as frontend App. If you absolutly need to have a separated frontend App you should user any moderne js framework such as Angular/React/Vue and use spring boot for rest api.

Upvotes: 0

Young K. Jun
Young K. Jun

Reputation: 411

You may need to implement a/the WebMvcConfigurerAdapter interface.

This is a code sample:

@Configuration
public class StaticResourceConfiguration extends WebMvcConfigurerAdapter {

    @Value("${spring.thymeleaf.prefix}")
    private String thymeleafTemplatePath;


    @Value("${node_modules.path}")
    private String nodeModulesPath;

    public void addResourceHandlers(ResourceHandlerRegistry registry){

        if (thymeleafTemplatePath != null && !thymeleafTemplatePath.isEmpty()){
            if (!registry.hasMappingForPattern("/**")) {
                registry.addResourceHandler("/**")
                        .addResourceLocations(thymeleafTemplatePath);
            }
        }

        if (nodeModulesPath != null && !nodeModulesPath.isEmpty()){
            if (!registry.hasMappingForPattern("/node_modules/**")) {
                registry.addResourceHandler("/node_modules/**")
                        .addResourceLocations(nodeModulesPath);
            }

        }
    }
}

The following code is for a configuration variable in a property file.

This example has a Windows file path pattern. You may need to change the pattern for your environment.

spring.thymeleaf.prefix=file:///C:/Users/young.k.jun/workspaces/separated-front-end/front-end/src/
node_modules.path=file:///C:/Users/young.k.jun/workspaces/separated-front-end/front-end/node_modules/

I made a sample project to separate front-end and back-end workspace so as not to conflict with their work directories.

Please refer to this link. You can find a GitHub link on that page.

Upvotes: 0

Mrityunjaya
Mrityunjaya

Reputation: 93

You can start two servers, one for backend and the other for frontend. The two would be communicating via REST call. The Backend server will give the data to frontend server, which will collect it and send it to html templates in the frontend server. The template engine integration would save you time in getting things done. Springboot has good integration with Thymeleaf so I would recommend you to use the same.

It's actually quite simple after you have the prototype ready. I have made the prototype for frontend and backend separated springboot applications. The template engine used here is thymeleaf, database is mysql and language is java. You can remove the unneeded part and start with your work!

Upvotes: 2

luboskrnac
luboskrnac

Reputation: 24571

You didn't disclose which templating technology are you using (e.g. JSP, Thymeleaf, ...), but either way Spring needs to inject your variables from model into HTML templates.

AFAIK, there is no way to host views in one JVM and controller filling it on other JVM. You could extract your views into separate JAR, but it would need to be hosted on same Servlet container at the end of the day.

If you want true separation of client and server, investigate templating on client (Single Page Applications) and using just AJAX for fetch the data from REST back-end.

Upvotes: 2

Related Questions