Building a WebBundle Angular for Apache Karaf

Building a WebBundle Angular for Apache Karaf

Apache Karaf™ is a complete application container that can support several programming models such as OSGi, DS, Blueprint, Spring... Likewise, it is a complete web application container as well asApache Tomcat™ and offering unique features. If it supports WAR, it also takes into account the WebBundle (Bundle with a specific header).

For the frontend of web applications, Angular is a popular framework used in addition to Bootstrap. It is possible to code Angular manually although web developers use IDEs (development environments) such as WebStorm. In any case, Angular CLI is a basic development and testing tool for your Angular application

Adaptation of the article:" Building Angular WebBundle for Apache Karaf» of blog Nanthrax written by Jean-baptiste Onofré (Technical Advisor)

A project with Angular CLI

Angular CLI helps you to start your project very quickly under Angular. You can launch the environment with the following command: ng new

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

Then CLI creates the necessary resources:

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.

You can test your project locally using 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.

You can access your web application directly in your browser and all changes are made in real time. If you want to generate a "static" web application (converting your Angular project into a set of HTML and JS files), you can use 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 generates all static content in a folder dist including a file index.html and all other resources (js files,...).

Develop a ready-to-use Angular application in Apache Karaf™

Now, we will "automate" this compilation usingApache Maven™. The interest is:

  • to execute ng build to create resources in the folder dist
  • to package this resource as a WebBundle.

Our Maven file pom.xml will contain 3 execution plugins:

  • maven-antrun-plugin to carry out the ng build
  • maven-bundle-plugin to package like a WebBundle
  • maven-clean-plugin to clean all created folders

Overview of the 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>

The most important parts are:

  • web-contextPath as the context of the WebAp
  • Include-resource uses resources generated by ng build

We can build our bundle simply by using $ mvn clean install

Backoff ActiveMQ™

Deployment is now quite simple in Apache Karaf™. In a running Karaf instance, install the feature war :

karaf@root()> feature:install war

The application is now available

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

Now, we can access the application directly with a browser on the Karaf HTTP service (8181 by default): http://localhost:8181/angular-test

In conclusion

Thanks to Maven, we can now implement continuous integration (using Jenkins for example). A good improvement could be to link this web application Angular in a functionality Karafby installing automatically the function war and our webbundle.

Blocked in your roadmaps?

Would you like to train your teams?

en_GBEnglish (UK)
fr_FRFrançais en_GBEnglish (UK)