Quarkus Quinoa - Web Frameworks

Quinoa attempts to automatically determine which framework you are using by reading your package.json file and auto-configure settings for that framework. When possible, if some changes are required in the Web UI, it will try to help you configure it.

For developers, this provides more "convention over configuration" approach for a smoother experience.

Detected Frameworks

Name Preconfigured Starter Guides Config


npx create-react-app my-app


npm create vue@latest



npm install -g @angular/cli
ng new my-first-project

Angular Test Configuration



npx create-next-app@latest

Next.js Configuration


npm create vite@latest

Vite Configuration

Svelte Kit


npm create svelte@latest webui

Svelte Kit Configuration


npm init nuxt-app <project-name>

Solid Start

mkdir my-app && cd my-app
npm init solid@latest


npm create astro@latest


npm init gatsby@latest


npm install -g ember-cli
ember new ember-quickstart



Required Configuration

Angular Test Configuration

If you want to use the Angular tests (instead of Playwright from the @QuarkusTest):

  browsers: ['Chrome', 'ChromeHeadless', 'ChromeHeadlessCI'],
  customLaunchers: {
    ChromeHeadlessCI: {
      base: 'ChromeHeadless',
      flags: ['--no-sandbox']

Next.js Configuration

This will configure the build to export the static files: .package.json:

  "scripts": {
    "build": "next build",

In Next.js 14+ you need to add the following property in next.config.js file:

const nextConfig = {
  output: 'export',

Vite Configuration

Configure vite.config.ts file with the following changes:

  export default defineConfig({
    // depending on your application, base can also be "/"
    base: '',
    plugins: [react(), viteTsconfigPaths()],
    server: {
        // this ensures that the browser opens upon server start
        open: true,
        // this sets a default port to 3000, you can change this
        port: 3000,

Svelte Kit Configuration

SvelteKit needs to be configured to create a single page application. You will not be able to use any of its server-side only functionality. See also SvelteKit documentation on Single-page apps.

Disable server side rendering at the root layout (src/routes/+layout.js):

export const ssr = false;

Install Svelte Static adapter:

npm i -D @sveltejs/adapter-static

Configure svelte.config.js file with the following changes:

import adapter from '@sveltejs/adapter-static';

// In projects using Sveltekit v1
import { vitePreprocess } from '@sveltejs/kit/vite';

// In projects using SvelteKit v2
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: vitePreprocess(),
    kit: {
        adapter: adapter({
            fallback: 'index.html'
        // Mark path non-relative, otherwise SvelteKit assumes it works in a sub-directory
        paths: {
            relative: false

export default config;

In application.properties add:

Currently, for technical reasons, the Quinoa SPA routing configuration won’t work with RESTEasy Classic. See SPA routing for a workaround.