Getting Started

Create an app using the CLI

First, create a Qwik application with the Qwik CLI, which generates a blank starter so that you can quickly familiarize yourself with it. You can use this same command to create either Qwik or Qwik City project.

To create a Qwik app, open your terminal, cd into the folder you'd like to keep your project, and run the following command:

The CLI guides you through an interactive menu to set the project-name, select one of the starters and asks if you want to install the dependencies.

Enter the name of your project, for the purpose of this course, we'll use ./qwik-dashboard.

Select the starter, for this course, we'll use Empty App (Qwik City + Qwik)

For the next step, the CLI will ask if you want to install the npm dependancies and initialize the git repository. For the purpose of this course, we'll select Yes for both options. The CLI even offers you a little joke if you want 🤪.

The CLI will then create the project and install the dependencies. It will also initialize a git repository.

Exploring the project

Unlike tutorials that have you write code from scratch, much of the code for this course is already written for you. This better reflects real-world development, where you'll likely be working with existing codebases.

Our goal is to help you focus on learning the main features of Qwik, without having to write all the application code.

After installation, navigate to qwik-dashboard

and open the project in your code editor.

Happy coding! 🎉

Let's spend some time exploring the project.

Folder structure

You'll notice that the project has the following folder structure:

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

• src/routes/: 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.tsx: Homepage of your app.
• src/routes/layout.tsx: Root layout of your app, all pages will be rendered inside this layout.

Refer to the docs Routing section for more information.

• src/components/: 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/: 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 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: 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: 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: Contains the TypeScript compiler configuration. It's standard for any TypeScript project.
• vite.config.ts: Qwik uses Vite to build the project. Contains the Vite configuration. It's standard for any Vite project. Please refer to the Vite documentation for more information.

Feel free to explore these folders, and don't worry if you don't understand everything the code is doing yet.

Placeholder data

When you're building user interfaces, it helps to have some placeholder data. If a database or API is not yet available, you can:

• Use placeholder data in JSON format or as JavaScript objects.
• Use a 3rd party service like mockAPI.

For this project, we provide you with placeholder data that you can download it here:

• placeholder-data.js 💾

In the src folder, create a lib directory and add your file: src/lib/placeholder-data.js.

Each JavaScript object in the file represents a table in your database. For example, for the invoices table:

In the chapter on setting up your database, you'll use this data to seed your database (populate it with some initial data).

TypeScript

You may also notice most files have a .ts or .tsx suffix. This is because the project is written in TypeScript. We wanted to create a course that reflects the modern web landscape.

It's okay if you don't know TypeScript - we'll provide the TypeScript code snippets when required.

For now, download the definitions.ts file and push it into src/lib/definitions.ts. Here, we manually define the types that will be returned from the database. For example, the invoices table has the following types:

By using TypeScript, you can ensure you don't accidentally pass the wrong data format to your components or database, like passing a string instead of a number to invoice amount.

If you're a TypeScript developer:

• If you are using Qwik for your development, be aware that TypeScript is natively integrated into the framework. From the initialization of your Qwik project, TypeScript is configured and ready to use, which optimizes development and enhances type safety in your application.
• For even more robust type safety, using Prisma with Qwik can automatically generate types based on your database schema, thus improving the integrity and maintainability of your code.

Running the development server

Run npm run start to start the development server.

Your browser is automatically open at this url http://localhost:5173/. Your home page should look like this:

Source code

You can find the source code for chapter 1 on GitHub.