In Chapter 2, Vue.js 2 - It Works in the Way You Expected, we created the frontend and used http-server to serve the index.html file and the static .js assets. When the integration is done, the embedded Tomcat server will serve these files. Now, let's move the frontend code to the backend.
Besides putting the frontend and the backend together in a single project and deploying it as a whole, you can also keep them separated and deploy them separately so that the team can benefit from this decoupling when they need to work on each end independently. In this book, we will keep both ends together.
As mentioned earlier in the Spring MVC section, when requests come in, they go through Filter and DispatcherServlet objects and then arrive at Controller objects. In our Messages App, we have two types of request—one is for rendering the UI and the other is for API requests, such as retrieving JSON messages and saving new messages.
Now, let's add an index() handler method to MessageController to render the UI so that you can open the app via http://localhost:8080/messages:
@Controller
public class MessageController {
...
@GetMapping("/messages")
public String index() {
return "index";
}
...
}
As you can see, the index() handler method is quite simple. It simply returns the view's name. And we will need to put the index.html file from the frontend code to resources/templates/index.html. For those static .js assets, we will need to put them into the resources/static directory. In this way, when you request http://localhost:8080/vue.js, Spring Boot will serve resources/static/vue.js.
The resources/static directory looks like this after moving the static .js assets inside:
resources/static/components
resources/static/directives
resources/static/filters
resources/static/mixins
resources/static/plugins
resources/static/axios.v0.18.0.min.js
resources/static/vue.js
And the resources/templates directory looks like this:
resources/templates/index.html
resources/templates/welcome.html