Back to blog

Qwik

Introducing Qwik starters - get up and running with Qwik now

December 14, 2021

Written By Miลกko Hevery
Introducing Qwik starters - get up and running with Qwik now

Nothing is more satisfying than playing with code and discovering new things! Yes, it is finally here, npm init qwik for you to try and discover a different way to build web apps that stay lean and performant no matter their size. It is the same technology that is powering builder.io and gets 100/100 PageSpeed.

Qwik starter CLI is a simple starter for you to try experimenting with Qwik first hand and to get a better understanding of just how different it is.

The CLI consist of these four examples, that will be expanded in the near future:

  1. starter: A basic hello world.
  2. starter-builder: A basic hello world integrated with Builder's Qwik API.
  3. starter-partytown: A basic hello world showing how expensive tasks can be run on web-worker with Partytown
  4. todo: A classic TodoMVC application.

Basic Starter

> npm init qwik
๐Ÿ’ซ Let's create a Qwik project ๐Ÿ’ซ
 
โœ” Project name โ€ฆ qwik-starter
โœ” Select a starter โ€บ Starter
โœ” Select a server โ€บ Express
 
โญ๏ธ Success! Project saved in qwik-starter directory
 
๐Ÿ“Ÿ Next steps:
  cd qwik-starter
  npm install
  npm start
 
> (cd qwik-starter; npm install; npm start)
starter app

Try it in StackBlitz.

Starter with Builder Qwik API

> npm init qwik
๐Ÿ’ซ Let's create a Qwik project ๐Ÿ’ซ
 
โœ” Project name โ€ฆ qwik-builder
โœ” Select a starter โ€บ Starter Builder
โœ” Select a server โ€บ Express
 
โญ๏ธ Success! Project saved in qwik-builder directory
 
๐Ÿ“Ÿ Next steps:
  cd qwik-builder
  npm install
  npm start
 
> (cd qwik-builder; npm install; npm start)
qwik builder app

Try it in StackBlitz.

Starter with Partytown

> npm init qwik
๐Ÿ’ซ Let's create a Qwik project ๐Ÿ’ซ
 
โœ” Project name โ€ฆ qwik-partytown
โœ” Select a starter โ€บ Starter Partytown
โœ” Select a server โ€บ Express
 
โญ๏ธ Success! Project saved in qwik-partytown directory
 
๐Ÿ“Ÿ Next steps:
  cd qwik-partytown
  npm install
  npm start
 
> (cd qwik-partytown; npm install; npm start)
qwik partytown app

Classic TodoMVC

> npm init qwik
๐Ÿ’ซ 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
 
> (cd qwik-todo; npm install; npm start)
qwik todo app

Try it in StackBlitz.

Profile away

We encourage you to open the dev tools and put all of the examples through the profiler to see how little time is spent on the main thread.

Happy coding and please provide feedback ๐Ÿš€