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
Add Qwik Integration
Integrate Qwik into your Astro project with a single command using the Astro CLI:
npx astro add @qwikdev/astro
Add Vercel Integration
Integrate Vercel into your Astro project with a single command using the Astro CLI:
npx astro add vercel
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"
}
}
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>;
});
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>
Deploy to Vercel
Deploy your Astro project with Qwik integration to Vercel using the following command:
vercel deploy --prod
Checkout the Live Example
Explore a live example that showcases all the steps above: Qwik Astro Example
Top comments (0)