There is still one issue with the routing, which is on the backend this time. After we do a full installation via mvn install, and then start the application either using mvn spring-boot:run or java -jar target/app-0.0.1-SNAPSHOT.jar, we will see a blank page at http://localhost:8080 and 404 at http://localhost:8080/login.

The reason the root page is blank is because without matched request mapping at the root path, Spring Boot will automatically serve index.html that we copied into the src/main/resources/templates folder. You can open Chrome DevTools to check the requests in the Network tab. You will see the .js files and .css files are loaded. The blank page shows up because vue-router doesn't find any match Vue component to render.

The reason the login URL is 404 is that there is no request mapping added in Spring MVC. As far as Spring MVC is concerned, this URL doesn't exist, even though you can access it from webpack-dev-server. So, we can fix this by adding a handler in Spring MVC Controller to map to /login. And, besides the URL of the login page, we will have URLs for other pages (again, those are logical pages). And we will also need to map those URLs accordingly.

The good thing is that Spring MVC's request mapping supports multiple values. We can specify multiple paths for the same handler. Let's create a controller called com.taskagile.web.pages.MainController, which looks like the following:

@Controller
public class MainController {

  @GetMapping(value = {"/", "/login"})
  public String entry() {
    return "index";
  }
}

For now, we just keep only these two paths, and we will add more values to @GetMapping as needed in the future.

If we run a full build with the mvn clean install command and start the application as a whole, we should be able to access the login page now. And, since all tests have passed, let's commit the code and push to origin. The following is the commit of the changes in this section: