Browser Live-Reload for Quarkus

Think of this extension as a browser-sync that runs integrated in Quarkus dev-mode. It provides a quick feedback-cycle when developing web frontends by automatically refreshing the browser on changes to your HTML, JavaScript or CSS files.

Warning

This is still experimental and only works with the latest SNAPSHOT of Quarkus. Awaiting this fix to hit the next release.

The extension also works together with the quarkus-myfaces extension for JSF.

Motivation

You might ask: Why do I need this if I have my dev-server or browser-sync? Well, you might not if you are a front-end developer and have NPM on your system anyway. Or your frontend needs a bundling or compilation-step as with Angular, React and friends.

This is for people who want to get started on developing a web frontend that does not require a bundling or transpilation-step. A simple frontend like in the old days; or a modern frontend like possible with Snowpack. Maybe you simply don’t have NPM or browser-sync installed; or don’t want to run a second tool/server and configure CORS (though it is simple in Quarkus). Who knows…​

Usage

This extension is published via jitpack.io.

For Maven, add the repository:

<repositories>
    <repository>
        <id>jitpack.io</id>
        <url>https://jitpack.io</url>
    </repository>
</repositories>

And add the dependency:

<dependency>
    <groupId>com.github.38leinaD</groupId>
    <artifactId>quarkus-livereload-extension</artifactId>
    <version>master-SNAPSHOT</version>
</dependency>

Note	You can find the examples for other build-tools like Gradle on the jitpack.io page.

When running your project with mvn compile quarkus:dev, open a browser to your frontend webapp. E.g. http://localhost:8080/index.html. Maybe run with a clear cache (Shift+F5 in Chrome) so the browser loads a fresh page which will have the live-reload script injected. You can check this in your browser console. It should say "live-reload activated".

Make a change to your files under src/main/resources/META-INF/resources of your project. On save, this should trigger a reload of the page.

Build

Here is how you can build the extension yourself, if you want.

$ mvn install

Now, add the following to your project’s pom.xml:

<dependency>
    <groupId>com.github.38leinaD</groupId>
    <artifactId>quarkus-livereload-extension</artifactId>
    <version>999-SNAPSHOT</version>
</dependency>

If you are using Gradle, add the following to your project’s build.gradle:

implementation 'com.github.38leinaD:quarkus-livereload-extension:999-SNAPSHOT'