Guides/ TypeScript

Qwik City App Starter

Create a Qwik City app with Tailwind CSS and a minimal Better Fullstack project configuration.

Updated 2026-05-12

qwikqwik-citytailwind

Use this stack when you want a Qwik app without adding a separate backend or database on day one.

npm create better-fullstack@latest my-qwik-app -- \
  --ecosystem typescript \
  --frontend qwik \
  --backend none \
  --runtime none \
  --database none \
  --orm none \
  --auth none \
  --api none \
  --css-framework tailwind \
  --package-manager bun

What this creates

  • A Qwik app.
  • Tailwind CSS.
  • No database, ORM, auth, or API layer by default.
  • A generated project configuration you can extend later.

Generated shape

This guide intentionally starts with a frontend-only Qwik City app. It is useful when you want the application shell, routing, and styling in place before choosing a backend or persistence layer.

Representative shape:

my-qwik-app/
  bts.jsonc
  src/
    routes/
    components/

The generated bts.jsonc records that backend, runtime, database, ORM, auth, and API are all none. That makes the minimal nature of the stack explicit instead of implicit.

Example route

Qwik City routes can start small:

import { component$ } from "@builder.io/qwik";

export default component$(() => {
  return (
    <main class="mx-auto max-w-4xl p-6">
      <h1 class="text-3xl font-semibold">Qwik app</h1>
      <p class="text-slate-600">Add server features when the product needs them.</p>
    </main>
  );
});

Keep early routes focused on UI and data requirements. Add a backend only when there is a real server-side responsibility such as auth, persistence, webhooks, or private API calls.

Compatibility notes

Qwik has narrower backend/API support in Better Fullstack than React, Nuxt, Svelte, or Solid options. This guide keeps the stack intentionally minimal and compatible.

Because the command uses --backend none, --database none, --orm none, --auth none, and --api none, it should not generate server contracts or database models. If you need those from day one, choose a framework/backend pairing with fuller Better Fullstack support.

When to choose it

Choose Qwik for frontend-first apps where resumability and a minimal initial payload matter more than a generated backend on day one.

Adding a backend later

When the app needs data, decide whether Qwik should stay as the frontend while another service owns the API, or whether a different Better Fullstack preset would better match the fullstack requirement. For many teams, adding a Hono API as a separate service is cleaner than forcing backend concerns into a frontend-first scaffold.

Useful future additions include:

  • A Hono API for private server logic.
  • PostgreSQL plus Drizzle or Prisma for relational data.
  • Better Auth when account management becomes part of the product.
  • oRPC or another typed contract layer when the frontend and API need shared types.

Deployment notes

A minimal Qwik app is straightforward to deploy as a web app or static-capable frontend, depending on the generated adapter and hosting target. Since this command does not add a database or auth, production setup mostly focuses on build output, routes, and public environment variables.

Troubleshooting

  • If you expected database files, check the command: this guide intentionally passes --database none and --orm none.
  • If auth routes are missing, the stack uses --auth none.
  • If Tailwind classes do not apply, inspect the generated Tailwind content paths and framework integration.
  • If you later add an API, keep public client variables separate from private server secrets.

Comparison notes

Choose this over Astro when resumability and Qwik's component model are the main reasons for the project. Choose Astro with React and Hono when content pages need a generated Hono backend and database from the start.

Next steps