Static Site Generation Config

Below is an example of a src/entry.static.tsx file, which is the initial file used for a Static Site Generation (SSG) build. Just like a server's entry file for SSR, such as src/entry.server.tsx, it should import your app's render function from ./entry.ssr.

// file: src/entry.static.tsx
import { qwikCityGenerate } from '@builder.io/qwik-city/static/node';
import render from './entry.ssr';
import { fileURLToPath } from 'url';
import { join } from 'path';

qwikCityGenerate(render, {
  origin: 'https://qwik.builder.io',
  outDir: join(fileURLToPath(import.meta.url), '..', '..', 'dist'),
});

You then can add the build.ssg script to package.json for building the generator code and add it to the build script to have it ready after each build:

  "build": "npm run typecheck && npm run build.client && npm run build.ssr && npm run build.ssg",
  "build.ssg": "vite build --ssr src/entry.static.tsx",

In node you can run the generation after building using:

node server/entry.static.js

Your build files will be generated into the dist folder, as configured in src/entry.static.tsx.

SSG Config

The src/entry.static.tsx file also includes the SSG config, which would be custom for each implementation.

origin

The URL origin, which is a combination of the scheme (protocol) and hostname (domain). For example, https://qwik.builder.io has the protocol https:// and domain qwik.builder.io. However, the origin does not include a pathname.

The origin is used to provide a full URL during Static Site Generation (SSG), and to simulate a complete URL rather than just the pathname. For example, in order to render a correct canonical tag URL or URLs within the sitemap.xml, the origin must be provided too.

If the site also starts with a pathname other than /, please use the basePathname option in the Qwik City config options.

outDir

The outDir is a file system output directory where the static files should be written. In the example above, it's using Node's fileURLToPath to create an absolute file system path to write the static HTML files to.

Javascript Runtimes

For a Javascript project, it's quite common for the build's runtime to be built on top of Node.js. However, the core of Qwik City static site generation isn't tied to using only Node.js, which is why the qwikCityGenerate() function is imported from @builder.io/qwik-city/static/node. By scoping the generate function to a specific runtime, such as Node.js, this gives Qwik City the flexibility to also generate SSG from other runtimes in the future, such as Deno or Bun.