How can I host qwik framework on github pages?

Question

I've tried to use the documentation here and here in order to generate static files and put them into the docs folder, but for some reason, the site looks broken. The splitted JS files don't work as they should when using the auto-generated GitHub URL https://github.com/<UserID>/<RepoName>. So, I ended up using a subdomain of my own and having the errors which are posted at the of this post.

My vite.config.ts

import { qwikCity } from "@builder.io/qwik-city/vite";
import { qwikVite } from "@builder.io/qwik/optimizer";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig(() => {
  return {
    ssr: { target: "node", format: "cjs" },
    plugins: [
      qwikCity(),
      qwikVite({
        client: {
          outDir: "docs/",
        },
      }),
      tsconfigPaths(),
    ],
  };
});

My entry.static.tsx

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

// Execute Qwik City Static Site Generator
qwikCityGenerate(render, {
  origin: 'https://qwik.builder.io/',
  outDir: join(fileURLToPath(import.meta.url), '..', '..', 'docs'),
});

And my package.json

 "name": "my-qwik-basic-starter",
  "description": "Recommended for your first Qwik app (comes with Qwik City)",
  "engines": {
    "node": ">=15.0.0"
  },
  "private": true,
  "scripts": {
    "build": "qwik build",
    "build.client": "vite build",
    "build.full": "npm run build && npm run build.static && node server/entry.static.js",
    "build.preview": "vite build --ssr src/entry.preview.tsx",
    "build.static": "vite build --ssr src/entry.static.tsx",
    "build.types": "tsc --incremental --noEmit",
    "dev": "vite --mode ssr",
    "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
    "fmt": "prettier --write .",
    "fmt.check": "prettier --check .",
    "lint": "eslint \"src/**/*.ts*\"",
    "preview": "qwik build preview && vite preview --open",
    "ssg": "node server/entry.static",
    "start": "vite --open --mode ssr",
    "qwik": "qwik"
  },
  "devDependencies": {
    "@builder.io/qwik": "0.10.0",
    "@builder.io/qwik-city": "0.0.112",
    "@types/eslint": "8.4.6",
    "@types/node": "latest",
    "@typescript-eslint/eslint-plugin": "5.40.0",
    "@typescript-eslint/parser": "5.40.0",
    "eslint": "8.25.0",
    "eslint-plugin-qwik": "0.10.0",
    "node-fetch": "3.2.10",
    "prettier": "2.7.1",
    "sass": "^1.55.0",
    "typescript": "4.8.4",
    "vite": "3.1.7",
    "vite-tsconfig-paths": "3.5.1"
  },
  "dependencies": {
    "firebase": "^9.12.0",
    "minimasonry": "^1.3.0"
  }
}

Trying to run npm run build.full

Getting those errors in the console

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_qc_')
    at ee (q-9c2a9820.js:2:28350)
    at S (q-9c2a9820.js:2:28367)
    at q-9c2a9820.js:2:27830
    at Or (q-9c2a9820.js:2:28337)
    at Us (q-9c2a9820.js:2:17115)
    at Vs (q-9c2a9820.js:2:17549)
    at c ((index):8:2636)

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'Dt')
    at Vs (q-9c2a9820.js:2:17567)
    at c ((index):8:2636)

Not sure what I am missing here.

Thanks!

Answer 1

With "@builder.io/qwik": "0.11.0" & "@builder.io/qwik-city": "0.0.112"

and running "build.full": "npm run build && npm run build.ssg && npm run ssg"

run build.ssg beeing "build.ssg": "vite build --ssr src/entry.static.tsx"

I was able to deploy on Github Pages this repo, here. Using this deploy script :

  web-deploy:
    name:  Deploy
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/master'
    steps:
      - name: Setup Node.js for use with actions
        uses: actions/setup-node@v1
        with:
          node-version: 16

      - name:  Get latest code
        uses: actions/checkout@v2.5.0

      - name: Clean install dependencies
        run: npm ci

      - name: Build app
        run: npm run build && npm run build.ssg && npm run ssg

      - name: deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

Answer 2

To host on Github Page, you'll have to publish your project in static HTML. To do that in Qwik, you'll run

npm run qwik add

Select Adapter: Static site (.html files). Done!

You can read more about SSG here

Answer 3

I finally could successfully deploy to GitHub Pages but there's still issues that need to be fixed. I don't really know if they already are but I did let them know here Qwik Issues. What I did was copy all error's path from console and add them to my DocumentHead with repo's name.

I'm using Qwik v0.105.0

https://da8ah.github.io/qwik-digency-home/

Logs from the console in dev tools (right-bottom)

Website with dev tools open

Root component

export const subpath = "/qwik-digency-home";
<link rel="manifest" href={`${subpath}/manifest.json`} />

Router head

<link rel="icon" type="image/svg+xml" href={`${subpath}/favicon.svg`} />
<link rel="stylesheet" href={`${subpath}/build/q-1c3cd476.css`} />

I used this Qwik SSG and GitHub Pages Static Deploy to:

• Generate Static Site (build)
• Config GitHub Pages Actions with the deploy script

This files must be config for the build:

vite.config.tsx

import { defineConfig } from "vite";
import { qwikVite } from "@builder.io/qwik/optimizer";
import { qwikCity } from "@builder.io/qwik-city/vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig(() => {
    return {
        plugins: [qwikCity(), qwikVite(), tsconfigPaths()],
        base: "/qwik-digency-home/", // <REPO>
        preview: {
            headers: {
                "Cache-Control": "public, max-age=600",
            },
        },
    };
});

/adapters/static/vite.config.ts

import { staticAdapter } from "@builder.io/qwik-city/adapters/static/vite";
import { extendConfig } from "@builder.io/qwik-city/vite";
import baseConfig from "../../vite.config";

export default extendConfig(baseConfig, () => {
    return {
        build: {
            ssr: true,
            rollupOptions: {
                input: ["@qwik-city-plan"],
            },
        },
        plugins: [
            staticAdapter({
                origin: "https://da8ah.github.io/qwik-digency-home/", // <URL>/<REPO>
            }),
        ],
    };
});