Qwik

https://qwik.dev/docs/
Admin
Qwik is a web framework designed to deliver instant-loading web applications at any size or...
Tokens:134,517
Snippets:1,477
Trust Score:9.4
Update:5 months ago
Show doc for...
Tokens:
Raw
### Install and Start Application with PM2

Source: https://qwik.dev/docs/deployments/self-hosting

Commands to install PM2 globally, start a Qwik City application, and monitor its status.

```bash
# Install PM2 globally
npm install -g pm2

# Start application
pm2 start dist/server/entry.express.js --name qwik-app

# Monitor application
pm2 monit

# View logs
pm2 logs qwik-app

# Set up PM2 to start on system boot
pm2 startup
pm2 save

```

--------------------------------

### Run Node.js Server (Express)

Source: https://qwik.dev/docs/deployments/self-hosting

Start the Express server for your Qwik application. Ensure you have built the application and installed production dependencies.

```bash
node server/entry.express.js
```

--------------------------------

### Install and Run PM2 Web Dashboard

Source: https://qwik.dev/docs/deployments/self-hosting

Installs the PM2 web dashboard globally and starts it using a configuration file. Ensure pm2-web is installed globally.

```bash
npm install -g pm2-web
pm2-web --config pm2-webrc.json
```

--------------------------------

### Install Netlify Edge Adapter

Source: https://qwik.dev/docs/deployments/netlify-edge

Use the `qwik add` command to install the Netlify Edge adapter. This command automatically installs necessary dependencies and configures the project.

```bash
pnpm run qwik add netlify-edge
```

```bash
npm run qwik add netlify-edge
```

```bash
yarn run qwik add netlify-edge
```

```bash
bun run qwik add netlify-edge
```

--------------------------------

### Initialize Tauri Project

Source: https://qwik.dev/docs/integrations/tauri

Scaffold a new Tauri project with pre-configured settings. This command guides you through essential setup questions.

```bash
pnpm run tauri init
```

```bash
npm run tauri init
```

```bash
yarn run tauri init
```

```bash
bun run tauri init
```

--------------------------------

### Create New Qwik Astro Project with bun

Source: https://qwik.dev/docs/integrations/astro

Use this command to start a new Qwik Astro project with bun. Ensure you have bun installed.

```bash
bun create @qwikdev/astro
```

--------------------------------

### Create New Qwik Astro Project with npm

Source: https://qwik.dev/docs/integrations/astro

Use this command to start a new Qwik Astro project with npm. Ensure you have npm installed.

```bash
npm create @qwikdev/astro
```

--------------------------------

### Create New Qwik Astro Project with pnpm

Source: https://qwik.dev/docs/integrations/astro

Use this command to start a new Qwik Astro project with pnpm. Ensure you have pnpm installed.

```bash
pnpm create @qwikdev/astro
```

--------------------------------

### Create New Qwik Astro Project with yarn

Source: https://qwik.dev/docs/integrations/astro

Use this command to start a new Qwik Astro project with yarn. Ensure you have yarn installed.

```bash
yarn create @qwikdev/astro
```

--------------------------------

### Install @qwikest/icons with bun

Source: https://qwik.dev/docs/integrations/icons

Install the @qwikest/icons package using bun.

```bash
bun install @qwikest/icons
```

--------------------------------

### Install Auth.js with Qwik CLI

Source: https://qwik.dev/docs/integrations/authjs

Use the Qwik starter script to add Auth.js to your project. This command installs the `@auth/qwik` package and generates a configuration file.

```bash
pnpm run qwik add auth
```

```bash
npm run qwik add auth
```

```bash
yarn run qwik add auth
```

```bash
bun run qwik add auth
```

--------------------------------

### Enable and Start Systemd Service

Source: https://qwik.dev/docs/deployments/self-hosting

Commands to enable the systemd service for your Qwik application to start on boot and to start it immediately.

```bash
sudo systemctl enable qwik-app
sudo systemctl start qwik-app
```

--------------------------------

### Run Development Server using bun

Source: https://qwik.dev/docs/integrations/builderio

Start the Qwik development server using bun after setting up Builder.io.

```bash
bun run dev
```

--------------------------------

### Start Qwik App with PM2 (Express)

Source: https://qwik.dev/docs/deployments/self-hosting

Use PM2, a production process manager, to start and manage your Express-based Qwik application. Install PM2 globally first.

```bash
npm install -g pm2

# For Express
pm2 start server/entry.express.js --name qwik-app
```

--------------------------------

### Run Development Server using npm

Source: https://qwik.dev/docs/integrations/builderio

Start the Qwik development server using npm after setting up Builder.io.

```bash
npm run dev
```

--------------------------------

### Add Storybook to Qwik Project

Source: https://qwik.dev/docs/integrations/storybook

Use these commands to install Storybook dependencies and add an example component and stories to your Qwik application.

```bash
pnpm run qwik add storybook
```

```bash
npm run qwik add storybook
```

```bash
yarn run qwik add storybook
```

```bash
bun run qwik add storybook
```

--------------------------------

### Install @qwikest/icons with npm

Source: https://qwik.dev/docs/integrations/icons

Install the @qwikest/icons package using npm.

```bash
npm install @qwikest/icons
```

--------------------------------

### Install Prisma with Qwik CLI

Source: https://qwik.dev/docs/integrations/prisma

Use the Qwik CLI to add Prisma to your project. This installs necessary dependencies and sets up the Prisma folder.

```bash
pnpm run qwik add prisma
```

```bash
npm run qwik add prisma
```

```bash
yarn run qwik add prisma
```

```bash
bun run qwik add prisma
```

--------------------------------

### Run Development Server using yarn

Source: https://qwik.dev/docs/integrations/builderio

Start the Qwik development server using yarn after setting up Builder.io.

```bash
yarn run dev
```

--------------------------------

### Install Qwik Labs with bun

Source: https://qwik.dev/docs/labs

Use this command to install the Qwik Labs package using bun. The package is installed directly from a GitHub URL.

```bash
bun install github:QwikDev/qwik-labs-build#main
```

--------------------------------

### Install @qwikdev/astro Integration with bun

Source: https://qwik.dev/docs/integrations/astro

Manually install the @qwikdev/astro integration package using bun.

```bash
bun install @qwikdev/astro
```

--------------------------------

### Install Modular Forms with bun

Source: https://qwik.dev/docs/integrations/modular-forms

Install the @modular-forms/qwik package as a devDependency using bun.

```bash
bun install -D @modular-forms/qwik
```

--------------------------------

### Install @qwikest/icons with yarn

Source: https://qwik.dev/docs/integrations/icons

Install the @qwikest/icons package using yarn.

```bash
yarn add @qwikest/icons
```

--------------------------------

### Install Capacitor CLI and Core

Source: https://qwik.dev/docs/guides/capacitor

Install the necessary Capacitor CLI and core packages. This command also initializes Capacitor in your project.

```bash
pnpm i @capacitor/cli @capacitor/core
npx cap init
```

--------------------------------

### Install Fastify Adapter

Source: https://qwik.dev/docs/deployments/node

Use the 'add' command to integrate the Fastify adapter for Qwik City.

```bash
pnpm run qwik add fastify
```

```bash
npm run qwik add fastify
```

```bash
yarn run qwik add fastify
```

```bash
bun run qwik add fastify
```

--------------------------------

### Serve Deno Application

Source: https://qwik.dev/docs/deployments/deno

Start the Deno server after building your Qwik City application. This command is used to serve the production build.

```bash
pnpm run serve
```

```bash
npm run serve
```

```bash
yarn run serve
```

```bash
bun run serve
```

--------------------------------

### Run Development Server using pnpm

Source: https://qwik.dev/docs/integrations/builderio

Start the Qwik development server using pnpm after setting up Builder.io.

```bash
pnpm run dev
```

--------------------------------

### Install Qwik Labs with npm

Source: https://qwik.dev/docs/labs

Use this command to install the Qwik Labs package using npm. The package is installed directly from a GitHub URL.

```bash
npm install github:QwikDev/qwik-labs-build#main
```

--------------------------------

### Install CSS Preprocessors (Bun)

Source: https://qwik.dev/docs/core/styles

Install CSS preprocessors like Sass, Less, or Stylus using Bun. Ensure the preprocessor itself is installed as a dev dependency.

```bash
# .scss and .sass
bun add -D sass

# .less
bun add -D less

# .styl and .stylus
bun add -D stylus
```

--------------------------------

### Serve Qwik City Application with Bun

Source: https://qwik.dev/docs/deployments/bun

Start the Bun server after building the application for production using the 'bun run serve' command.

```bash
bun run serve
```

--------------------------------

### Install Qwik Labs with yarn

Source: https://qwik.dev/docs/labs

Use this command to install the Qwik Labs package using yarn. The package is installed directly from a GitHub URL.

```bash
yarn add github:QwikDev/qwik-labs-build#main
```

--------------------------------

### Run Node.js Server (Fastify)

Source: https://qwik.dev/docs/deployments/self-hosting

Start the Fastify server for your Qwik application. This is used when the Fastify adapter has been added.

```bash
node server/entry.fastify.js
```

--------------------------------

### Install Qwik Package with bun

Source: https://qwik.dev/docs/integrations/astro

If you encounter a 'Cannot find package @builder.io/qwik' warning, manually install the Qwik package using bun.

```bash
bun install @builder.io/qwik
```

--------------------------------

### Install @qwikest/icons with pnpm

Source: https://qwik.dev/docs/integrations/icons

Install the @qwikest/icons package using pnpm.

```bash
pnpm install @qwikest/icons
```

--------------------------------

### Install Express Adapter

Source: https://qwik.dev/docs/deployments/node

Use the 'add' command to integrate the Express adapter for Qwik City.

```bash
pnpm run qwik add express
```

```bash
npm run qwik add express
```

```bash
yarn run qwik add express
```

```bash
bun run qwik add express
```

--------------------------------

### Qwik Library Entry Point (src/index.ts)

Source: https://qwik.dev/docs/advanced/library

Example of an entry point file for a Qwik library, exporting components to be exposed.

```typescript
// As an example, we will export the Logo and Counter components
export { Logo } from './components/logo/logo';
export { Counter } from './components/counter/counter';
```

--------------------------------

### Complete Login Form Example

Source: https://qwik.dev/docs/integrations/modular-forms

An example of a complete Qwik component using Modular Forms, including schema definition, loader, action, and form rendering with validation.

```typescript
// @ts-nocheck
/* eslint-disable @typescript-eslint/no-unused-vars */
import { $, component$, type QRL } from '@builder.io/qwik';
import { routeLoader$ } from '@builder.io/qwik-city';
import type { InitialValues, SubmitHandler } from '@modular-forms/qwik';
import { formAction$, useForm, valiForm$ } from '@modular-forms/qwik';
import * as v from 'valibot';

const LoginSchema = v.object({
  email: v.pipe(
    v.string(),
    v.nonEmpty('Please enter your email.'),
    v.email('The email address is badly formatted.'),
  ),
  password: v.pipe(
    v.string(),
    v.nonEmpty('Please enter your password.'),
    v.minLength(8, 'Your password must have 8 characters or more.'),
  ),
});

type LoginForm = v.InferInput<typeof LoginSchema>;

export const useFormLoader = routeLoader$<InitialValues<LoginForm>>(() => ({
  email: '',
  password: '',
}));

export const useFormAction = formAction$<LoginForm>((values) => {
  // Runs on server
}, valiForm$(LoginSchema));

export default component$(() => {
  const [loginForm, { Form, Field }] = useForm<LoginForm>({
    loader: useFormLoader(),
    action: useFormAction(),
    validate: valiForm$(LoginSchema),
  });

  const handleSubmit: QRL<SubmitHandler<LoginForm>> = $((values, event) => {
    // Runs on client
    console.log(values);
  });

  return (
    <Form onSubmit$={handleSubmit}>
      <Field name="email">
        {(field, props) => (
          <div>
            <input {...props} type="email" value={field.value} />
            {field.error && <div>{field.error}</div>}
          </div>
        )}
      </Field>
      <Field name="password">
        {(field, props) => (
          <div>
            <input {...props} type="password" value={field.value} />
            {field.error && <div>{field.error}</div>}
          </div>
        )}
      </Field>
      <button type="submit">Login</button>
    </Form>
  );
});
```

--------------------------------

### Install styled-vanilla-extract

Source: https://qwik.dev/docs/core/styles

Install the styled-vanilla-extract integration using your preferred package manager.

```bash
pnpm run qwik add styled-vanilla-extract
```

```bash
npm run qwik add styled-vanilla-extract
```

```bash
yarn run qwik add styled-vanilla-extract
```

```bash
bun run qwik add styled-vanilla-extract
```

--------------------------------

### Qwik App Entry Point (app.js)

Source: https://qwik.dev/docs/faq

This is an example of how Qwik's optimizer might generate an entry point file for an application, referencing component definitions.

```javascript
import { componentQrl, qrl } from '@builder.io/qwik';
 
const App = /*#__PURE__*/ componentQrl(
  qrl(() => import('./app_component_akbu84a8zes.js'), 'App_component_AkbU84a8zes')
);
 
export { App };
```

--------------------------------

### Install Qwik Labs with pnpm

Source: https://qwik.dev/docs/labs

Use this command to install the Qwik Labs package using pnpm. The package is installed directly from a GitHub URL.

```bash
pnpm install github:QwikDev/qwik-labs-build#main
```

--------------------------------

### Install Static Site Adapter with bun

Source: https://qwik.dev/docs/deployments/static

Use this command to add the static-site adapter to your Qwik project using bun.

```bash
bun run qwik add static
```

--------------------------------

### Install Modular Forms with yarn

Source: https://qwik.dev/docs/integrations/modular-forms

Install the @modular-forms/qwik package as a devDependency using yarn.

```bash
yarn add -D @modular-forms/qwik
```

--------------------------------

### Basic HTML with Qwikloader and Button

Source: https://qwik.dev/docs/advanced/qwikloader

This example demonstrates how to integrate Qwikloader into an HTML page. The Qwikloader script is inlined, and a button is configured with an `on:click` attribute pointing to a lazy-loaded handler.

```html
<html>
  <body q:base="/build/">
    <button on:click="./myHandler.js#clickHandler">push me</button>
    <script>
      /* Qwikloader */
    </script>
  </body>
</html>
```

--------------------------------

### Install Modular Forms with npm

Source: https://qwik.dev/docs/integrations/modular-forms

Install the @modular-forms/qwik package as a devDependency using npm.

```bash
npm install -D @modular-forms/qwik
```

--------------------------------

### Install @qwikdev/astro Integration with npm

Source: https://qwik.dev/docs/integrations/astro

Manually install the @qwikdev/astro integration package using npm.

```bash
npm install @qwikdev/astro
```

--------------------------------

### Install Static Site Adapter with npm

Source: https://qwik.dev/docs/deployments/static

Use this command to add the static-site adapter to your Qwik project using npm.

```bash
npm run qwik add static
```

--------------------------------

### Install @qwikdev/astro Integration with pnpm

Source: https://qwik.dev/docs/integrations/astro

Manually install the @qwikdev/astro integration package using pnpm.

```bash
pnpm install @qwikdev/astro
```

--------------------------------

### Install Modular Forms with pnpm

Source: https://qwik.dev/docs/integrations/modular-forms

Install the @modular-forms/qwik package as a devDependency using pnpm.

```bash
pnpm add -D @modular-forms/qwik
```

--------------------------------

### Install CSS Preprocessors (Yarn)

Source: https://qwik.dev/docs/core/styles

Install CSS preprocessors like Sass, Less, or Stylus using Yarn. Ensure the preprocessor itself is installed as a dev dependency.

```bash
# .scss and .sass
yarn add -D sass

# .less
yarn add -D less

# .styl and .stylus
yarn add -D stylus
```

--------------------------------

### Install Capacitor Device Plugin

Source: https://qwik.dev/docs/guides/capacitor

Install the Device plugin using pnpm. This is the first step to integrating native device features.

```bash
pnpm i @capacitor/device
```

--------------------------------

### Start Tauri Development Server

Source: https://qwik.dev/docs/integrations/tauri

Run this command to start developing your Tauri desktop application. Ensure your frontend development server is configured correctly.

```bash
pnpm run tauri dev
```

```bash
npm run tauri dev
```

```bash
yarn run tauri dev
```

```bash
bun run tauri dev
```

--------------------------------

### Install Qwik Package with npm

Source: https://qwik.dev/docs/integrations/astro

If you encounter a 'Cannot find package @builder.io/qwik' warning, manually install the Qwik package using npm.

```bash
npm install @builder.io/qwik
```

--------------------------------

### Install CSS Preprocessors (NPM)

Source: https://qwik.dev/docs/core/styles

Install CSS preprocessors like Sass, Less, or Stylus using NPM. Ensure the preprocessor itself is installed as a dev dependency.

```bash
# .scss and .sass
npm add -D sass

# .less
npm add -D less

# .styl and .stylus
npm add -D stylus
```

--------------------------------

### Install Production Dependencies (yarn)

Source: https://qwik.dev/docs/deployments/self-hosting

Install only production dependencies on the server using yarn. The `--production` flag ensures only necessary packages are installed.

```bash
yarn install --production
```

--------------------------------

### Serve Storybook Dashboard

Source: https://qwik.dev/docs/integrations/storybook

Run these commands to start the Storybook development server and view your components in the dashboard.

```bash
pnpm run storybook
```

```bash
npm run storybook
```

```bash
yarn run storybook
```

```bash
bun run storybook
```

--------------------------------

### Install @qwikdev/astro Integration with yarn

Source: https://qwik.dev/docs/integrations/astro

Manually install the @qwikdev/astro integration package using yarn.

```bash
yarn add @qwikdev/astro
```

--------------------------------

### Install CSS Preprocessors (PNPM)

Source: https://qwik.dev/docs/core/styles

Install CSS preprocessors like Sass, Less, or Stylus using PNPM. Ensure the preprocessor itself is installed as a dev dependency.

```bash
# .scss and .sass
pnpm add -D sass

# .less
pnpm add -D less

# .styl and .stylus
pnpm add -D stylus
```

--------------------------------

### Install Static Site Adapter with yarn

Source: https://qwik.dev/docs/deployments/static

Use this command to add the static-site adapter to your Qwik project using yarn.

```bash
yarn run qwik add static
```

--------------------------------

### Install Tauri CLI

Source: https://qwik.dev/docs/integrations/tauri

Install the Tauri command-line interface to manage your desktop application project. Adapt the command to your package manager.

```bash
pnpm install @tauri-apps/cli
```

```bash
npm install @tauri-apps/cli
```

```bash
yarn add @tauri-apps/cli
```

```bash
bun install @tauri-apps/cli
```

--------------------------------

### Create a Qwik Project

Source: https://qwik.dev/docs/guides/capacitor

Initialize a new Qwik project using the Qwik CLI. This is the first step before adding Capacitor.

```bash
pnpm create qwik@latest
```

--------------------------------

### Install Qwik Package with pnpm

Source: https://qwik.dev/docs/integrations/astro

If you encounter a 'Cannot find package @builder.io/qwik' warning, manually install the Qwik package using pnpm.

```bash
pnpm install @builder.io/qwik
```

--------------------------------

### Install Qwik Package with yarn

Source: https://qwik.dev/docs/integrations/astro

If you encounter a 'Cannot find package @builder.io/qwik' warning, manually install the Qwik package using yarn.

```bash
yarn add @builder.io/qwik
```

--------------------------------

### Install og-img Package

Source: https://qwik.dev/docs/integrations/og-img

Install the og-img package using your preferred package manager.

```bash
pnpm install og-img
```

```bash
npm install og-img
```

```bash
yarn add og-img
```

```bash
bun install og-img
```

--------------------------------

### Install Static Site Adapter with pnpm

Source: https://qwik.dev/docs/deployments/static

Use this command to add the static-site adapter to your Qwik project using pnpm.

```bash
pnpm run qwik add static
```

--------------------------------

### Install Supabase Dependencies

Source: https://qwik.dev/docs/integrations/supabase

Install the necessary Supabase packages for your Qwik project using your preferred package manager.

```bash
pnpm install @supabase/supabase-js supabase-auth-helpers-qwik
```

```bash
npm install @supabase/supabase-js supabase-auth-helpers-qwik
```

```bash
yarn add @supabase/supabase-js supabase-auth-helpers-qwik
```

```bash
bun install @supabase/supabase-js supabase-auth-helpers-qwik
```

--------------------------------

### Install Cloud Run Adapter

Source: https://qwik.dev/docs/deployments/gcp-cloud-run

Use the 'add' command to integrate the Cloud Run adapter into your Qwik City project. Choose the package manager you are using.

```bash
pnpm run qwik add cloud-run
```

```bash
npm run qwik add cloud-run
```

```bash
yarn run qwik add cloud-run
```

```bash
bun run qwik add cloud-run
```

--------------------------------

### Create Qwik Project with NPM

Source: https://qwik.dev/docs/qwikcity

Use this command to create a new Qwik City starter project using NPM.

```bash
npm create qwik@latest
```

--------------------------------

### Add Deno Adapter

Source: https://qwik.dev/docs/deployments/deno

Install the Deno adapter for Qwik City. This command adds the necessary configurations to integrate with Deno.

```bash
pnpm run qwik add deno
```

```bash
npm run qwik add deno
```

```bash
yarn run qwik add deno
```

```bash
bun run qwik add deno
```

--------------------------------

### Install Bun

Source: https://qwik.dev/docs/deployments/bun

Install Bun on Linux, OSX, or WSL using the provided curl command. Refer to the Bun website for platform-specific instructions.

```bash
curl -fsSL https://bun.sh/install | bash 
```

--------------------------------

### Vercel Edge Entry Middleware Example

Source: https://qwik.dev/docs/deployments/vercel-edge

Example of using the built-in middleware within the `src/entry.vercel-edge.tsx` file. This configures Qwik City for the Vercel Edge runtime.

```typescript
import { createQwikCity } from '@builder.io/qwik-city/middleware/vercel-edge';
import qwikCityPlan from '@qwik-city-plan';
import render from './entry.ssr';
 
export default createQwikCity({ render, qwikCityPlan });
```

--------------------------------

### Install Firebase Adapter

Source: https://qwik.dev/docs/deployments/firebase

Use the `add` command to integrate the Firebase adapter into your Qwik City project. This command automatically configures necessary files.

```bash
pnpm run qwik add firebase
```

```bash
npm run qwik add firebase
```

```bash
yarn run qwik add firebase
```

```bash
bun run qwik add firebase
```

--------------------------------

### Incorrect Route Loader Naming Convention

Source: https://qwik.dev/docs/advanced/eslint

Route loader function names must start with `use`. Using other prefixes like `get` is not recommended.

```typescript
import { routeLoader$ } from '@builder.io/qwik-city';

export const getProductDetails = routeLoader$(async (requestEvent) => {
  const res = await fetch(`https://.../products/${requestEvent.params.productId}`);
  const product = await res.json();
  return product as Product;
});
```

--------------------------------

### Install Production Dependencies (bun)

Source: https://qwik.dev/docs/deployments/self-hosting

Install only production dependencies on the server using bun. The `--production` flag is used to exclude development dependencies.

```bash
bun install --production
```

--------------------------------

### Conditional CSS Animations with `qviewTransition` Event

Source: https://qwik.dev/docs/cookbook/view-transition

Listen for the `qviewTransition` event to run specific logic before an animation starts. This example animates only visible items by setting a `data-has-view-transition` attribute.

```typescript
export default component$(() => {
  // In this case we need the callback to be sync, else the transition might have already happened
  useOnDocument('qviewTransition', sync$((event: CustomEvent<ViewTransition>) => {
    const transition = event.detail;
    const items = document.querySelectorAll('.item');
    for (const item of items) {
      if (!item.checkVisibility()) continue;
      item.dataset.hasViewTransition = true;
    }
  }))
  return (
    <ul>
      {list.map((item) => (
        // Create a name per item
        <li key={item.id} class="item" style={{viewTransitionName: `_${item.id}_`}}>...</li>
      ))}
    </ul>
  )
})
```

```css
.item[data-has-view-transition="true"] {
  view-transition-class: animated-item;
}
::view-transition-new(.animated-item):only-child {
  animation: fade-in 200ms;
}
::view-transition-old(.animated-item):only-child {
  animation: fade-out 200ms;
}
```

--------------------------------

### Install Capawesome Live Update Plugin

Source: https://qwik.dev/docs/guides/capacitor

Install the Capawesome Live Update plugin using pnpm. This is the first step to enable OTA updates.

```bash
pnpm i @capawesome/capacitor-live-update
```

--------------------------------

### Compress Build Assets with Gzip and Brotli

Source: https://qwik.dev/docs/deployments/self-hosting

Installs compression tools and then uses `find`, `xargs`, `gzip`, and `brotli` to pre-compress static assets in the `dist` directory. This should be run as part of your build process.

```bash
# Install compression tools
npm install -g brotli-cli gzip-cli

# Compress build assets in parallel with maximum compression
find dist/build dist/assets -type f -regex '.*\.\(js\|css\|html\|json\)$' -print0 | xargs -0 gzip -9 -k &
find dist/build dist/assets -type f -regex '.*\.\(js\|css\|html\|json\)$' -print0 | xargs -0 brotli -15 -k &
wait
```

--------------------------------

### Install CssNano Plugin

Source: https://qwik.dev/docs/integrations/postcss

Install the CssNano plugin using your preferred package manager to further optimize your CSS. After installation, update the postcss.config.js file.

```bash
pnpm install cssnano
```

```bash
npm install cssnano
```

```bash
yarn add cssnano
```

```bash
bun install cssnano
```

--------------------------------

### Install Vercel Edge Adapter with bun

Source: https://qwik.dev/docs/deployments/vercel-edge

Use this command to add the vercel-edge adapter to your Qwik City project using bun. It automatically installs dependencies and configures the build.

```bash
bun run qwik add vercel-edge
```

--------------------------------

### Install Azure SWA Adapter

Source: https://qwik.dev/docs/deployments/azure-swa

Use the 'add' command to integrate the azure-swa adapter into your Qwik City project. This command sets up necessary configuration files and scripts.

```bash
pnpm run qwik add azure-swa
```

```bash
npm run qwik add azure-swa
```

```bash
yarn run qwik add azure-swa
```

```bash
bun run qwik add azure-swa
```

--------------------------------

### Initialize Native Platforms with Capacitor

Source: https://qwik.dev/docs/guides/capacitor

Create the native project files for iOS and Android using the Capacitor CLI.

```bash
npx cap add ios
npx cap add android
```

--------------------------------

### Initializing Database with Environment Variables

Source: https://qwik.dev/docs/guides/env-variables

Initialize the database connection using environment variables within a Qwik City plugin. This example shows how to retrieve database URL and authentication token from environment variables and use them to initialize the database.

```typescript
export const onRequest: RequestHandler = async ({ env }) => {
  const url = env.get('PRIVATE_LIBSQL_DB_URL')!;
  const authToken = env.get('PRIVATE_LIBSQL_DB_API_TOKEN')!;
  await initializeDbIfNeeded(initLibSql(url, authToken));
};
```

--------------------------------

### Install Production Dependencies (npm)

Source: https://qwik.dev/docs/deployments/self-hosting

Install only production dependencies on the server using npm. Use the `--omit=dev` flag to exclude development dependencies.

```bash
npm install --omit=dev
```

--------------------------------

### Install Vercel Edge Adapter with npm

Source: https://qwik.dev/docs/deployments/vercel-edge

Use this command to add the vercel-edge adapter to your Qwik City project using npm. It automatically installs dependencies and configures the build.

```bash
npm run qwik add vercel-edge
```

--------------------------------

### Add Vitest to Qwik Project

Source: https://qwik.dev/docs/integrations/vitest

Use these commands to install Vitest in your Qwik project. After installation, a new component and its corresponding test file will be added to your project.

```bash
pnpm run qwik add vitest
```

```bash
npm run qwik add vitest
```

```bash
yarn run qwik add vitest
```

```bash
bun run qwik add vitest
```

--------------------------------

### Vitest Unit Test for Example Component

Source: https://qwik.dev/docs/integrations/vitest

Example unit tests for the 'ExampleTest' component using Vitest and Qwik's testing utilities. These tests cover rendering with different props and simulating user interactions like clicks.

```typescript
import { createDOM } from '@builder.io/qwik/testing';
import { test, expect } from 'vitest';
import { ExampleTest } from './example';
 
test(`[ExampleTest Component]: Should render ⭐`, async () => {
  const { screen, render } = await createDOM();
  await render(<ExampleTest flag={true} />);
  expect(screen.outerHTML).toContain('⭐');
  const div = screen.querySelector('.icon') as HTMLElement;
  expect(div.outerHTML).toContain('⭐');
});
 
test(`[ExampleTest Component]: Should render 💣`, async () => {
  const { screen, render } = await createDOM();
  await render(<ExampleTest flag={false} />);
  expect(screen.outerHTML).toContain('💣');
});
 
test(`[ExampleTest Component]: Click counter +1`, async () => {
  const { screen, render, userEvent } = await createDOM();
  await render(<ExampleTest flag={true} />);
 
  expect(screen.outerHTML).toContain('Count:0');
 
  const spanBefore = screen.querySelector('span') as HTMLDivElement;
  await userEvent('.btn-counter', 'click');
  expect(spanBefore.innerHTML).toEqual('Count:1');
 
  const spanAfter = screen.querySelector('span') as HTMLDivElement;
  await userEvent('button', 'click');
  expect(spanAfter.innerHTML).toEqual('Count:2');
});
```

--------------------------------

### Netlify Edge Entry Middleware

Source: https://qwik.dev/docs/deployments/netlify-edge

Configure the entry file for Netlify Edge Functions. This example shows how to create a Qwik City middleware instance using the built-in `createQwikCity` function.

```typescript
import { createQwikCity } from '@builder.io/qwik-city/middleware/netlify-edge';
import qwikCityPlan from '@qwik-city-plan';
import render from './entry.ssr';
 
export default createQwikCity({ render, qwikCityPlan });
```

--------------------------------

### GitHub Actions Workflow for Deployment

Source: https://qwik.dev/docs/deployments/github-pages

This workflow automates building and deploying your Qwik site to GitHub Pages on pushes to the main branch. It checks out code, sets up pnpm and Node.js, installs dependencies, builds the site, uploads artifacts, and deploys.

```yaml
# FILE: .github/workflows/deploy.yml
# ==========================================
 
name: Deploy to GitHub Pages
 
on:
  push:
    branches: 'main' 

jobs:
  build_site:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v5

      - name: Install pnpm
        uses: pnpm/action-setup@v4
        with:
          version: 10.15.0

      - name: Install Node.js
        uses: actions/setup-node@v5
        with:
          node-version: 24.7.0
          cache: 'pnpm'

      - run: corepack enable

      - name: Install dependencies
        run: pnpm install --frozen-lockfile

      - name: build
        run: |
          pnpm run build

      - name: Upload Artifacts
        uses: actions/upload-pages-artifact@v3
        with:
          path: 'dist/github-repository-name/'

  deploy:
    needs: build_site
    runs-on: ubuntu-latest

    permissions:
      pages: write
      id-token: write

    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}

    steps:
      - name: Deploy
        id: deployment
        uses: actions/deploy-pages@v4

```

--------------------------------

### Create Qwik Project with Bun

Source: https://qwik.dev/docs/qwikcity

Use this command to create a new Qwik City starter project using Bun.

```bash
bun create qwik@latest
```

--------------------------------

### Install Drizzle ORM with Qwik CLI

Source: https://qwik.dev/docs/integrations/drizzle

Use the Qwik CLI to add Drizzle ORM to your project. This command installs necessary dependencies and sets up the initial Drizzle schema folder.

```bash
pnpm run qwik add drizzle
```

```bash
npm run qwik add drizzle
```

```bash
yarn run qwik add drizzle
```

```bash
bun run qwik add drizzle
```

--------------------------------

### Static Site Deployment with rsync

Source: https://qwik.dev/docs/deployments/self-hosting

Example command to copy the contents of the `dist` directory to your web server's document root using rsync. This is suitable for static site deployments.

```bash
# Example using rsync
rsync -avz dist/ user@your-server:/path/to/webroot/
```

--------------------------------

### Install Vercel Edge Adapter with yarn

Source: https://qwik.dev/docs/deployments/vercel-edge

Use this command to add the vercel-edge adapter to your Qwik City project using yarn. It automatically installs dependencies and configures the build.

```bash
yarn run qwik add vercel-edge
```

--------------------------------

### Install Vercel Edge Adapter with pnpm

Source: https://qwik.dev/docs/deployments/vercel-edge

Use this command to add the vercel-edge adapter to your Qwik City project using pnpm. It automatically installs dependencies and configures the build.

```bash
pnpm run qwik add vercel-edge
```

--------------------------------

### Add Qwik Application to Existing Nx Workspace

Source: https://qwik.dev/docs/integrations/nx

Install the qwik-nx plugin and then use the Nx CLI to generate a new Qwik application within your existing workspace.

```bash
pnpm install qwik-nx
```

```bash
npm install qwik-nx
```

```bash
yarn add qwik-nx
```

```bash
bun install qwik-nx
```

```bash
nx generate qwik-nx:app
```

--------------------------------

### Reverse Proxy Endpoint Example

Source: https://qwik.dev/docs/endpoints

Demonstrates how to create a reverse proxy by fetching from another server and sending the response back to the client.

```APIDOC
## GET /proxy/

### Description
Creates a reverse proxy by fetching data from another URL and returning it to the client.

### Method
GET

### Endpoint
/proxy/

### Parameters
#### Query Parameters
(None explicitly defined in the example, but the underlying fetch might use URL parameters)

### Request Example
(No request body for this GET request)

### Response
#### Success Response (200)
- The response body will be the content fetched from the proxied URL.

### Response Example
(Depends on the content of the proxied URL)
```

--------------------------------

### Install Tailwind CSS with Qwik

Source: https://qwik.dev/docs/cookbook/theme-management

Use the Qwik CLI to add Tailwind CSS to your project. Choose your preferred package manager.

```bash
pnpm run qwik add tailwind
```

```bash
npm run qwik add tailwind
```

```bash
yarn run qwik add tailwind
```

```bash
bun run qwik add tailwind
```

--------------------------------

### Install Cloudflare Workers Adapter

Source: https://qwik.dev/docs/deployments/cloudflare-workers

Use the add command to integrate the cloudflare-workers adapter into your Qwik City project.

```bash
pnpm run qwik add cloudflare-workers
```

```bash
npm run qwik add cloudflare-workers
```

```bash
yarn run qwik add cloudflare-workers
```

```bash
bun run qwik add cloudflare-workers
```

--------------------------------

### Qwik Component Chunk (app_component_akbu84a8zes.js)

Source: https://qwik.dev/docs/faq

An example of a Qwik component chunk generated by the optimizer, demonstrating lazy-loaded event handlers.

```javascript
import { jsx as _jsx } from '@builder.io/qwik/jsx-runtime';
import { qrl } from '@builder.io/qwik';
export const App_component_AkbU84a8zes = () => {
  console.log('render');
  return /*#__PURE__*/ _jsx('p', {
    onClick$: qrl(
      () => import('./app_component_p_onclick_01pegc10cpw'),
      'App_component_p_onClick_01pEgC10cpw'
    ),
    children: 'Hello Qwik',
  });
};
```

--------------------------------

### Install AWS Lambda Adapter

Source: https://qwik.dev/docs/deployments/aws-lambda

Use the `add` command with your preferred package manager to integrate the `aws-lambda` adapter. This command updates configuration files and scripts.

```bash
pnpm run qwik add aws-lambda
```

```bash
npm run qwik add aws-lambda
```

```bash
yarn run qwik add aws-lambda
```

```bash
bun run qwik add aws-lambda
```

--------------------------------

### Dynamically Render Components in Qwik

Source: https://qwik.dev/docs/faq

Use a vDOM sparingly for dynamic components to leverage attractive DX properties. This example shows how to dynamically choose and render a component from a list.

```typescript
const DynamicList = [ CompA, CompB, ...];
export const DynamicExample = component$(() => {
  const idx = Math.floor(Math.random() * DynamicList.length);
  const Component = DynamicList[idx];
  {/* Dynamically chose which component to render */}
  return <Component/>;
})
```

--------------------------------

### Capacitor Configuration

Source: https://qwik.dev/docs/guides/capacitor

Example configuration for `capacitor.config.ts`. Ensure `webDir` is set to 'dist' and configure server schemes as needed.

```typescript
import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-qwik-empty-starter',
  webDir: 'dist',
  server: {
    iosScheme: 'capacitor',
    androidScheme: 'https'
  }
};

export default config;
```

--------------------------------

### Start Qwik App with PM2 (Fastify)

Source: https://qwik.dev/docs/deployments/self-hosting

Use PM2 to manage your Fastify-based Qwik application in production. This ensures the application stays running and can be easily controlled.

```bash
npm install -g pm2

# For Fastify
pm2 start server/entry.fastify.js --name qwik-app
```

--------------------------------

### Systemd Service File for Qwik Application

Source: https://qwik.dev/docs/deployments/self-hosting

Create a systemd service file to manage your Qwik application as a background service. This example is for an Express server.

```ini
[Unit]
Description=Qwik Application
After=network.target

[Service]
Type=simple
User=qwikuser
WorkingDirectory=/path/to/your/app
ExecStart=/usr/bin/node server/entry.express.js
Restart=always
Environment=NODE_ENV=production

[Install]
WantedBy=multi-user.target
```

--------------------------------

### Add Fastify Adapter for Node.js

Source: https://qwik.dev/docs/deployments/self-hosting

Use this command to add the Fastify adapter for Node.js deployments. Ensure Node.js is installed.

```bash
npx qwik add fastify
```

--------------------------------

### Streaming Response Endpoint Example

Source: https://qwik.dev/docs/endpoints

Shows how to manually create a streaming response using `getWritableStream()`, suitable for Server-Sent Events.

```APIDOC
## GET /stream/

### Description
Manually creates a streaming response, writing data to the HTTP response stream over time.

### Method
GET

### Endpoint
/stream/

### Parameters
(None)

### Request Example
(No request body for this GET request)

### Response
#### Success Response (200)
- The response will be a stream of text data, with chunks sent over time.

### Response Example
(Streamed text output, e.g., 'Hello World\nAfter 100ms\nAfter 200ms\nEND')
```

--------------------------------

### Serve OTA Update Bundles Locally

Source: https://qwik.dev/docs/guides/capacitor

Start a simple HTTP server to host the generated OTA update bundles from the 'ota_bundles' directory on port 8000. This allows for local testing of the update mechanism.

```bash
npx serve ota_bundles -l 8000
```

--------------------------------

### Default Layout Example

Source: https://qwik.dev/docs/advanced/routing

Illustrates the default layout structure for the root path '/' using src/routes/layout.tsx and src/routes/index.tsx.

```typescript
┌──────────────────────────────────────────────────┐
│       src/routes/layout.tsx                      │
│  ┌────────────────────────────────────────────┐  │
│  │    src/routes/index.tsx                    │  │
│  │                                            │  │
│  └────────────────────────────────────────────┘  │
│                                                  │
└──────────────────────────────────────────────────┘
```

--------------------------------

### Create Qwik Project with Yarn

Source: https://qwik.dev/docs/qwikcity

Use this command to create a new Qwik City starter project using Yarn.

```bash
yarn create qwik
```

--------------------------------

### Qwik City Provider Setup

Source: https://qwik.dev/docs/api

Initialize Qwik City by wrapping your application with QwikCityProvider. This component provides necessary context for Qwik City hooks and should be placed at the root of your application.

```typescript
export default component$(() => {
  /**
   * The root of a QwikCity site always start with the <QwikCityProvider> component,
   * immediately followed by the document's <head> and <body>.
   *
   * Don't remove the <head> and <body> elements.
   */
 
  return (
    <QwikCityProvider>
      <head>
        <meta charSet="utf-8" />
        <link rel="manifest" href="/manifest.json" />
        <RouterHead />
      </head>
      <body lang="en">
        <RouterOutlet />
      </body>
    </QwikCityProvider>
  );
});
```

--------------------------------

### Install Cloudflare Pages Adapter

Source: https://qwik.dev/docs/deployments/cloudflare-pages

Use the 'add' command to integrate the cloudflare-pages adapter into your Qwik City project. This command automatically updates configuration files and package.json scripts.

```bash
pnpm run qwik add cloudflare-pages
```

```bash
npm run qwik add cloudflare-pages
```

```bash
yarn run qwik add cloudflare-pages
```

```bash
bun run qwik add cloudflare-pages
```

--------------------------------

### Initiating Sign-In with useSignIn (Form)

Source: https://qwik.dev/docs/integrations/authjs

Use the `useSignIn` route action with the `<Form>` component to initiate a sign-in flow. This example shows how to specify a provider and a redirect URL.

```typescript
import { component$ } from '@builder.io/qwik';
import { Form } from '@builder.io/qwik-city';
import { useSignIn } from '~/routes/plugin@auth';
 
export default component$(() => {
  const signIn = useSignIn();
  return (
    <Form action={signIn}>
      <input type="hidden" name="providerId" value="github" />
      <input type="hidden" name="options.redirectTo" value="http://qwik-auth-example.com/dashboard" />
      <button>Sign In</button>
    </Form>
  );
});

```

--------------------------------

### Sync Web Assets with Native Platforms

Source: https://qwik.dev/docs/guides/capacitor

Sync the built web assets from your Qwik project to the native Capacitor projects.

```bash
npx cap sync
```

--------------------------------

### Qwik City Server Action with Form Component

Source: https://qwik.dev/docs/action

A server action for adding a user, integrated with the `<Form>` component. This example demonstrates a simpler action signature and usage within a component.

```typescript
import { component$ } from '@builder.io/qwik';
import { routeAction$, Form } from '@builder.io/qwik-city';
 
export const useAddUser = routeAction$(async (user) => {
  const userID = await db.users.add(user);
  return {
    success: true,
    userID,
  };
});
 
export default component$(() => {
  const action = useAddUser();
  return (
    <Form action={action}>
      <input name="name" />
      <button type="submit">Add user</button>
      {action.value?.success && <p>User added successfully</p>}
    </Form>
  );
});
```

--------------------------------

### Run Docker Container

Source: https://qwik.dev/docs/cookbook/node-docker-deploy

Command to start a Docker container from the built image. This maps port 3000 on the host to port 3000 in the container.

```bash
docker run -dp 127.0.0.1:3000:3000 your-image

```

--------------------------------

### Dynamic Component Loading with Glob Import

Source: https://qwik.dev/docs/cookbook/glob-import

Demonstrates how to dynamically load components using `import.meta.glob` and a wrapper component. This example shows how to map a name prop to a component path and load it on demand.

```typescript
import {
  type Component,
  component$,
  useSignal,
  useTask$,
} from '@builder.io/qwik';

const metaGlobComponents: Record<string, any> = await import.meta.glob(
  '/src/examples/*',
  { import: 'default' }
);

export default component$(() => {
  return (
    <div>
      <MetaGlobExample name="example1" />
      <MetaGlobExample name="example2" />
      <MetaGlobExample name="example3" />
    </div>
  );
});

export const MetaGlobExample = component$<{ name: string }>(({ name }) => {
  const MetaGlobComponent = useSignal<Component<any>>();
  const componentPath = `/src/examples/${name}.tsx`;

  useTask$(async () => {
    MetaGlobComponent.value = await metaGlobComponents[componentPath]();
  });

  return <>{MetaGlobComponent.value && <MetaGlobComponent.value />}</>;
});
```

--------------------------------

### Deploy Application to Azion

Source: https://qwik.dev/docs/deployments/azion

Execute this command to build and deploy your Qwik application to the Azion Web Platform. The Azion CLI will handle the build process and deployment.

```bash
azion deploy
```

--------------------------------

### Example robots.txt for Dynamic Sitemap (SSR)

Source: https://qwik.dev/docs/advanced/sitemaps

Update your robots.txt file to point search engines to the dynamically generated sitemap. Replace '<YOUR_HOSTNAME>' with your site's URL.

```text
User-agent: *
Allow: /
 
# Uncomment the following line and replace <unindexedFolder> with the actual folder name you want to disallow
# Disallow: /<unindexedFolder>/
 
Sitemap: https://<YOUR_HOSTNAME>/dynamic-sitemap.xml
```

--------------------------------

### Initiating Sign-In with useSignIn (Programmatic)

Source: https://qwik.dev/docs/integrations/authjs

Initiate a sign-in flow programmatically using the `useSignIn` route action. This example demonstrates calling `signIn.submit` with provider and redirect options.

```typescript
import { component$ } from '@builder.io/qwik';
import { useSignIn } from '~/routes/plugin@auth';
 
export default component$(() => {
  const signIn = useSignIn();
  return (
    <button onClick$={() => signIn.submit({ providerId: 'github', options: { redirectTo: 'http://qwik-auth-example.com/dashboard' } })}>Sign In</button>
  );
});

```

--------------------------------

### JSON Endpoint Example

Source: https://qwik.dev/docs/endpoints

An example of an endpoint that returns a JSON response. This stops the middleware chain.

```APIDOC
## GET /greet/

### Description
This endpoint returns a simple JSON object {'hello':'world'}.

### Method
GET

### Endpoint
/greet/

### Response
#### Success Response (200)
- **hello** (string) - A greeting message.

### Request Example
(No request body for this GET request)

### Response Example
{
  "hello": "world"
}
```

--------------------------------

### Create Qwik Library with npm

Source: https://qwik.dev/docs/advanced/library

Use this command to scaffold a new Qwik component library project with npm.

```bash
npm create qwik library my-library
```

--------------------------------

### Install Production Dependencies (pnpm)

Source: https://qwik.dev/docs/deployments/self-hosting

Install only production dependencies on the server using pnpm. This is part of the Node.js server deployment method.

```bash
pnpm install --prod
```

--------------------------------

### Qwik Rendered HTML Example

Source: https://qwik.dev/docs/advanced/qrl

This HTML is produced after Qwik code execution. Note the `q:base` attribute on the body and the `on:click` attribute on the button, which are crucial for Qwikloader to resolve and load chunks.

```html
<html>
  <body q:base="/build/">
    <button q:obj="456, 123" on:click="./chunk-c.js#Counter_onClick[0,1]">0</button>
    <script>
      /*Qwikloader script*/
    </script>
    <script type="qwik/json">
      {...json...}
    </script>
  </body>
</html>
```

--------------------------------

### Link Local Application to Azion

Source: https://qwik.dev/docs/deployments/azion

Run this command to link your local Qwik application to a new or existing project in Azion. Follow the prompts to name your application and select the Qwik preset.

```bash
azion link
```

--------------------------------

### Create Qwik Library with bun

Source: https://qwik.dev/docs/advanced/library

Use this command to scaffold a new Qwik component library project with bun.

```bash
bun create qwik library my-library
```
Tokens:
Raw