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
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.4.0</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.