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

React

✓

 
npx create-react-app my-app

Vue

✓

 
npm create vue@latest

Angular

✓*

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

Angular Test Configuration

Next.js

~

 
npx create-next-app@latest

Next.js Configuration

Vite

✓

 
npm create vite@latest

Vite Configuration

Svelte Kit

~

 
npm create svelte@latest webui

Svelte Kit Configuration

Nuxt

✓

 
npm init nuxt-app <project-name>

Solid Start

✓

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

Astro

✓

 
npm create astro@latest

Gatsby

✓

 
npm init gatsby@latest

Ember

✓

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

Midway.js

✓

No

Required Configuration

Angular Test Configuration

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

karma.conf.js:
  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:

quarkus.quinoa.build-dir=build
quarkus.quinoa.enable-spa-routing=true
%dev.quarkus.quinoa.dev-server.index-page=/
Currently, for technical reasons, the Quinoa SPA routing configuration won’t work with RESTEasy Classic. See SPA routing for a workaround.