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.ts
src/routes/ directory is a special directory for Qwik City since it's the directory where Qwik City 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.tsxis the homepage of your app.
src/routes/layout.tsxis the root layout of your app, all pages will be rendered inside this layout.
Refer to the Routing section for more information.
src/components/ directory is a directory by convention. All Qwik starters will have this directory, but you can change it if you want. This directory is where you should put your components, ie, reusable pieces of code that can be used in multiple places. They are not routes or layouts, but they can be used inside them.
For example, a
Button component should be inside
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.
SSR entry point, in all cases the application is rendered outside the browser, this entry point will be the common one.
- Server (express, cloudflare...)
- npm run start
- npm run preview
- npm run build
src/root.tsx file is the entry point for the application tree. It's the first component that will be rendered. It's the root of the tree.
src/global.css file is a global CSS file, if you need to define some CSS that is used in multiple places in your app, you can define it here.
The root component (
src/root.tsx) imports this file by default.
tsconfig.json file contains the TypeScript compiler configuration. It's standard for any TypeScript project.
Qwik uses Vite to build the project. The
vite.config.ts file contains the Vite configuration. It's standard for any Vite project. Please refer to the Vite documentation for more information.
Qwik has a utility command called
new that allows developers to easily create new components and routes.
Let's say you wanted to create a new component called
Button, you would run the command:
pnpm qwik new Button
Maybe you want to create a new route for the /contact page. To do that, you could use the command:
pnpm qwik new /contact
The following commands are consistent with Qwik's directory file structure, allowing you to scaffold components more quickly.
If we compare our
qwik-app-demo from the top of the page, the additional changes would look like this:
qwik-app-demo ├── README.md ├── package.json ├── public │ └── favicon.svg ├── src │ ├── components │ │ └── router-head │ │ └── router-head.tsx │ │ Button │ │ └── button.tsx │ ├── entry.ssr.tsx │ ├── global.css │ ├── root.tsx │ └── routes │ ├── flower │ │ ├── flower.css │ │ └── index.tsx │ ├── contact │ │ └── index.tsx │ ├── index.tsx │ ├── layout.tsx │ └── service-worker.ts ├── tsconfig.json └── vite.config.ts
If you prefer to generate the
Button component with the
Button/index.tsx naming convention, you can could use the command:
pnpm qwik new --barrel Button
In that case, the
src/components folder would look like this:
src │ ├── components │ │ └── router-head │ │ └── router-head.tsx │ │ Button │ │ └── index.tsx
This feature was added in Qwik v1.2, and those using an older version will not see this functionality.