Create a modern web application with Spring Boot, MongoDB, Angular 4 and TypeScript and deploy it in cloud as Microsoft Azure Webapp – Part 2

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

06 - Spring Boot project Create index view

Create the Controller

At this point we only need to create the controller. Let’s start by adding a “controllers” package to our project
07 - Spring Boot example Create new package for controllerswithin 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";
	}
}

09 - Spring Boot example home controller root

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”.
10 - Spring Boot example first application runThe 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

11 - Spring Boot example application startedAt 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

12 - Spring Boot example application error starting mongodb not running 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.
13 - Spring Boot example application running on localhostAlthough 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.

13b - Spring Boot example application no mongodb error remove dependencyWe 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

This entry was posted in $1$s. Bookmark the permalink.

2 thoughts on “Create a modern web application with Spring Boot, MongoDB, Angular 4 and TypeScript and deploy it in cloud as Microsoft Azure Webapp – Part 2

  1. 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

  2. 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

Leave a Reply

Your email address will not be published. Required fields are marked *