Getting Started

Qwik is a new kind of frameworks

Prerequisites

  • node.js v14 or higher (with npm)
  • your favorite IDE (vscode recommended)

Creating an app

The first step is to create an application. Qwik comes with a CLI that allows you to create a basic working skeleton of an application. We will use the CLI to create a Todo sample app, and we will use that application to do a walk-through of Qwik so that you can familiarize yourself with it.

  1. Ask Qwik CLI to create a project:
$ npm init qwik@latest

The CLI will guide you through an interactive menu to set the project-name and select one of the starters:

asciicast

After your new app is created, you will see an output like the following in your terminal:

💫 Let's create a Qwik project 💫

✔ Project name … qwik-todo
✔ Select a starter › Todo
✔ Select a server › Express

⭐️ Success! Project saved in qwik-todo directory

📟 Next steps:
   cd qwik-todo
   npm install
   npm start

At this point, you will have qwik-todo directory, which contains the starter app.

Running in development

The easiest way to get running application is to follow the steps from the npm create qwik@latest:

  1. Change into the directory created by the npm create qwik@latest.
cd qwik-todo
  1. Install NPM modules:
npm install
  1. Invoke the server
npm start
  1. You should see a server running with your To-do application
  vite v2.8.6 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 157ms.
  1. Visit http://localhost:3000/ to explore the To-do app.

The application is running in development mode using Vite. This is a special mode that supports Hot-Module-Reloading (HMR.)

While HMR is great for development, Qwik runs like a traditional framework, where all of the work is done in the browser. If you look into the network tab of the dev-tools, you will see that all of the code is eagerly downloaded into the browser and executed. To understand how Qwik is different, we need to run in production mode to see the magic happen.

Commands

  • npm start: alias to npm run dev
  • npm run dev: starts the dev server in client bootstrap mode
  • npm run dev.ssr: starts the dev server with SSR
  • npm run build: builds the application for production