quarkiverse / quarkus-web-bundler Goto Github PK

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

License: Apache License 2.0

Java 91.85% CSS 0.54% SCSS 1.35% JavaScript 2.19% HTML 4.08%

frontend quarkus-extension assets bundle esbuild full-stack javascript js sass scss

quarkus-web-bundler's Introduction

Quarkus Web Bundler

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).

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)

Is it the same as Quinoa? It is very close but:

It is already integrated with a bundler (esbuild, which is very similar to Webpack or Rollup)
NodeJS is not needed
It works without any configuration
All the npm catalog is available directly as dependencies in your pom.xml/build.gradle

When should I use Quinoa instead?

I have a dedicated UI team very familliar with the NodeJS eco-system
I need a very specific NodeJs/Bundling configuration that the web-bundler does not cover

How to test my Web App without Jest or similar?

Use @QuarkusTest with Quarkus Playwright. It is very easy to create full-stack tests to cover all your scenarios (and re-using all the backend testing data).

Can I swith from Quinoa to the Web Bundler?

Yes, just move your web-dependencies to the pom.xml/build.gradle and follow the web-bundler structure, the output app should be the same.

Can I swith from the Web Bundler to Quinoa?

Yes, you just need to use a framework (like Vite) and switch to a package.json and follow your framework structure, the output app should be the same.

All the information you need to use Quarkus Web Bundler is in the user documentation.

quarkus-web-bundler's People

Contributors

Stargazers

Watchers

Forkers

phillip-kruger chrisruffalo aloubyansky mustafaelms edewit ppalaga

quarkus-web-bundler's Issues

How to get separate stylesheets for server-side components?

Hey,

I've been following the guide on the docs and noticed that all the stylesheets for server-side components are combined into one css resource. This means that even if a page only uses one component it imports the stylesheets for all components. I guess this also applies to the js?

https://docs.quarkiverse.io/quarkus-web-bundler/dev/advanced-guides.html#qute-components

Here's the root template:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Login</title>
{#bundle /}
</head>
<body>
<h1>Login</h1>

{#login /}
</body>
</html>

Here's the css that's included on that page:

/* components/login/login.scss */
form {
  background-color: #fff;
  border: 5px solid #000;
}

/* components/sidebar/sidebar.module.scss */
* {
  color: blue !important;
}
/*# sourceMappingURL=/static/bundle/components-TCCAMGQL.css.map */

Notice how the template doesn't use the sidebar component.

Provide a way to have a built-in default app.js with all the web-deps

This app would import all the web-dependencies so they are bundled.

I need to see how to deal with css/scss.

Create codestart

Add image processing support

automatic change format, resize, crop, ...

Add reload on config change

Add automatic browser reload in dev-mode

See https://esbuild.github.io/api/#hot-reloading-css

We should create a new SSE endpoint containing the list of changes, and inject something similar to the esbuild example, directly in the code in dev mode (with a config to disable it)

DevUI: Add Support

Similar to how we do it in Quinoa.

Add testing doc (linking to quarkus-playwright)

Serve the bundled files instead of using META-INF resources

and have a priority order

Use esbuild watch mode in dev

Currently we are rebuilding the full-app, this would just build what necessary:

Here are elements that can be used to deal with an external process from a Deployment Processor:
https://github.com/quarkiverse/quarkus-quinoa/blob/main/deployment/src/main/java/io/quarkiverse/quinoa/deployment/ForwardedDevProcessor.java#L57

Allow to format html templates at buildtime and make them static (out of the box)

If a html template (e.g. index.html or page1.html) is in the web directory root, it will be formatted using Qute at build-time (Runtime Qute data and namespaces won't be available), {#bundle } will be available.
It will be generated as a static file for runtime and served at the root-path.

Split Server Side Components as a new module and conditional dependency (on Qute Web)

This will make web-bundler non dependent on Quarkus Qute (only Qute Core on deployment).

cc @maxandersen @FroMage @mkouba @phillip-kruger

Add global name support

See https://esbuild.github.io/api/#global-name, this would allow to easily consume the bundle from the pages scripts with a specific namespace.

Multi-module support

See #46

I am trying to use quarkus-web-bundler in a multi-module project and get the following error:

[ERROR] Failed to execute goal io.quarkus:quarkus-maven-plugin:3.2.0.Final:build (default-quarkus) on project koino-service-auth: Failed to build quarkus application: io.quarkus.builder.BuildException: Build failure: Build failed due to errors
[ERROR]         [error]: Build step io.quarkiverse.web.bundler.deployment.staticresources.GeneratedStaticResourcesProcessor#processStaticFiles threw an exception: java.lang.NullPointerException: Cannot invoke "io.quarkus.bootstrap.workspace.WorkspaceModule.getBuildDir()" because the return value of "io.quarkus.maven.dependency.ResolvedDependency.getWorkspaceModule()" is null
[ERROR]         at io.quarkiverse.web.bundler.deployment.staticresources.GeneratedStaticResourcesProcessor.getBuildDirectory(GeneratedStaticResourcesProcessor.java:110)
[ERROR]         at io.quarkiverse.web.bundler.deployment.staticresources.GeneratedStaticResourcesProcessor.processStaticFiles(GeneratedStaticResourcesProcessor.java:38)
[ERROR]         at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
[ERROR]         at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:77)
[ERROR]         at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
[ERROR]         at java.base/java.lang.reflect.Method.invoke(Method.java:568)
[ERROR]         at io.quarkus.deployment.ExtensionLoader$3.execute(ExtensionLoader.java:909)
[ERROR]         at io.quarkus.builder.BuildContext.run(BuildContext.java:282)
[ERROR]         at org.jboss.threads.ContextHandler$1.runWith(ContextHandler.java:18)
[ERROR]         at org.jboss.threads.EnhancedQueueExecutor$Task.run(EnhancedQueueExecutor.java:2513)
[ERROR]         at org.jboss.threads.EnhancedQueueExecutor$ThreadBody.run(EnhancedQueueExecutor.java:1538)
[ERROR]         at java.base/java.lang.Thread.run(Thread.java:833)
[ERROR]         at org.jboss.threads.JBossThread.run(JBossThread.java:501)
[ERROR] -> [Help 1]

I know that the PR isn't the right thing to do but I don't know enough about what is produced during the Quarkus build to grab the right injection.

I'm going to make a minimal reproducer when I get a chance. Unfortunately the project I'm doing this on isn't public.

Dev mode broken when using `clean`

If you use mvn clean quarkus:dev and use the dev mode, the bundle is deleted and so... cannot be loaded anymore.

GET http://localhost:8080/static/bundle/main-I37LK3HR.js net::ERR_ABORTED 404 (Not Found)

Allow to configure loaders

Something like this would be the default:

quarkus.web-bundler.loaders.JS=.js,.cjs,.mjs
quarkus.web-bundler.loaders.TS=.ts,.mts,.cts
quarkus.web-bundler.loaders.TSX=.tsx
quarkus.web-bundler.loaders.JSX=.jsx
quarkus.web-bundler.loaders.CSS=.css,.scss
quarkus.web-bundler.loaders.JSON=.json
quarkus.web-bundler.loaders.FILE=.svg,.gif,.png,.jpg,.woff,.woff2,ttf,.eot
quarkus.web-bundler.loaders.EMPTY=
quarkus.web-bundler.loaders.TEXT=.txt
quarkus.web-bundler.loaders.DATAURL=
quarkus.web-bundler.loaders.BINARY=
quarkus.web-bundler.loaders.BASE64=
quarkus.web-bundler.loaders.COPY=

A check would make sure that each extensions have only one loader and start with dot.

See https://esbuild.github.io/content-types/

Javascript testing

Hello, thank you for a wonderful extension!

Is there is a way to run javascript-based tests with this extension as a part of the build? I'm looking into a way to run component tests for React components, as a compliment to the e2e/integration tests.

If there is a way I can happily help trying it out and documenting the solution.

Add Launch Mode as esbuild env and allow to set env for esbuild through config

Dev Mode issues because of a cache in the Vertx file server

Currently, if there is not src/main/META-INF/resources directory, Quarkus Vertx Http is not treating the META-INF/resources as a dynamic content directory and enable a cache. This leads to problems:

out of sync index.html (new bundle is generated, old index.html)
script not getting updated on changes

The workaround is to create an empty src/main/META-INF/resources/fixme.txt until this gets a proper fix.

Exclude source mapping from release build

Is it possible to exclude source mapping from the release build? I can see that these files are included, and all things like comments can be viewed in the release bundle.

Create doc section about Auto Import for web dependencies

Question: Gradle support?

That's it, the question is if this will support Gradle projects.

Add tailwind css library and plugin support.

Currently the documentation is not so helpful, that's why I have added the issue here. Tailwind css requires nodejs, also a config file is needed, so is it possible to add it using web-bundler? Also request for making the documentation more helpful by adding different sections for mostly used libraries (like react, angular or others).

Supporting web-bundler usage in other extensions

The Renarde Backoffice extension uses Bootstrap, from webjars. I'd prefer for it to use web-bundler, but for that I need to be able to make sure it doesn't pollute end users who might want to not have Bootstrap end up in their bundles.

Perhaps we need a build item for my extension to declare its dependencies on mvnpm modules and get its own "private" bundle that would not be visible from the end user's bundle?

Create "real-world" examples documentation page

https://github.com/mvnpm/mvnpm (Lit SPA)
https://github.com/quarkusio/search.quarkus.io/ (Lit Fullstack Web Components)
https://github.com/quarkusio/code.quarkus.io (Modular multi-module Fullstack React app)

Import scss from Web Dependencies

It is currently not possible to import scss from Web Dependencies.

Because it is not available in esbuild CLI, scss conversion is done by the web bundled as a pre-step of bundling on all project scss files. In order to support importing scss from Web Dependencies, a solution would be to detect import and convert the given scss (it would require a lot of file processing).

You may upvote this if you feel this is really needed.

Check IDEs Quarkus tooling support for this

Make sure the Quarkus tooling support this and the tooling team is aware of this.

[Critical] Web dependencies are packaged in the resulting app

Currently, the web-dependencies (mvnpm or webjars) are included in the packaged app. With the web-bundled they (most of the time) won't be used at runtime.

This is a problem because:

Packaged apps are way larger than needed
[FIXED] All the web jar files (it could be a lot) are served by vertx (made public)

Native broken in 1.3.0

When building a native (-P native) in an app that use web bundler, everything works fine when using 1.3.0.CR3, however, updating it to 1.3.0, it fails with this error:

[ERROR] Failed to execute goal io.quarkus.platform:quarkus-maven-plugin:3.8.1:build (default) on project mvnpm: Failed to build quarkus application: io.quarkus.builder.BuildException: Build failure: Build failed due to errors
[ERROR]         [error]: Build step io.quarkus.deployment.steps.NativeImageResourcesStep#registerPackageResources threw an exception: java.lang.NullPointerException: Cannot invoke "java.net.URL.getPath()" because the return value of "java.lang.ClassLoader.getResource(String)" is null
[ERROR]         at io.quarkus.deployment.steps.NativeImageResourcesStep.registerPackageResources(NativeImageResourcesStep.java:33)
[ERROR]         at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
[ERROR]         at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:77)
[ERROR]         at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
[ERROR]         at java.base/java.lang.reflect.Method.invoke(Method.java:568)
[ERROR]         at io.quarkus.deployment.ExtensionLoader$3.execute(ExtensionLoader.java:849)
[ERROR]         at io.quarkus.builder.BuildContext.run(BuildContext.java:256)
[ERROR]         at org.jboss.threads.ContextHandler$1.runWith(ContextHandler.java:18)
[ERROR]         at org.jboss.threads.EnhancedQueueExecutor$Task.run(EnhancedQueueExecutor.java:2513)
[ERROR]         at org.jboss.threads.EnhancedQueueExecutor$ThreadBody.run(EnhancedQueueExecutor.java:1538)
[ERROR]         at java.base/java.lang.Thread.run(Thread.java:840)
[ERROR]         at org.jboss.threads.JBossThread.run(JBossThread.java:501)
[ERROR] -> [Help 1]
[ERROR] 
[ERROR] To see the full stack trace of the errors, re-run Maven with the -e switch.
[ERROR] Re-run Maven using the -X switch to enable full debug logging.
[ERROR] 
[ERROR] For more information about the errors and possible solutions, please read the following articles:
[ERROR] [Help 1] http://cwiki.apache.org/confluence/display/MAVEN/MojoExecutionException