QGP Logo

Frequently Asked Questions

What is QGP?

Quark Gluon Plasma

It’s an extraordinarily hot and dense state of matter that existed for a brief moment after the Big Bang. It's also the name of this framework. Like Quark Gluon Plasma, this framework is designed to be extremely efficient and fast so you can build your dream project without worrying about performance or syncing configurations between multiple tools.

QGP is designed for building Multi-Page Applications (MPAs) with Single-Page Applications (SPA's) inside of them. It’s built on top of Astro and Vite. The idea is to leverage Astro’s island architecture to build a fast and efficient website, but still be able to use Vite’s HMR for developing complex SPAs. In this way, both the user and the developer can have a great experience.

What does QGP offer me?

The power of Astro

Everything that you see right now is powered by Astro. It started as a static site generator with a unique mixture of HTML and JSX templating, but it’s become so much more! Its list of extensive features includes, but isn’t limited to:

"Fat Islands"

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 faq.astro template.

But you can also use as much client-side JavaScript as you want. Entire docs section is implmented as SPA (with SSR/SSG) using solid-router. While Astro was envisioned as a Multi-Page Application framework, QGP helps you blur these lines by placing one or more SPAs inside your MPA.

Why not just use Astro?

The DX of Vite

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. While lazy loading entire React applications into your site is nice, 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. This server is preconfigured to share environment variables and TypeScript configuration with the main Astro server, so the only thing you need to worry about is building your app.

Can I try it?

Create QGP App

You can use the CLI to download a pre-configured template with an example app. Just follow these easy steps:

  1. Open a terminal in your folder of choice
  2. Type npm create qgp -t qgp-demo qgp-demo to download the template. (You can replace the second qgp-demo with any folder name you want.)
  3. Type cd qgp-demo (or your project name) 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 the entire site on the Astro dev server.
  8. Open http://localhost:5173 to see the React app on the Vite dev server.

You can just enter npm create qgp@latest if you want to explore the other templates, or create your own!

Where can I learn more?

The Docs

If you're unfamiliar with Astro and Vite, I suggest that you start with the official documentation. If you’re interested in learning more about QGP, check out our documentation or reach out on the links below.

Help us improve this page Open in Github Open in Codeflow