BOTTE ANGULAIRE ET À RESSORT COMME UNE SEULE APPLICATION

août 30, 2021

Angular et Spring Boot en tant qu'application unique

Prérequis : Expérience en Spring Boot, Gradle et Angular.

Concept :

Ce blog vous permettra de comprendre comment créer du code Angular et Java en tant que WAR unique /JAR en utilisant Gradle.

Qu'est-ce que Spring Boot ?

Spring Boot est une application autonome qui réduit plusieurs étapes de développement fastidieuses ainsi que le code et la configuration passe-partout. Il nous aide à créer une application Web en tant que fichier JAR autonome avec aucune configuration XML et un serveur Web intégré. Il regroupe également l'application avec toutes les dépendances nécessaires.

Qu'est-ce qu'Angular ?

Angular est une plate-forme et un framework permettant de créer des applications clientes d'une seule page à l'aide de HTML et de TypeScript. Angular est écrit en TypeScript. Il implémente des fonctionnalités de base et facultatives sous la forme d'un ensemble de bibliothèques TypeScript que vous importez dans vos applications.

Créons une application Spring Boot qui encapsule le projet Angular avec Java (backend) à l'aide de scripts de génération Gradle.

Technologies utilisées :

Spring Boot 2.4.1 RELEASE
H2 Database
Spring Data JPA
Tomcat Embed 9.0.41
Gradle 6.7.1
Java 8
Bootstrap

Pour ce projet, Spring Tools Suit est utilisé comme IDE. Voici les étapes à suivre pour créer l'application.

Créer un projet Spring Starter avec la base de données H2, Spring Data JPA et les dépendances Spring Web.

plugins { identifiant 'org.springframework.boot' version '2.4.1' id 'io.spring.dependency-management' version '1.0.10.RELEASE' identifiant 'java' } appliquer le plugin: 'war' groupe = 'org.objectif' version = '0.0.1-INSTANTANÉ' sourceCompatibilité = '1.8' référentiels { mavenCentral() } tâche deleteStaticFolder(type : Supprimer) { def dirName = "src/main/resources/static" file( dirName ).list().each{ f -> supprimer "${dirName}/${f}" } } processResources.dependsOn('application-frontend:build') dépendances { implémentation 'org.springframework.boot:spring-boot-starter-data-jpa' implémentation 'org.springframework.boot:spring-boot-starter-web' runtimeOnly 'com.h2database:h2' testImplementation 'org.springframework.boot:spring-boot-starter-test' } test { utiliserJUnitPlatform() }

Créez un autre script Gradle dans le projet Angular pour créer le projet Angular

plugins {
  identifiant "com.github.node-gradle.node" version "3.0.0-rc6"
}

version '0.0.1'

nœud {
  version = '14.15.4'
  npmVersion = '6.14.10'
  télécharger = vrai
  workDir = file("${project.buildDir}/node")
  nodeModulesDir = file("${project.projectDir}")
}



création de tâche (type : NpmTask) {
  arguments = ['run', 'build']
}

//build.dependsOn(npm_install)
//frontend:build sera exécuté avant le processResources

Créez un fichier de paramètres Gradle dans le projet Spring Boot qui définit les noms du projet racine et du projet interne.

{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version 1, "newProjectRoot": "projets", "projets": { "application-frontend": { "projectType": "application", "schémas": {}, "racine": "", "sourceRoot": "src", "préfixe": "application", "architecte": { "construire": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "../src/main/resources/static", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.app.json", "aot": vrai, "les atouts": [ "src/favicon.ico", "src/assets"