🌐 I Just Made Qwik Quicker! Added HTTP2/S Support! (Vite Plugin)

[burgil]

Hello Fellow Wizards! 🧙‍♂️

I'm excited to share a recent improvement I made to Qwik! 🎉

Here's a qwik overview of the changes: 😉

• HTTP/2 support to improve server communication efficiency. 🐇
• Enhanced security with HTTPS support, even on localhost. 🔒

• The certificates are generated automagically using mkcert to create locally trusted SSL certificates for secure connections on localhost.
• Detailed installation and usage instructions are provided for Windows, macOS, and Linux, though the process has only been tested on Windows so far.

import { createCA, createCert } from 'mkcert';

const ca = await createCA({
  organization: organization,
  countryCode,
  state,
  locality,
  validity,
});

const cert = await createCert({
  ca: { key: ca.key, cert: ca.cert },
  domains: allowedDomains,
  validity,
});

Check out the full breakdown in my video:
(🎧 Loud music alert ops)
🎬 Part 1 - Part 2 - Part 3 - Part 4
Watch in full screen!

Or if you prefer to dive right in checkout my gist: Code 👨‍💻

---

I'm looking forward to hearing your thoughts and feedback. If this is something you'd like to see integrated officially into Qwik, I'd love to collaborate on the steps required for that! 🙏 Please guide me on how I can assist with the integration process.

Why I chose Qwik? 🤔

I was looking for a solution to improve performance on my site built with React and Vite (SSG/Wrangler), but I quickly realized that the heavy JavaScript bundle was slowing everything down.

After exploring Qwik, I was blown away by its ability to deliver lightning-fast performance through its unique approach of optimizing the critical load.

I truly believe in Qwik's potential and I'm passionate about contributing to its growth. Let's make Qwik even qwiker together!

I’m excited about contributing to Qwik’s growth and helping make it an even more powerful framework for the future of web development.

Having experience with WordPress and PHP helped me appreciate why Qwik is so powerful. In WordPress, performance optimization is key, and understanding server-side rendering, caching, and how content is loaded efficiently made it easy for me to see the value in Qwik's approach.

With Qwik’s fine-grained lazy loading and minimal JavaScript at startup, I realized it was the perfect solution to tackle the performance challenges I was facing with my React and Vite site, Even if it's just a statically generated site.

Thanks for checking this out, and I can't wait to hear from you! 😄

• Burgil | GitHub

[burgil]

Usage

pnpm i -D mkcert
npm i -D mkcert
yarn add -D mkcert
...

vite.config.ts

export default defineConfig(({ command: _command, mode: _mode }): UserConfig => {
	return {
    ...
		plugins: [
			qwikCity({
				platform,
			}),
			qwikVite(),
			tsconfigPaths(),

+			qwikHttp2s(),

		],
    ...
	};
});

Step 1: Follow the steps in the terminal to install the CA certificate

Step 2: Restart Your Browser

• After installing/uninstalling the CA certificate, restart your browser to apply the changes.

Verification: Visit your site (e.g., https://localhost:5173) to check if the connection is now secure (after install) or untrusted (after uninstall).

Advanced Usage

A Vite plugin for Qwik to dynamically configure HTTP2/S support.

Options

options

The main optional configuration object for the plugin.

options.infos

Certificate metadata including:

• options.infos.organization
  The organization name for the certificate authority. Defaults to the system hostname followed by "CA".

• options.infos.countryCode
  The country code for the certificate. Defaults to "US".

• options.infos.state
  The state or province name. Defaults to "California".

• options.infos.locality
  The locality or city name. Defaults to "San Francisco".

• options.infos.validity
  The certificate validity period in days. Defaults to 365 days.

options.customPaths

Optional paths for overriding the default certificate file locations.

options.allowedDomains

Optional list of allowed domains or IPs for the certificate.

options.debug

Optional debug mode flag. Defaults to true for verbose logging.

options.enabled

Whether the feature is enabled. Defaults to true.

			qwikHttp2s({
				// Optional configuration:
				// enabled: true,
				infos: {
					// countryCode: platform.cf.country,
					// state: platform.cf.region,
					// locality: platform.cf.city,
					// organization: `${os.hostname()} CA`,
					// validity: 365
				},
				customPaths: {
					dir: 'ssl',
					// key: 'key.pem',
					// cert: 'cert.pem',
					// ca: 'ca.crt',
				},
				// allowedDomains: ['127.0.0.1', 'localhost'],
				debug: false, // Mute Success Logs
			}),

[burgil]

To enable viewing the protocol in the devtools network tab, right click the columns and toggle Protocol

[burgil]

HTTP2 can only be used with HTTPS and localhost is hard to get working with HTTPS, this handles all of that

[burgil]

This also makes it possible to run the service worker on dev mode, right now notice that you have {!isDev && <ServiceWorker...
The reason for that is usually because service workers can't work on localhost, This plugin also fixes that!

[wmertens]

Nice!

So ideally we'd integrate this into qwik somehow, maybe via the qwik cli tool. It's not always trivial to trust a self-signed certificate, so we can't make it the default, but it would be great if one could run e.g. qwik ssl and it would set up the cert and would configure the project to serve on ssl, plus some build changes so that the service worker gets added.

[burgil]

Hi @wmertens !

Thank you for your kind words, Feel free to take this and integrate it however you want! What's mine yours now.

mkcert makes it possible to install the certificates automatically for you, but I didn't find the docs about it and forgot how to do it so I added manual installation instructions for the generated certificates instead (lazy), but this can be automated 100% that's the point, I got it to detect the OS and show you steps how to install and validate your localhost certificate manually, fairly easy, the fact this can be automated is nice to know. As I said in my discussion this was only tested on Windows, but should work just fine on the rest.
In my video, I think it was part 3, I showcase how to install the certificate following the instructions the plugin outputs per OS (But only tested on Windows)

There is also a discussion about it on discord: https://discord.com/channels/842438759945601056/1313429580907806730/1313843921067048960

Yeah I also don't think it should be the default, but nice addition