DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Jan Mewes
Jan Mewes

Posted on

Create WebJar with Gradle and GitHub Packages

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

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).

Concept

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'
Enter fullscreen mode Exit fullscreen mode

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
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Create GitHub repository

Next, create a new GitHub repository for the Example WebJar as explained at docs.github.com.

New repository config

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
Enter fullscreen mode Exit fullscreen mode

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")
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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 }}
Enter fullscreen mode Exit fullscreen mode

Those changes need to be committed and pushed into the repository.

git add .
git commit -m "Add publish workflow"
git push
Enter fullscreen mode Exit fullscreen mode

To trigger the workflow, create a release in the GitHub user interface, as described at docs.github.com.

Create release

After a few moments, the workflow will start to run and can be observed in the "Actions" tab.

Workflow run

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'
Enter fullscreen mode Exit fullscreen mode

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'
}
Enter fullscreen mode Exit fullscreen mode

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);
    }
}
Enter fullscreen mode Exit fullscreen mode

Before starting the app, it is necessary to create an access token with the "read:packages" scope, as described at docs.github.com.

Create access token

This access token should be registered in the global Gradle properties, e.g.:

~/.gradle/gradle.properties:

gpr.user=jdoe
gpr.key=ghp_**********************************
Enter fullscreen mode Exit fullscreen mode

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 ''
Enter fullscreen mode Exit fullscreen mode

When the URL http://localhost:8080/greeting.html is opened in a web browser, the HTML file created above should be shown:

Hello

Top comments (0)

Let's team up together 🀝

We're Hiring

We're hiring for a Senior Full Stack Engineer to join the DEV team. Want the deets? Head here to learn more about who we're looking for.