Quarkus, Quinoa, GraphQL, SveleteKit and Houdini Example (with OIDC Authentication).

This is an example application for creating authenticated GraphQL API with Quarkus and using it on the frontend with SvelteKit and Houdini, while also using SvelteKit in SPA mode and serving it from Quarkus.

Running the application in dev mode

You can run your application in dev mode that enables live coding using:

./mvnw compile quarkus:dev

And start the frontend dev server

cd src/main/webui
npm run dev

NOTE: Quarkus now ships with a Dev UI, which is available in dev mode only at http://localhost:8080/q/dev/.

Packaging and running the application

The application can be packaged using:

./mvnw package

It produces the quarkus-run.jar file in the target/quarkus-app/ directory. Be aware that it’s not an über-jar as the dependencies are copied into the target/quarkus-app/lib/ directory.

The application is now runnable using java -jar target/quarkus-app/quarkus-run.jar.

If you want to build an über-jar, execute the following command:

./mvnw package -Dquarkus.package.type=uber-jar

The application, packaged as an über-jar, is now runnable using java -jar target/*-runner.jar.

Creating a native executable

You can create a native executable using:

./mvnw package -Dnative

Or, if you don't have GraalVM installed, you can run the native executable build in a container using:

./mvnw package -Dnative -Dquarkus.native.container-build=true

You can then execute your native executable with: ./target/quarkus-sveltekit-graphql-1.0.0-SNAPSHOT-runner

If you want to learn more about building native executables, please consult https://quarkus.io/guides/maven-tooling.

Related Guides

Backend

• REST (guide): A Jakarta REST implementation utilizing build time processing and Vert.x. This extension is not compatible with the quarkus-resteasy extension, or any of the extensions that depend on it.
• REST Jackson (guide): Jackson serialization support for Quarkus REST. This extension is not compatible with the quarkus-resteasy extension, or any of the extensions that depend on it
• OpenID Connect (guide): Verify Bearer access tokens and authenticate users with Authorization Code Flow
• Quinoa (guide): Node.js extension which allows serving of single page apps alongside Quarkus.
• SmallRye GraphQL (guide): Create GraphQL Endpoints using the code-first approach from MicroProfile GraphQL

Frontend

• Svelte (guide): Svelte is not a monolithic JavaScript library imported by applications: instead, Svelte compiles HTML templates to specialized code that manipulates the DOM directly, which may reduce the size of transferred files and give better client performance. Application code is also processed by the compiler, inserting calls to automatically recompute data and re-render UI elements when the data they depend on is modified
• SvelteKit (guide): SvelteKit is a framework for rapidly developing robust, performant web applications using Svelte. If you're coming from React, SvelteKit is similar to Next. If you're coming from Vue, SvelteKit is similar to Nuxt.
• Houdini (guide): Houdini is a GraphQL Client that deeply integrates with the SvelteKit data fetching pipeline so you can stop worrying about waterfalls, code-splitting, and so much more. Fully automatic and totally customizable. Declarative, Composable, Typesafe.