DEV Community

Rishi Raj Jain
Rishi Raj Jain

Posted on • Edited on

Qwik look at Resumability with Astro on Vercel

#webdev #programming #javascript #beginners

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

Top comments (0)