Create WebJar with Gradle and GitHub Packages
Tags: java, gradle, github
Published: 2022-10-31 17:04:23

---
title: Create WebJar with Gradle and GitHub Packages
published: true
description: 
tags: Java, Gradle, GitHub
---

A [WebJar](https://www.webjars.org/) is a [JAR](<https://en.wikipedia.org/wiki/JAR_(file_format)>) 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](https://gradle.org) as build system and [GitHub Packages](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-gradle-registry) as repository.

## Table of contents

- [Introduction](#introduction)
- [Example WebJar project](#example-webjar-project)
- [Create GitHub repository](#create-github-repository)
- [Publish to GitHub Packages](#publish-to-github-packages)
- [Example App project](#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).

![Concept](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kc8glx2wfpmno9e246lc.png)

**Dependencies**

To follow along with the steps described below, the following tools need to be installed on the computer:

- [Git](https://git-scm.com/)
- [Java Development Kit](https://en.wikipedia.org/wiki/Java_Development_Kit)
- [Gradle](https://gradle.org)

Further, it is necessary to have a [GitHub account](https://github.com).

## 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:

```groovy
rootProject.name = 'example-webjar'
```

Then create a file called `build.gradle` with the declaration of the WebJar identifiers:

```groovy
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
<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](https://docs.github.com/en/get-started/quickstart/create-a-repo).

![New repository config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mgy3ktfbcgoib1285jeo.png)

Then add the code created above to that repository:

```bash
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:

```groovy
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](https://docs.github.com/en/actions/learn-github-actions/understanding-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`:

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

```bash
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](https://docs.github.com/en/repositories/releasing-projects-on-github/managing-releases-in-a-repository).

![Create release](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zg3fzcn01wfrq0wqc9qv.png)

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

![Workflow run](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jg462qlgwnxha3k0nxjz.png)

## 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:

```groovy
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:

```groovy
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:

```java
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](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token).

![Create access token](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/89go62jc4yxx6zf0euet.png)

This access token should be registered in the [global Gradle properties](https://blog.mrhaki.com/2015/10/gradle-goodness-setting-global.html), e.g.:

`~/.gradle/gradle.properties`:

```text
gpr.user=jdoe
gpr.key=ghp_**********************************
```

Eventually, start the app by calling the `bootRun` Gradle task:

```text
$ 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](http://localhost:8080/greeting.html) is opened in a web browser, the HTML file created above should be shown:

![Hello](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2u5grvrd13myj23vwy1q.png)