Quarkus Web Bundler - Getting Started

Create full-stack web apps and components with this Quarkus extension. It offers zero-configuration bundling and minification (with source-map) for your web app scripts (JS, JSX, TS, TSX), dependencies (jQuery, htmx, Bootstrap, Lit etc.), and styles (CSS, SCSS, SASS).

No need to install NodeJs, it relies on a Java wrapped version of esbuild. For libraries, all the NPM catalog is accessible through Maven or Gradle dependencies.

Easy to set up
Production build
Awesome Dev experience with browser live-reload
Integrated with NPM dependencies through mvnpm or WebJars.
Build-time index.html rendering with bundled scripts and styles
Server Side Qute Components (Qute template + Script + Style)

The Web Bundler has been pre-configured to reduce the complexity of web bundling. You don’t need to know all the concepts of web bundling (entry-points, loaders, …) to use this extension, it has been pre-configured with sensible defaults that you may change if needed.

Installation

If you want to use this extension, you need to add the io.quarkiverse.web-bundler:quarkus-web-bundler extension first to your build file.

For instance, with Maven, add the following dependency to your POM file:

<dependency>
    <groupId>io.quarkiverse.web-bundler</groupId>
    <artifactId>quarkus-web-bundler</artifactId>
    <version>1.7.3</version>
</dependency>

Usage

Add your web resources in src/main/resources/web:

app/**: App scripts (js, ts, jsx, tsx, …), styles (css, scss, sass) and assets (svg, jpg, gif, png, …), to be bundled and served under http://localhost:8080/static/bundle/
static/**: Any static file to be served without change under http://localhost:8080/static/

Add Web Dependencies to the pom and import them (scripts and styles):

web/app/script.js

import $ from 'jquery';
import 'bootstrap/dist/css/bootstrap.css';

$('.hello').innerText('Hello');

If you don’t import a Web Dependency, it won’t be bundled (dead code elimination).

Install the bundle in your index.html template:

web/index.html

<html>
<head>
  ...
  {#bundle /}
</head>
</html>

Will compile into something looking like this:

<html>
<head>
      ...
      <script type="text/javascript" src="/static/main-XKHKUJNQ.js"></script>
      <link rel="stylesheet" media="screen" href="/static/main-TLNDARM3.css">
</head>
</html>

You are all set, enjoy!

By default {#bundle /} inserts both script and style tags for main, this is configurable.