Construction d’un WebBundle Angular pour Apache Karaf

Construction d’un WebBundle Angular pour Apache Karaf

Apache Karaf™ est un conteneur d’applications complet qui peut supporter plusieurs modèles de programmation comme OSGi, DS, Blueprint, Spring… De même, il est un conteneur d’application web complet au même titre qu’Apache Tomcat™ et offrant des fonctionnalités uniques. S’il supporte WAR, il prend en compte également le WebBundle (Bundle avec un header spécifique).

Pour le frontend des applications web, Angular est un framework populaire utilisé en complément de Bootstrap. Il est possible de coder Angular manuellement bien que les développeurs web utilisent des IDE (environnement de développement) comme WebStorm. Dans tous les cas, Angular CLI est un outil basique de développement et de test pour votre application Angular

Adaptation de l’article :  « Building Angular WebBundle for Apache Karaf» du blog Nanthrax écrit par Jean-baptiste Onofré (Technical Advisor)

Un projet avec Angular CLI

Angular CLI vous aide à démarrer très rapidement votre projet sous Angular. Vous pouvez lancer l’environnement avec la commande suivante : ng new

yupiik-angular-cli-karaf-expertise-apache-webbundle

Ensuite, CLI créé les ressources nécessaires :

create test-frontend/README.md (1028 bytes)   
create test-frontend/.angular-cli.json (1248 bytes)   create test-frontend/.editorconfig (245 bytes)   create test-frontend/.gitignore (544 bytes)   
create test-frontend/src/assets/.gitkeep (0 bytes)   create test-frontend/src/environments/environment.prod.ts (51 bytes)   create test-frontend/src/environments/environment.ts (387 bytes)   
create test-frontend/src/favicon.ico (5430 bytes)   create test-frontend/src/index.html (299 bytes)   create test-frontend/src/main.ts (370 bytes)   
create test-frontend/src/polyfills.ts (3114 bytes)   create test-frontend/src/styles.css (80 bytes)   create test-frontend/src/test.ts (642 bytes)   
create test-frontend/src/tsconfig.app.json (211 bytes)   create test-frontend/src/tsconfig.spec.json (283 bytes)   create test-frontend/src/typings.d.ts (104 bytes)   
create test-frontend/e2e/app.e2e-spec.ts (295 bytes)   create test-frontend/e2e/app.po.ts (208 bytes)   create test-frontend/e2e/tsconfig.e2e.json (235 bytes)   
create test-frontend/karma.conf.js (923 bytes)   create test-frontend/package.json (1298 bytes)   create test-frontend/protractor.conf.js (722 bytes)   
create test-frontend/tsconfig.json (363 bytes)   create test-frontend/tslint.json (3012 bytes)   create test-frontend/src/app/app.module.ts (316 bytes)   
create test-frontend/src/app/app.component.css (0 bytes)   create test-frontend/src/app/app.component.html (1141 bytes)   create test-frontend/src/app/app.component.spec.ts (986 bytes)   
create test-frontend/src/app/app.component.ts (207 bytes) 

> uws@9.14.0 install /home/jbonofre/Workspace/test-frontend/node_modules/uws 
> node-gyp rebuild > build_log.txt 2>&1 || exit 0 

> node-sass@4.7.2 install /home/jbonofre/Workspace/test-frontend/node_modules/node-sass 
> node scripts/install.js 

Cached binary found at /home/jbonofre/.npm/node-sass/4.7.2/linux-x64-59_binding.node 

> uglifyjs-webpack-plugin@0.4.6 postinstall /home/jbonofre/Workspace/test-frontend/node_modules/webpack/node_modules/uglifyjs-webpack-plugin 
> node lib/post_install.js 

> node-sass@4.7.2 postinstall /home/jbonofre/Workspace/test-frontend/node_modules/node-sass 
> node scripts/build.js 

Binary found at /home/jbonofre/Workspace/test-frontend/node_modules/node-sass/vendor/linux-x64-59/binding.node 
Testing binary 
Binary is fine 

added 1272 packages in 65.41s 
Project 'test-frontend' successfully created.

Vous pouvez tester votre projet en local en utilisant ng serve

$ ng serve 
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** 
Date: 2018-03-02T10:01:07.769Z  
Hash: a130567e5011eb653504 
Time: 8240ms chunk {inline} inline.bundle.js (inline) 3.85 kB [entry] [rendered] 
chunk {main} main.bundle.js (main) 17.9 kB [initial] [rendered] 
chunk {polyfills} polyfills.bundle.js (polyfills) 549 kB [initial] [rendered] 
chunk {styles} styles.bundle.js (styles) 41.5 kB [initial] [rendered] 
chunk {vendor} vendor.bundle.js (vendor) 7.42 MB [initial] [rendered] 

webpack: Compiled successfully.

Vous pouvez accéder directement à votre application web dans votre navigateur et tous les changements sont effectués en temps réel. Si vous souhaitez générer une application web  » statique  » (conversion de votre projet Angular en un ensemble de fichiers HTML et JS), vous pouvez utiliser ng build

$ ng build 
Date: 2018-03-02T10:03:36.703Z 
Hash: 9de4cb2f98111fe59f9e 
Time: 9459ms 
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 3.89 kB [entry] [rendered] 
chunk {main} main.bundle.js, main.bundle.js.map (main) 7.39 kB [initial] [rendered] 
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 202 kB [initial] [rendered] 
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 14.5 kB [initial] [rendered] 
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.44 MB [initial] [rendered]

ng build génère tout le contenu statique dans un dossier dist comprenant un fichier index.html et toutes les autres ressources (fichiers js, …).

Développer une application Angular prête à l'emploi dans Apache Karaf™

Maintenant, nous allons « automatiser » cette compilation à l’aide d’Apache Maven™. L’intérêt est :

  • d’exécuter ng build pour créer les ressources dans le dossier dist
  • de packager cette ressource sous forme d’un WebBundle.

Notre fichier Maven pom.xml contiendra 3 plugins d’exécutions :

  • maven-antrun-plugin pour réaliser le ng build
  • maven-bundle-plugin pour packager comme un WebBundle
  • maven-clean-plugin pour nettoyer tous les dossiers créés

Aperçu de pom.xml

<?xml version="1.0" encoding="UTF-8"?> 
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">

     <modelVersion>4.0.0</modelVersion>

     <groupId>net.nanthrax</groupId>
     <artifactId>test-frontend</artifactId>
     <version>1.0-SNAPSHOT</version>
     <packaging>bundle</packaging>

     <build>
         <plugins>
             <plugin>
                 <groupId>org.apache.maven.plugins</groupId>
                 <artifactId>maven-antrun-plugin</artifactId>
                 <version>1.8</version>
                 <executions>
                     <execution>
                         <id>ng-build</id>
                         <phase>generate-resources</phase>
                         <goals>
                             <goal>run</goal>
                         </goals>
                         <configuration>
                             <target>
                                 <mkdir dir="target"/>
                                 <echo message="Generating frontend resource"/>
                                 <exec executable="ng">
                                     <arg value="build"/>
                                 </exec>
                             </target>
                         </configuration>
                     </execution>
                 </executions>
             </plugin>
             <plugin>
                 <groupId>org.apache.felix</groupId>
                 <artifactId>maven-bundle-plugin</artifactId>
                 <version>3.3.0</version>
                 <inherited>true</inherited>
                 <extensions>true</extensions>
                 <configuration>
                     <instructions>
                         <Web-ContextPath>/angular-test</Web-ContextPath>
                         <Private-Package>*</Private-Package>
                         <Include-Resource>dist</Include-Resource>
                     </instructions>
                 </configuration>
             </plugin>
         </plugins>
         <pluginManagement>
             <plugins>
                 <plugin>
                     <groupId>org.apache.maven.plugins</groupId>
                     <artifactId>maven-clean-plugin</artifactId>
                     <configuration>
                         <directory>dist</directory>
                         <directory>target</directory>
                     </configuration>
                 </plugin>
             </plugins>
         </pluginManagement>
     </build>

 </project>

Les parties les plus importantes sont :

  • web-contextPath comme contexte de la WebAp
  • Include-resource utilise des ressources générées par ng build

Nous pouvons construire notre bundle en utilisant simplement $ mvn clean install

Backoff ActiveMQ™

Le déploiement est maintenant assez simple dans Apache Karaf™. Dans une instance Karaf en cours d’exécution, installez la feature war :

karaf@root()> feature:install war

L’application est désormais disponible

karaf@root()> web:list
ID │ State       │ Web-State   │ Level │ Web-ContextPath │ Name
───┼─────────────┼─────────────┼───────┼─────────────────┼───────────────────────────────
87 │ Active      │ Deployed    │ 80    │ /angular-test   │ test-frontend (1.0.0.SNAPSHOT)

Maintenant, nous pouvons accéder directement à l’application avec un navigateur sur le service Karaf HTTP (8181 par défaut) : http://localhost:8181/angular-test

En conclusion

Grâce à Maven, nous pouvons maintenant mettre en place une intégration continue (en utilisant Jenkins par exemple). Une bonne amélioration pourrait être de lier cette application web Angular dans une fonctionnalité Karaf, en installant automatiquement la fonction war et notre webbundle.

Bloqué dans vos roadmaps ?

Vous souhaitez former vos équipes ?

fr_FRFrançais
en_GBEnglish (UK) fr_FRFrançais