Welcome to QGP 👋 ⚛️

This project is in an extremely alpha state, but we use it to power our product at fogbender.com.

Why QGP?

The power of Astro

Everything that you see right now is powered by Astro. It started as a static site generator with a mix of HTML and JSX style templating, but it's become so much more! Here's a small list of it's extensive features:

• Native TypeScript and MDX support -- No need for plugins or extra config.
• Bring Your Own Framework -- Use React, Vue, Svelte, etc. (Astro components are great too!)
• Dynamic Route Rendering -- Choose between SSG and SSR by route.
• Island Architecture -- Choose when and how to hydrate your app with JavaScript (with 0kb by default!)
• Serverless Adapters for Vercel, Netlify, and Deno Deploy -- or build the app and host it yourself!
• and more! Check out the website for a full list of features.

With Astro, you can use as little client-side JavaScript as you want. This counter is powered by a simple script tag embedded right into the index.astro template.

But you can also use as much client-side JavaScript as you want. This example has an entire React App in it!

Why not just use Astro?

So, what's the point of QGP if Astro is already so great? Well, there's one limitation that we haven't explained yet. While Astro is built on top of Vite, it runs additional build steps that are not compatible with Vite's HMR.

This limitation is necessary for Astro to do some of its cool optimizations, but it is not ideal for developing complex applications. Lazy loading entire React applications into your site is nice, but testing them can be difficult when your state is lost every time you save a file.

Enter QGP

QGP simply sets up an additional Vite server that runs alongside Astro. This allows you to use Vite's HMR to develop your React app, while still using Astro's incredibly powerful tools. Additionally, Now, when you run npm run dev, it will start both the Astro dev server and the Vite dev server so you can work on both the app and the rest of your site at the same time.

Local Demo Instructions

For obvous reasons the only way to try out HMR is to run it locally

1. Open a terminal in your folder of choice
2. Type npm create qgp -t qgp-demo qgp-demo to start.
3. Type cd qgp-demo to enter the new folder.
4. Type npm i -g @antfu/ni to install a helpful tool.
5. Type ni to set up the project.
6. Type nr dev to start the dev server.
7. Open http://localhost:3000 to see Astro site.
8. Open http://localhost:5173 to see Vite SPA.

What's Next?

Like we said, we're just getting started. If you have any ideas or questions, feel free to open an issue on the GitHub repo.

Help us improve this page

Github