A WebJar is a JAR file that contains HTML/CSS/JavaScript resources. Those resources are then served by a Java-based web server. This blog post shows how WebJars can be created from scratch, using Gradle as build system and GitHub Packages as repository.
Table of contents
- Introduction
- Example WebJar project
- Create GitHub repository
- Publish to GitHub Packages
- Example App project
Introduction
Overview
The "example-webjar" project hosts an HTML file called "greeting.html" that contains the text "Hello, World!". That file is packaged in a WebJar and then published to GitHub packages (1). The "example-app" project downloads the WebJar from there (2) and serves the "greeting.html" when it is started (3).
Dependencies
To follow along with the steps described below, the following tools need to be installed on the computer:
Further, it is necessary to have a GitHub account.
Example WebJar project
First, create a new directory for the WebJar project. In this directory create a file called settings.gradle that specifies the project name:
rootProject.name = 'example-webjar'
Then create a file called build.gradle with the declaration of the WebJar identifiers:
apply plugin: 'java'
apply plugin: 'maven-publish'
publishing {
publications {
mavenJava(MavenPublication) {
groupId = 'com.github.experimental-software'
artifactId = 'example-webjar'
version = '0.0.1'
from components.java
}
}
}
Now create the sub-directory src/main/resources/META-INF/resources. And in this directory, create an HTML file called greeting.html:
<html>
<body>
<h1>Hello, World!</h1>
</body>
</html>
Create GitHub repository
Next, create a new GitHub repository for the Example WebJar as explained at docs.github.com.
Then add the code created above to that repository:
git init
git add .
git commit -m "Initial commit"
git remote add origin git@github.com:experimental-software/example-webjar.git
git push
Publish to GitHub Packages
The repository where the release should be published has to be registered in the build.gradle file created above:
publishing {
// publications { ...
repositories {
maven {
name = "GitHubPackages"
url = "https://maven.pkg.github.com/experimental-software/example-webjar"
credentials {
username = System.getenv("GITHUB_ACTOR")
password = System.getenv("GITHUB_TOKEN")
}
}
}
}
With the help of GitHub Actions certain scripts can automatically be executed when certain events happen in the repository. If the following file gets added, GitHub will automatically build and publish a new package after the creation of a release:
.github/workflows/release.yml:
name: Publish WebJar to GitHub Packages
on:
release:
types: [created]
jobs:
publish:
runs-on: ubuntu-latest
permissions:
contents: read
packages: write
steps:
- uses: actions/checkout@v3
- uses: actions/setup-java@v1
with:
distribution: "temurin"
java-version: 17
- uses: gradle/gradle-build-action@v2
with:
gradle-version: current
- run: gradle publish
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
Those changes need to be committed and pushed into the repository.
git add .
git commit -m "Add publish workflow"
git push
To trigger the workflow, create a release in the GitHub user interface, as described at docs.github.com.
After a few moments, the workflow will start to run and can be observed in the "Actions" tab.
Example App project
The WebJar is now ready to be used. To try it out, create a new directory "example-app" for a new Java project.
In this directory, create a settings.gradle file that declares the project name:
rootProject.name = 'example-app'
Then create a file called build.gradle that declares a dependency on Spring Boot in the Maven Central repository and the example webjar in the GitHub Packages repository:
plugins {
id 'org.springframework.boot' version '2.7.5'
id 'io.spring.dependency-management' version '1.0.15.RELEASE'
id 'java'
}
repositories {
mavenCentral()
maven {
url = uri('https://maven.pkg.github.com/experimental-software/example-webjar')
credentials {
username = project.findProperty('gpr.user')
password = project.findProperty('gpr.key')
}
}
}
dependencies {
implementation 'com.github.experimental-software:example-webjar:0.0.1'
implementation 'org.springframework.boot:spring-boot-starter-web'
}
Then create a file called DemoApplication.java in the directory src/main/java/com/example/demo that contains the "main" method of the app:
package com.example.demo;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class DemoApplication {
public static void main(String[] args) {
SpringApplication.run(DemoApplication.class, args);
}
}
Before starting the app, it is necessary to create an access token with the "read:packages" scope, as described at docs.github.com.
This access token should be registered in the global Gradle properties, e.g.:
~/.gradle/gradle.properties:
gpr.user=jdoe
gpr.key=ghp_**********************************
Eventually, start the app by calling the bootRun Gradle task:
$ gradle bootRun
> Task :bootRun
...
2022-10-30 20:35:56.825 INFO 2386 --- [ main] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat started on port(s): 8080 (http) with context path ''
When the URL http://localhost:8080/greeting.html is opened in a web browser, the HTML file created above should be shown:
Top comments (0)