vite-ssg-but-for-everyone

https://github.com/antfu/vite-ssg but for everyone (including your mom)

Motivation 🤔

Tried to get SSG (Static Site Generation) similar to that of the preact cli successor (whatever that is called again) but didn't find anything working with Solid. Tried https://vitejs.dev/guide/ssr.html for example and ye.

Eventually I found https://github.com/antfu/vite-ssg which basically did do what I wanted but only for Vue. So I forked it, removed all the Vue specific stuff... and uhh basically changed everything (there really is not much left of the original 🤣).

Features I added in this fork:

• Framework agnostic (if you're using Vite chances are you can use this project for SSG)
  • includes preloading
• Automatic CSP generation for nginx (inserts sha-256 hashes for inline script tags) (damn it feels good to get A+ on Mozilla Observatory)
• Automatic generation for dynamic routes

Setup 🚀

// package.json
{
  "scripts": {
-   "build": "vite build"
+   "build": "vite-ssg build"
  }
}

// vite.config.ts
import { defineConfig } from "vite"
import solid from "vite-plugin-solid"

export default defineConfig({
  plugins: [
-   solid(),
+   solid({ ssr: true }),
  ],
})

// src/index.tsx
import { ComponentProps } from "solid-js"
import { __ssrLoadedModules } from "vite-ssg-but-for-everyone"
import type { EntryFileExports } from "vite-ssg-but-for-everyone/node"
import App from "./App"

const ROOT_ELEMENT_ID = "root"

if (typeof window !== "undefined") {
  const main = () => <App />
  const root = document.getElementById(ROOT_ELEMENT_ID)!

  if (import.meta.env.VITE_SSG) {
    const { hydrate } = await import("solid-js/web")
    hydrate(main, root)
  } else {
    const { render } = await import("solid-js/web")
    render(main, root)
  }
}

export const prerender: EntryFileExports["prerender"] = async context => {
  const head = [] as ComponentProps<typeof App>["head"]
  const main = () => <App url={context.route} head={head} />

  const { renderToStringAsync, generateHydrationScript } = await import("solid-js/web")
  const { renderTags } = await import("@solidjs/meta")
  return {
    html: await renderToStringAsync(main),
    head: {
      elements: [
        generateHydrationScript(),
        renderTags(head ?? []),
      ],
    },
    preload: __ssrLoadedModules.slice(),
  }
}

export const setupPrerender: EntryFileExports["setupPrerender"] = async () => {
  const { default: routes } = await import("./routes")

  return {
    root: ROOT_ELEMENT_ID,
    routes: routes
      .map(r => {
        const path = String(r.path)

        if (path === "**") {
          return "__404"
        }

        if (path.endsWith(":id")) {
          return path.replace(":id", "__id")
        }

        return path
      })
      .filter(i => !i.includes(":") && !i.includes("*")),
    csp: {
      fileName: "csp.conf",
      fileType: "nginx-conf",
      template: "script-src 'self' {{INLINE_SCRIPT_HASHES}}; object-src 'none'; frame-ancestors 'self'; base-uri 'self'; form-action 'self'; worker-src 'self' blob:; trusted-types *;",
    },
    dyn: {
      fileName: "dyn.conf",
      fileType: "nginx-conf",
      routes: [
        {
          matches: "^(.*)/__id$",
          template: `
            location ~ ^{{$1}}/[^/]+ {
              limit_req zone=mylimit burst=20 nodelay;
              try_files $uri {{$0}}/index.html =404;
            }
          `,
        },
      ],
    },
  }
}