DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

Miลกko Hevery for Builder.io

Posted on • Originally published at builder.io

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:

  • starter: A basic hello world.
  • starter-builder: A basic hello world integrated with Builder's Qwik API.
  • starter-partytown: A basic hello world showing how expensive tasks can be run on web-worker with Partytown
  • 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)
Enter fullscreen mode Exit fullscreen mode

qwik-starter

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)
Enter fullscreen mode Exit fullscreen mode

qwik-builder

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) 
Enter fullscreen mode Exit fullscreen mode

qwik-partytown

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)
Enter fullscreen mode Exit fullscreen mode

qwik-tobo

Try it now 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:

Top comments (4)

Collapse
 
christiankozalla profile image
Christian Kozalla

When I run a starter (tried Starter and Starter+Partytown) on Windows, I get the following error after visiting localhost:8080

UnhandledPromiseRejectionWarning: Error: Not QRL: prop: on:q-mo
unt; value: async (element, event, url) => {
[1] const isQwikInternalHook = typeof event == 'string';
[1] // isQwikInternalHook && console.log('HOOK', event, element, url);

However, when I run the same starters on WSL (Ubuntu 20.04) then I works fine!

I'd be happy to share more information on how to reproduce the error I encountered, if desired

Collapse
 
lepinekong profile image
lepinekong

I'm also using Windows but didn't try yet : did you solve ?

Collapse
 
christiankozalla profile image
Christian Kozalla

Sadly not, but I just figured that it helps a little bit to change the paths into relative paths on line 10 in vite.config.js -> input: ["./src/main.tsx", "./index.html"],

But there are still errors in npm run build and npm run dev is showing an empty page on localhost...

Collapse
 
timsar2 profile image
timsar2 • Edited on

Very well, As an angular developer,
for somthing like global error handler, interceptor, etc..
what can i do and what is the options?

Make Your Github Profile Stand Out

Github is great, but have you considered how to make yours more attractive for potential employers or other visitors? Even non-tech ones like recruiters!

Take a couple of hours and show your best side as a person - and a programmer.