Getting Started Qwikly

Qwik is a new kind of framework that is resumable (no JS and no hydration), built for the edge and familiar for React developers.

Prerequisites

Creating an app using the CLI

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 blank starter so that you can quickly familiarize yourself with it. Qwik supports NPM, yarn and pnpm.

Run the Qwik CLI in your shell

Choose the package manager you prefer and run one of the following command:

npm create qwik@latest
pnpm create qwik@latest
yarn create qwik

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

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

๐Ÿฐ Let's create a Qwik app ๐Ÿ‡   v0.18.1

โœ” Where would you like to create your new project? โ€ฆ qwik-app

โœ” Select a starter โ€บ Basic App (QwikCity)

โœ” Would you like to install pnpm dependencies? โ€ฆ yes

โœ” Installing pnpm dependencies...


๐Ÿฆ„  Success!  Project created in qwik-app directory

๐Ÿฐ Next steps:
   cd qwik-app
   pnpm start

๐Ÿ”Œ Integrations? Add Netlify, Cloudflare, Tailwind...
   pnpm qwik add

๐Ÿ“š Relevant docs:
   https://qwik.builder.io/docs/getting-started/

๐Ÿ’ฌ Questions? Start the conversation at:
   https://qwik.builder.io/chat
   https://twitter.com/QwikDev

๐Ÿ“บ Presentations, Podcasts and Videos:
   https://qwik.builder.io/media/

At this point, you will have a qwik-app directory, that contains the starter app.

Running in development

Once the application is download.

  1. Change into the directory created.
cd qwik-app
  1. Invoke the dev server
npm start
pnpm start
yarn start
  1. You should see a server running with your starter application

  VITE v4.0.1  ready in 515 ms

  โžœ  Local:   http://127.0.0.1:5173/
  โžœ  Network: use --host to expose
  โžœ  press h to show help

  1. Visit http://localhost:5173/ to explore the app.

Running in production

To run the application locally in production, run the following command:

npm run preview

It will build your application and the Vite preview server to serve the application.

Deployment

It's very easy to deploy your Qwik application to the cloud, as static files, or your own server.

Please check out the deployment section for more details.

Other integrations

Qwik is designed to be integrated with other tools. Such as vitest, tailwind, partytown... run the following command to see the list of available integrations:

npm run qwik add

and don't forget to check the integrations section for more details.

Made with โค๏ธ by