Tomáš Horáček heracek

Next.js client-only SPA example

Made this example to show how to use Next.js router for a 100% SPA (no JS server) app.

You use Next.js router like normally, but don't define getStaticProps and such. Instead you do client-only fetching with swr, react-query, or similar methods.

You can generate HTML fallback for the page if there's something meaningful to show before you "know" the params. (Remember, HTML is static, so it can't respond to dynamic query. But it can be different per route.)

Don't like Next? Here's how to do the same in Gatsby.

Building NW.js on macOS (for Mere Mortals) {: .doctitle}

This is an annotated version of Building NW.js from the official NW.js developer documentation. It includes my experience from building NW.js binaries for macOS, both Intel (x86-64) and M1 (arm64). The latter can be easily discerned since they are block-quoted and appear in red¹.

Not on GitHub though; they aggressively sanitize HTML in Markdown. Block quotes still work 😬 ↩

This example demonstrates how to polyfill the "fetch" event in Deno, and gives an example for how this can be used to run Cloudflare Workers in Deno.

To try it locally run the script below, and visit http://0.0.0.0:8080:

$ deno run --allow-net https://gist.githubusercontent.com/lucacasonato/1a30a4fa6ef6c053a93f271675ef93fc/raw/efcdc8e798604e194831830fcb962b50261384b3/example-worker.js

	// Types for the result object with discriminated union
	type Success<T> = {
	data: T;
	error: null;
	};

	type Failure<E> = {
	data: null;
	error: E;
	};

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>My Angular from Scratch</title>
	<style>
	.my-component {
	font-family: Arial, sans-serif;

	#!/usr/bin/env bash

	# Abort sign off on any error
	set -e

	# Start the benchmark timer
	SECONDS=0

	# Repository introspection
	OWNER=$(gh repo view --json owner --jq .owner.login)

	import proxy from 'http2-proxy';
	import type { Plugin, ProxyOptions } from 'vite';

	export const pluginHttp2Proxy = (): Plugin => {
	let routes: Record<string, string \| ProxyOptions>;
	return {
	name: 'vite-plugin-http2-proxy',
	config: (config) => {
	const { server } = config;
	routes = server?.proxy ?? {};

	#!/bin/zsh

	:<<'ABOUT_THIS_SCRIPT'
	-----------------------------------------------------------------------

	Written by:William Smith
	Partner Program Manager
	Jamf
	[email protected]
	https://gist.github.com/b6637160b65b751824943ede022daa17

	<?xml version="1.0" encoding="UTF-8"?>
	<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
	<plist version="1.0">
	<dict>
	<!-- not sure which one it is, so set both -->
	<key>Ensemble</key>
	<dict>
	<key>Enabled</key>
	<true/>
	</dict>

	const { exec } = require('child_process');
	const { promisify } = require('util');
	const path = require('path');

	module.exports.default = async function tsc(options, context) {
	process.chdir(
	path.join(context.cwd, context.workspace.projects[context.projectName].root)
	);

	try {

Tomáš Horáček heracek

Next.js client-only SPA example

Building NW.js on macOS (for Mere Mortals) {: .doctitle}

Footnotes