Creare una web application con Spring Boot, MongoDB, Angular 4 e TypeScript e deployarla in cloud come Microsoft Azure Webapp – Parte 2

Qui la parte precedente dell’articolo: Creare una web application con Spring Boot, MongoDB, Angular 4 e TypeScript e deployarla in cloud come Microsoft Azure Webapp – Parte 1

Creare una View

Ora ci spostiamo nel folder “templates” e creiamo un nuovo file HTML che chiamiamo “index.html”. Questa sarà la view renderizzata dal controller mappato sull’URL root dell’applicazione, cioè su ‘/’. Per il momento la teniamo minimale e inseriamo soltanto un titolo e un messaggio di benvenuto in un tag header h1.

Il contenuto di questa pagina sarà quindi il seguente:

<!DOCTYPE html>
<html>
   <head>
      <title>Spring Boot web application example</title>
   </head>
   <body>
      <h1>Spring Boot web application example</h1>
   </body>
</html>

06 - Spring Boot project Create index view

Creare il Controller

A questo punto ci manca solo da creare il controller. Iniziamo aggiungendo un package “controllers” al nostro progetto
07 - Spring Boot example Create new package for controllersall’interno del quale creiamo la classe “HomeController.java”.

Per indicare che la classe “HomeController.java” rappresenta un controller dobbiamo annotarla con @Controller, in questo modo:

@Controller
public class HomeController

Oltre a questo, dobbiamo indicare anche qual è l’url per il quale questo controller accetta le richieste. Come abbiamo detto, questo rappresenta il controller che si occupa di gestire le chiamate indirizzate alla root dell’applicazione. Per fornire questa indicazione dobbiamo definire un metodo che gestirà tali richieste e utilizzare l’annotazione @RequestMapping per indicare quale url mappa questo metodo.

@RequestMapping("/")
public String index(Model model)
{
	return "index";
}

Il metodo del controller restituisce un valore String, che rappresenta il nome della view da renderizzare e accetta un parametro che rappresenta il Model tramite cui il controller può passare dei valori alla view.

Nel nostro caso, la view ritornata dal controller è la “index” creata precedentemente sotto la cartella “templates”. Come nome della vista da renderizzare possiamo indicare solo “index” senza nessun prefisso come path e senza nessun suffisso come estensione. Questo perché tali informazioni vengono aggiunte dinamicamente dal ViewResolver utilizzato di default una volta che abbiamo abilitato lo starter “thymeleaf”. Se lo rimuovessimo, le views non sarebbero identificabili in maniera così semplice e bisognerebbe aggiungere un minimo di configurazione.

Il codice completo della classe HomeController sarà il seguente:

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

Eseguire l’applicazione Spring Boot

A questo punto siamo pronti per una prima esecuzione della nostra applicazione. Per farlo clicchiamo con il tasto destro del mouse sulla classe SpringBootAngular4ExampleApplication che, come abbiamo visto, rappresenta il punto di partenza della nostra applicazione, selezioniamo “Run As” e poi “Spring Boot App”.
10 - Spring Boot example first application runParte quindi l’inizializzazione dell’applicazione e, nella sequenza di log, possiamo vedere come essa venga lanciata all’interno del container Tomcat embeddato da Spring Boot e messa in esecuzione sulla sua porta di default, la 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 startedAd un certo punto, siccome in fase di set up del progetto abbiamo detto che avremmo utilizzato MongoDB, checkandolo nei moduli starters di Spring Boot da importare, l’applicazione cerca di connettersi ad un database.

Non avendo fornito ancora nessun parametro di configurazione all’istanza di MongoDB nel file application.properties, l’applicazione cerca un’istanza di MongoDB in localhost, sulla sua porta di default che è la 27017. Non trovandolo viene scatenata un’eccezione che evidenza l’impossibilità a connettersi ad essa:

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 Nonostante questo errore l’inizializzazione dell’applicazione prosegue, fino a quando otteniamo l’indicazione che essa è avviata:

2017-07-13 16:28:28.201  INFO 16244 --- [           main] d.s.SpringBootAngular4ExampleApplication : Started SpringBootAngular4ExampleApplication in 19.847 seconds (JVM running for 25.302)

A questo punto, se apriamo il browser su localhost e sulla porta 8080, possiamo vedere che la nostra applicazione è in esecuzione perché ci viene mostrata la view che abbiamo precedentemente creato e mappato sull’url root dell’applicazione.
13 - Spring Boot example application running on localhostSebbene come abbiamo visto non dia problemi, al fine di evitare l’errore di connessione a MongoDB allo start-up dell’applicazione possiamo per il momento commentare la dipendenza dal suo “starter” Spring Boot nel file POM di Maven.

	<dependencies>
<!-- 		<dependency> -->
<!-- 			<groupId>org.springframework.boot</groupId> -->
<!-- 			<artifactId>spring-boot-starter-data-mongodb</artifactId> -->
<!-- 		</dependency> -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<dependency>
			<groupId>org.projectlombok</groupId>
			<artifactId>lombok</artifactId>
			<optional>true</optional>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
	</dependencies>

In questo modo, l’applicazione non tenterà di connettersi automaticamente ad un’istanza di MongoDB locale sulla porta di default 27017 e non verrà scatenata la relativa eccezione.
13b - Spring Boot example application no mongodb error remove dependencyRipristineremo la dipendenza dallo starter quando avremo installato MongoDB sulla macchina.

Vai alla parte successiva dell’articolo: Creare una web application con Spring Boot, MongoDB, Angular 4 e TypeScript e deployarla in cloud come Microsoft Azure Webapp – Parte 3

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

2 thoughts on “Creare una web application con Spring Boot, MongoDB, Angular 4 e TypeScript e deployarla in cloud come Microsoft Azure Webapp – Parte 2

  1. Pingback: Creare una web application con Spring Boot, MongoDB, AngularJS 4 e TypeScript e deployarla in cloud come Microsoft Azure Webapp – Parte 1 | Dede Blog

  2. Pingback: Creare una web application con Spring Boot, MongoDB, AngularJS 4 e TypeScript e deployarla in cloud come Microsoft Azure Webapp – Parte 3 | Dede Blog

Leave a Reply

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