Quarkus logo 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.


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:



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

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

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

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

Install the bundle in your index.html template:

  {#bundle /}

Will compile into something looking like this:

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

You are all set, enjoy!

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