Project Structure
Create a new project
To follow along with this guide, run the Qwik CLI in your command line:
npm create qwik@latest
Notice that you can also use the package manager of your choice,
yarn create qwik@latest
orpnpm create qwik@latest
.
When prompted, choose a name for your project and Basic as your starter.
Note: the
start
script attempts to launch the site in systemβs browser, which in headless environments (e.g., within a container) could cause the command to fail with an error. Editpackage.json
to remove the--open
flag.
The command will ask you a few questions and create a new project for you.
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.ts
Project files
src/routes/
The src/routes/
directory is an special directory for QwikCity, since it's the directory where QwikCity will look for your pages. Folders and files inside this directory have an 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 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 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
SSR entry point, in all cases the application is render 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
The 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
The 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
The tsconfig.json
file contains the TypeScript compiler configuration. It's standard for any TypeScript project.
vite.config.ts
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.