Here is the previous part of the article: Part 1
Create a View
Now we move to the “templates” folder and create a new HTML file that we call “index.html”. This will be the view rendered by the controller mapped on the root URL of the application, that is, ‘/’. For the moment we keep it minimal and we only include a title and welcome message in a h1 header tag.
The contents of this page will then be as follows:
Spring Boot web application example Spring Boot web application example
Create the Controller
At this point we only need to create the controller. Let’s start by adding a “controllers” package to our project
within which we create the class “HomeController.java”.
To indicate that the “HomeController.java” class represents a controller we have to annotate it with @Controller , in this way:
@Controller public class HomeController
In addition to this, we must also indicate the url this controller accepts the requests for. As we have said, this is the controller that handles calls addressed to the root of the application. To provide this indication, we must define a method that will handle such requests and use the @RequestMapping annotation to indicate which url map this method.
@RequestMapping("/") public String index(Model model) { return "index"; }
The controller method returns a String value that represents the name of the view to render and accept a parameter that represents the Model through which the controller can pass values to the view.
In our case, the view returned by the controller is the “index”, previously created under the “templates” folder. As the name of the view to render, we can only indicate “index” without any prefix as a path and without any suffix as extension. This is because this information are dynamically added by the default ViewResolver once we’ve enabled the thymeleaf spring boot starter. If we removed it, the views would not be so easy to identify and we should add a minimum of configuration.
The complete code of HomeController class will be as follows:
package net.davismol.springangulardemo.controllers; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; @Controller public class HomeController { @RequestMapping("/") public String index(Model model) { return "index"; } }
Run the Spring Boot application
At this point we are ready for a first run of our application. To do this, we right-click on the SpringBootAngular4ExampleApplication class that, as we have seen, is the starting point of our application, select “Run As” and then “Spring Boot App”.
The application initialization starts and in the log stream we can see that it is launched within the Tomcat container embedded in Spring Boot and runs on its default port, the 8080 :
2017-07-13 16:28:18.965 INFO 16244 --- [ main] s.b.c.e.t.TomcatEmbeddedServletContainer : Tomcat initialized with port(s): 8080 (http) 2017-07-13 16:28:19.001 INFO 16244 --- [ main] o.apache.catalina.core.StandardService : Starting service [Tomcat] 2017-07-13 16:28:19.002 INFO 16244 --- [ main] org.apache.catalina.core.StandardEngine : Starting Servlet Engine: Apache Tomcat/8.5.15
At a certain point, since in the setup phase of the project we said we would use MongoDB, checking it in the list of Spring Boot starters to import, the application tries to connect to a MongoDB database.
Having not yet provided any configuration parameter to the MongoDB instance in the application.properties file, the application looks for a MongoDB instance in localhost, on its default port that is 27017 . Not finding any available database, an exception is thrown:
com.mongodb.MongoSocketOpenException: Exception opening socket at com.mongodb.connection.SocketStream.open(SocketStream.java:63) ~[mongodb-driver-core-3.4.2.jar:na] at com.mongodb.connection.InternalStreamConnection.open(InternalStreamConnection.java:115) ~[mongodb-driver-core-3.4.2.jar:na] at com.mongodb.connection.DefaultServerMonitor$ServerMonitorRunnable.run(DefaultServerMonitor.java:113) ~[mongodb-driver-core-3.4.2.jar:na] at java.lang.Thread.run(Unknown Source) [na:1.8.0_65] Caused by: java.net.ConnectException: Connection refused: connect at java.net.DualStackPlainSocketImpl.waitForConnect(Native Method) ~[na:1.8.0_65] at java.net.DualStackPlainSocketImpl.socketConnect(Unknown Source) ~[na:1.8.0_65] at java.net.AbstractPlainSocketImpl.doConnect(Unknown Source) ~[na:1.8.0_65] at java.net.AbstractPlainSocketImpl.connectToAddress(Unknown Source) ~[na:1.8.0_65] at java.net.AbstractPlainSocketImpl.connect(Unknown Source) ~[na:1.8.0_65] at java.net.PlainSocketImpl.connect(Unknown Source) ~[na:1.8.0_65] at java.net.SocksSocketImpl.connect(Unknown Source) ~[na:1.8.0_65] at java.net.Socket.connect(Unknown Source) ~[na:1.8.0_65] at com.mongodb.connection.SocketStreamHelper.initialize(SocketStreamHelper.java:57) ~[mongodb-driver-core-3.4.2.jar:na] at com.mongodb.connection.SocketStream.open(SocketStream.java:58) ~[mongodb-driver-core-3.4.2.jar:na] ... 3 common frames omitted
Despite this error the application initialization continues, until we get an indication that it is started:
2017-07-13 16:28:28.201 INFO 16244 --- [ main] d.s.SpringBootAngular4ExampleApplication : Started SpringBootAngular4ExampleApplication in 19.847 seconds (JVM running for 25.302)
At this point, if we open the browser on localhost on the 8080 port, we can see that our application is running because it shows us the view that we previously created and mapped on the root of the application itself.
Although as we have seen it does not cause problems, in order to avoid the connection failure to MongoDB during the application start-up, we can for the moment comment out the dependence to his Spring Boot “starter” in the Maven project POM file.
org.springframework.boot spring-boot-starter-web org.projectlombok lombok true org.springframework.boot spring-boot-starter-test test org.springframework.boot spring-boot-starter-thymeleaf
In this way the application will not attempt to automatically connect to a local MongoDB instance on the default port 27017 and the exception will not be thrown.
We will restore the dependency on this Spring Boot starter when we would have installed MongoDB on the machine.
Go to the next part of the article: Part 3
Pingback: Create a modern web application with Spring Boot, MongoDB, Angular 4 and TypeScript and deploy it in cloud as Microsoft Azure Webapp – Part 1 | Dede Blog
Pingback: Create a modern web application with Spring Boot, MongoDB, Angular 4 and TypeScript and deploy it in cloud as Microsoft Azure Webapp – Part 3 | Dede Blog