At Project Au Lait, we are developing and publishing an open-source asset called SVQK, which combines Svelte (Frontend) and Quarkus (Backend) for web application development. The asset includes automated testing tools and source code generation tools. This article introduces an overview of SVQK. (For instructions on how to use SVQK, refer to the Quick Start.)

Overview

Applications developed using SVQK are structured as follows:

SVQK Runtime

The frontend provides a user interface that runs in the browser, handling input validation and data input/output using Web APIs. The backend provides Web APIs and handles transaction control, business logic execution, and database access internally.

Setup

SVQK is published on Maven Central as a Maven archetype (project template). To develop a web application using SVQK, first create a project using the following Maven command:

mvn archetype:generate \
  -DarchetypeGroupId=dev.aulait.svqk \
  -DarchetypeArtifactId=svqk-archetype-refimpl \
  -DarchetypeVersion=0.9 \
  -DgroupId=my.group.id  \
  -DartifactId=my-artifactid \
  -Dversion=1.0-SNAPSHOT

The created project includes the following tools and scripts:

  • Docker + PostgreSQL
  • Flyway + DB Migration scripts
  • Quarkus
  • SvelteKit
  • Playwright + End-to-End Test scripts

After creating the project, set up these tools and scripts using the following command:

./mvnw install -T 1C -P setup

This command not only sets up the tools and scripts but also runs tests to verify that the tools and applications work as expected. The tests include unit tests for backend components, integration tests for manipulating Web APIs using a Rest Client, and end-to-end tests for frontend operations using Playwright. This setup command can be executed both on a local PC and in a CI environment.

SVQK Setup

Source Code Generation

SVQK projects include a source code generation tool using Yeoman. This tool generates source code for screens and APIs that perform CRUD operations on tables. Additionally, it supports generating end-to-end tests and integration tests for the screens and APIs.

SVQK Source Code Generation

Summary

By using SVQK, you can quickly set up an environment for developing web applications with Svelte + Quarkus. The tests for the developed applications are automated and can be executed on both local PCs and CI environments. For instructions on how to use SVQK, refer to the Quick Start.