Apache Karaf est un conteneur d’applications complet, prenant en charge plusieurs modèles de programmation: OSGi, DS, Blueprint, Spring, …

C’est aussi un conteneur d’application web complet, comme Apache Tomcat par exemple, mais offrant des fonctionnalités uniques. En effet, si Apache Karaf prend en charge WAR (des JAR contenant un ensemble de fichiers constituant une application web), il prend également en charge les bundles. Les bundles sont, pour faire simple, un ensemble de fichiers et répertoires permettant d’implémenter une -ou des-fonctionnalités (idéalement réutilisables dans divers projets).

Nous utiliserons le framework Angular, combiné avec Bootstrap, pour le frontend de notre application web. Il est possible de coder en Angular directement « à la main », mais, la plupart du temps, les développeurs préfèrent utiliser des environnements de développement, comme WebStorm, par exemple. Dans tous les cas, l’interface de développement Angular CLI est un outil plutôt « classique » pour développer et tester votre application Angular.

 

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

 

$ ng new test-frontend

 

L’interface Angular CLI facilite la création d’une application qui fonctionne « out of the box ».

 

Angular CLI crée ainsi toutes les ressources requises

 

  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 localement 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 à votre application Web directement dans votre navigateur, et toutes les modifications sont prises en direct. Si vous voulez exporter votre application web (en convertissant votre projet Angular en un ensemble de fichiers *.html et js), vous pouvez utiliser la commande suivante :

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. Il contient un fichier index.html et toutes les autres ressources (fichiers js, …).

 

Angular CLI command line interface - déployer des applications angular dans apache karaf idfor solutions
Copyright: https://cli.angular.io/

Créer une application Angular prête à déployer dans Apache Karaf

 

 

Maintenant, nous souhaitons « automatiser » la tâche en utilisant Apache Maven. L’objectif étant de :

  • Faire un ng build pour créer les ressources dans un dossier dist.
  • Packager cette ressource comme un bundle.

Le pom.xml de Maven contient donc trois exécutions de plug-ins :

  1. maven-antrun-plugin pour réaliser le ng build
  2. maven-bundle-plugin pour packager un Bundle
  3. maven-clean-plugin pour nettoyer tous les dossiers créés

Voici donc un aperçu du fichier 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 notre web-app ;
  • Include-Resource qui utilise les ressources produites par ng build.

 

Nous pouvons donc créer notre bundle en utilisant simplement :

 

 

$ mvn clean install

 

Déploiement dans Apache Karaf

 

Le déploiement est maintenant plutôt simple dans Apache Karaf.

Dans une instance Karaf en cours d’exécution, installez la feature war :

 

karaf@root()> feature:install war

 

Et maintenant, installez le bundle précédemment créé :

 

karaf@root()> bundle:install -s mvn:net.nanthrax/test-frontend/1.0-SNAPSHOT
Bundle ID: 87

 

Notre application web est maintenant 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)

 

 

Et nous pouvons accéder à l’application directement en utilisant un navigateur: http://localhost:8181/angular-test (par défaut).

 

… pour conclure

 

Grâce à Maven, nous pouvons maintenant mettre en place une intégration continue et automatisée (en utilisant Jenkins par exemple, un serveur d’automatisation -open source-, fournissant des centaines de plugins pour la construction, le déploiement et l’automatisation de projets).

Une bonne amélioration pourrait être de lier cette application web Angular dans une fonction Karaf, en installant automatiquement la fonction war et notre bundle.

 

Cliquez ici pour en savoir plus concernant Apache Karaf ou ici pour mieux connaître Angular et notre accompagnement personnalisé ! Pour finir, faites appel à nos expertsici.

 

 

Merci à Jean-Baptiste Onofré (blog.nanthrax.net – twitter.com/jbonofre)

Jean-Baptiste Onofré travaille quotidiennement sur les projets Apache utilisés dans divers produits. Technical Advisor, membre de l’Apache Software Foundation, il est également committer et membre PMC (Project Management Committee) d’une vingtaine de projets Apache, et a travaillé sur des projets majeurs comme Archiva, Camel, Karaf ou encore ServiceMix

Les articles que nous rédigeons sont le fruit 🍏 de plusieurs heures de dur labeur. Ainsi, nous vous serions reconnaissants de pas plagier nos travaux qui sont protégés par le droit d’auteur 📜. Toutefois, vous êtes libres de les partager ou de nous faire part de vos remarques.

Si vous avez trouvé une erreur sur cette page, vous pouvez nous en informer en sélectionnant le texte en question, et en appuyant sur Ctrl + Entrée. Merci 🙂 !

Déployer des applications Angular dans Apache Karaf
5 (100%) 2 vote[s]

Rapport de faute d’orthographe

Le texte suivant sera envoyé à nos rédacteurs :