DEV Community

Rishi Raj Jain
Rishi Raj Jain

Posted on • Edited on

3

Qwik look at Resumability with Astro on Vercel

In this tutorial, we'll explore how to use recently released, Qwik and Astro integration, and deploy it to Vercel. By the end, you'll have a live website running both Astro and Qwik, giving you the best of fast renderer and resumability!

Initiate an Astro Project using CLI

To start a new Astro project, you can use the following command to create a basic example named "qwik-astro-example".

npm create astro@latest qwik-astro-example
Enter fullscreen mode Exit fullscreen mode

Add Qwik Integration

Integrate Qwik into your Astro project with a single command using the Astro CLI:

npx astro add @qwikdev/astro
Enter fullscreen mode Exit fullscreen mode

Add Vercel Integration

Integrate Vercel into your Astro project with a single command using the Astro CLI:

npx astro add vercel
Enter fullscreen mode Exit fullscreen mode

Update tsconfig.json for JSX and Qwik Support

Ensure your tsconfig.json file supports JSX and Qwik syntax:

{
  "extends": "astro/tsconfigs/base",
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@builder.io/qwik"
  }
}
Enter fullscreen mode Exit fullscreen mode

Create a Qwik Component

Build a Qwik component that updates a counter when a button is clicked:

import { component$, useSignal } from "@builder.io/qwik";

export const Counter = component$(() => {
  const counter = useSignal(1);
  return <button onClick$={() => counter.value++}>{counter.value}</button>;
});
Enter fullscreen mode Exit fullscreen mode

Create a Page with Astro and Include the Qwik Counter Component

Compose a page using Astro and include the Qwik Counter component on the page:

---
import { Counter } from "../components/Counter";
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
  </head>
  <body>
    <h1>Astro.js - Qwik</h1>
    <Counter />
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Deploy to Vercel

Deploy your Astro project with Qwik integration to Vercel using the following command:

vercel deploy --prod
Enter fullscreen mode Exit fullscreen mode

Checkout the Live Example

Explore a live example that showcases all the steps above: Qwik Astro Example

SurveyJS custom survey software

Simplify data collection in your JS app with a fully integrated form management platform. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more. Integrates with any backend system, giving you full control over your data and no user limits.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay