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!

Neoterism

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/[email protected]

      - 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

Craniometer

Thanks for the comment, I do think this framework is still at its beginning and not ready enough for use cases like GitHub pages for example. – Neoterism

@TamirGilany The CSS issue has been fixed with 0.13 ! – Craniometer

Thanks, I've tried to do as you did and also fixed my build scripts and updated all the packages but no luck. Still having some issues. I also see that you have errors in your console ¯\_(ツ)_/¯ – Neoterism

Currently well need for #2462 to be fixed for it to work correctly ! – Craniometer

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

Dionnedionysia

Thanks, if anyone can verify it works please leave a comment (ditched my project for now) – Neoterism

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>
            }),
        ],
    };
});

Pfaff