Project Structure

A typical Qwik project looks like this:

qwik-app-demo
├── README.md
├── package.json
├── public
│   └── favicon.svg
├── src
│   ├── components
│   │   └── router-head
│   │       └── router-head.tsx
│   ├── entry.ssr.tsx
│   ├── global.css
│   ├── root.tsx
│   └── routes
│       ├── flower
│       │   ├── flower.css
│       │   └── index.tsx
│       ├── index.tsx
│       ├── layout.tsx
│       └── service-worker.ts
├── tsconfig.json
└── vite.config.mts

Project files

src/routes/

The src/routes/ directory is a special directory where Qwik Router will look for your pages. Folders and files inside this directory have a special meaning and they will be mapped to the URL of your app.

• src/routes/index.tsx is the homepage of your app.
• src/routes/layout.tsx is the root layout of your app, all pages will be rendered inside this layout.

Refer to the Routing section for more information.

src/components/

The directory named src/components/ follows a standard convention. It's present in all Qwik starters and you can rename it if you prefer. The src/components/ directory is where to put your components (i.e. reusable pieces of code that can be used in multiple places). These components are not routes or layouts, but they can be referenced from within your route or layout code.

For example, a Button component should be inside src/components/button/button.tsx.

public/

The public/ directory contains static assets such as images, fonts, and icons. When you build your app, these files will be copied to the dist/ directory and served at the root.

Refer to Vite configuration for more information.

src/entry.ssr.tsx

The SSR entry point is the common entry point in all cases where the application is rendered outside of the browser.

• Server (express, cloudflare...)
• start command
• preview