Skip to content

web-dependency-locator.adoc

Latest commit

 

History

History
144 lines (112 loc) · 4.65 KB

web-dependency-locator.adoc

File metadata and controls

144 lines (112 loc) · 4.65 KB

Web dependency locator

This document shows how static resources can be served from web dependency jars like WebJars and mvnpm.

1. Using the quarkus-web-dependency-locator extension

pom.xml
<dependency>
    <groupId>io.quarkus</groupId>
    <artifactId>quarkus-web-dependency-locator</artifactId>
</dependency>
build.gradle
implementation("io.quarkus:quarkus-web-dependency-locator")

1.1. WebJars

If you are using WebJars, like the following JQuery one:

pom.xml
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>jquery</artifactId>
    <version>3.1.1</version>
</dependency>
build.gradle
implementation("org.webjars:jquery:3.1.1")

you can reference the files in the jar from your HTML, example /webjars/jquery/3.1.1/jquery.min.js.

The above is available by default, however, adding the quarkus-web-dependency-locator extension allows you to reference the files without having to include the version in the path, example /webjars/jquery/jquery.min.js.

1.2. Mvnpm

If you are using mvnpm, like the following Lit one:

pom.xml
<dependency>
    <groupId>org.mvnpm</groupId>
    <artifactId>lit</artifactId>
    <version>3.1.2</version>
</dependency>
build.gradle
implementation("org.mvnpm:lit:3.1.2")

you can reference the files in the jar from your HTML, example /_static/lit/3.1.2/index.js.

The above is available by default, however, adding the quarkus-web-dependency-locator extension allows you to reference the files without having to include the version in the path, example /_static/lit/index.js.

1.2.1. ImportMaps

Mvnpm jars also allows you to use an importmap, that will allow you to just use module imports, example import { LitElement, html, css} from 'lit';.

The importmap is generated by the quarkus-web-dependency-locator extension, and available at /_importmap/generated_importmap.js. This means adding the following to your index.html will allow you to import web libraries by name:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My app</title>

    <script src="/_importmap/generated_importmap.js"></script> (1)

    <script type="module">
        import '@lit'; (2)
        import 'app/demo-app.js'; (3)
    </script>
  </head>

</html>

  1. Use the generated importmap

  2. Import web libraries

  3. Import your own files, this can be done by adding quarkus.web-dependency-locator.import-mappings.app/ = /app/ to the config. Any key-value pair can be added.

1.2.1.1. Automatic imports

You can also automate the imports above. To do this, move your web assets from src/main/resources/META-INF/resources to src/main/resources/web and now replace the above scripts and imports with {#bundle /}:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My app</title>

    {#bundle /} (1)

  </head>

</html>

  1. This will be replaced at build time with the importmap script, and also include any CSS and JavaScript discovered in the /app directory.

This allows you to add libraries, js and css without having to change your HTML. Hot-reload is also supported.

1.3. Dev UI

When adding the quarkus-web-dependency-locator extension , you can see the files being served, and the generated importmap, in the Dev UI:

Card in Dev UI Files Importmap