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

Spring Boot and Angular 4 Web Application Architecture LayersIn questa nuova serie di articoli vedremo come creare una semplice web application utilizzando Spring Boot come framework di accelerazione per lo sviluppo del back-end e dei servizi REST, MongoDB come database NoSQL e Angular 4, con il supporto di TypeScript, come framework javascript per il front-end.

Volendo provare a schematizzare, potremmo mappare questa lista di tecnologie sui vari livelli del classico diagramma di descrizione di un’architettura multi-tier, ottenendo il risultato illustrato nell’immagine qui a destra.

Infine, ne effettueremo poi il deploy su Azure, la piattaforma cloud di Microsoft, utilizzando una Azure Webapp come contenitore per la nostra applicazione Spring Boot e una serie di Virtual Machines su cui installeremo il nostro MongoDB Replica Set.
Lo schema seguente descrive, ad alto livello, quella che sarà l’architettura fisica della nostra soluzione deployata su Azure.Spring Boot and MongoDB Application on Microsoft Azure physical architecture

Bene, possiamo iniziare!

Che cos’è Spring Boot?

Spring Boot è un framework per lo sviluppo di applicazioni web basate su stack Java che offre, grazie alle sue convenzioni e ai suoi cosiddetti “starters”, un ulteriore livello di astrazione, soprattutto in termini di setup e configurazione del progetto e di gestione delle dipendenze, rispetto all’utilizzo di Spring Framework. Esso permette, in questo modo, di ridurre ulteriormente i tempi necessari per l’implementazione e la distribuzione delle proprie soluzioni.

Man mano che andremo avanti nell’articolo vedremo tutti i vantaggi che l’utilizzo di Spring Boot introduce nello sviluppo di una web application, mentre per ora ci limitiamo a questa prima lista delle sue caratteristiche principali.

Spring Boot infatti:

  • Mette a disposizione una lunga lista di “starters” che permettono di inserire all’interno delle proprie soluzioni le librerie più comunemente utilizzate con il minimo sforzo e senza doversi preoccupare delle ulteriori dipendenze a valle
  • Permette di creare una webapp come un semplice pacchetto Java eseguibile in formato jar, che può essere quindi lanciato come programma standalone, in quanto embedda un container come Tomcat o Jetty all’interno del quale fa girare l’applicazione (sebbene sia comunque possibile produrre un war da deployare in servlet container esterno preventivamente installato e configurato)
  • Permette di effettuare la configurazione delle principali librerie e framework comunemente utilizzati nello sviluppo semplicemente valorizzando le opportune proprietà pre-definite all’interno del suo file di configurazione “application.properties”. Proprietà per cui, come vedremo più avanti, il suo IDE di sviluppo “Spring Tool Suite” fornisce direttamente la funzionalità di ricerca e autocompletamento.

Spring Tool Suite

Spring Boot è provvisto di un suo ambiente di sviluppo dedicato chiamato “Spring Tool Suite” che, in realtà, altro non è che una versione opportunamente customizzata di Eclipse.

Come prima cosa quindi, procediamo con l’installazione di questo ambiente. E’ possibile scaricare “Spring Tool Suite” dal sito https://spring.io/tools e, una volta effettuato il download, basta seguire la procedura di installazione
00 - Spring Tool Suite Installation

Creare un nuovo progetto Spring Boot

Una volta installato l’ambiente “Spring Tool Suite” possiamo procedere con il creare il nostro primo progetto Spring Boot.
Per farlo selezioniamo dal menù la voce “File” -> “New” -> “Spring Starter Project”, come illustrato nella figura seguente
01 - New Spring Starter Projecte inseriamo il nome del progetto, ad esempio “SpringBootAngular4Example” e le sue caratteristiche.
In particolare, indichiamo che:

  • Si tratterà di un progetto Maven
  • Dovrà essere impacchetato come un file jar
  • Utilizzerà la versione 1.8 di Java

02 - New Project Configuration Cliccando su “Next”, passiamo alla schermata successiva del wizard di creazione del progetto, che ci chiede quali moduli “starters” vogliamo inizialmente aggiungere come dipendenze.

Per il nostro esempio selezioniamo:

  • Web: aggiunge una serie di pacchetti “base” necessari per lo sviluppo di una web application basata su spring (spring-web, spring-mvc, jackson, ecc)
  • MongoDB: aggiunge “spring-data-mongodb” al nostro progetto
  • Thymeleaf: è uno dei template engine supportati da Spring Boot. In realtà noi non lo useremo in quanto tale, visto che svilupperemo la parte di front-end con Angular 4 ma lo includiamo solo per poter beneficiare della sua configurazione per la risoluzione dei nomi delle view ed evitare di scrivere codice di configurazione ad hoc.
  • Lombok: utile per ridurre ulteriormente la quantità di boilerplate code nella definizione dei nostri POJO

L’immagine sottostante mostra la selezione delle dipendenze indicate:
03 - New Project initial dependenciesCliccando su “Finish” completiamo la creazione del progetto che, a questo punto, comparirà nella sezione “Package Explorer” del nostro ambiente di sviluppo con la tipica struttura di un progetto Maven, come possiamo vedere dalla figura qui sotto:
03b - Spring Tool Suite New Project structure package explorerCome possiamo vedere, nel progetto sono state create:

  • La classe SpringBootAngular4ExampleApplication.java che rappresenta il punto di ingresso della nostra applicazione
  • Le cartelle static e templates sotto al folder delle risorse src/main/resources
  • Un file application.properties

Se apriamo la classe FirstSpringBootApplication.java vediamo che il suo contenuto è il seguente:

package net.davismol.springangulardemo;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class SpringBootAngular4ExampleApplication {
	public static void main(String[] args) {
		SpringApplication.run(SpringBootAngular4ExampleApplication.class, args);
	}
}

@SpringBootApplication è un’annotazione di Spring Boot che racchiude le annotazioni @Configuration, @EnableAutoConfiguration e @ComponentScan per la configurazione con i parametri di default.

Il main contiene invece una chiamata al metodo statico “run” della classe SpringApplication che manda di fatto in esecuzione l’applicazione.
04 - First project createdSe apriamo invece il file POM di Maven “pom.xml” vediamo che sono definite al suo interno le seguenti dipendenze, relative ai moduli “starters” che avevamo selezionato in fase di creazione del progetto:

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

05 - New project POM dependenciesCiascun “starters” di Spring Boot contiene un file chiamato “spring.provides” che contiene l’elenco delle librerie che lo starter stesso contiene.

Ad esempio, per vedere quali sono i pacchetti che contiene lo starter “spring-boot-starter-web”, cerchiamo il relativo jar tramite il Package Explorer all’interno dell’elenco delle “Maven Dependencies” e, cliccandoci ed entrando nella cartella “META-INF”, troviamo il file “spring-provides”. Aprendolo con un doppio click possiamo vedere il suo contenuto:

<strong>provides: spring-webmvc,spring-web,jackson-databind</strong>

05b - Spring Boot starters jar spring-provides

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 2

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

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

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

  2. Pingback: Creare una semplice web application con JAVA, Eclipse, Tomcat, Hibernate e PostgreSQL – Parte #4 | Dede Blog

  3. Pingback: Creare una semplice web application con JAVA, Eclipse, Tomcat, Hibernate e PostgreSQL – Parte #5 | Dede Blog

Leave a Reply

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