DEV Community

Using Solid Start with GitHub pages

Alex Lohr on February 13, 2023

⚠ Warning: the information in this article is outdated. There is a new version of solid-start that contains multiple breaking changes. I have prep...

Read full post

welschmoor • Jul 23 '23

After npm init solid@latest I see some astro stuff, they must've changed things.

Alex Lohr • Jul 23 '23

Yes, the new solid start version is now based on astro. The rest should work the same, though.

welschmoor • Jul 23 '23 • Edited

I tried with the older vite version and after deploying to github all I see is the Readme.MD :D

I am so bad at this, no idea what I am doing wrong.

BTW do you know where I can get the latest news (such as an explanation of why they now use astro). I've never used astro so I don't know what good or bad it does. All I see is close to 40KB of JavaScript on a new project, which I don't like :D

Alex Lohr • Jul 23 '23

I daresay this article needs to be updated soon... I'm a bit short on time at the moment, though.

welschmoor • Jul 23 '23

I'd like to mention that your article is very important to us. Thank you for sharing your knowledge!

welschmoor • Aug 3 '23

Hey,

today I started a new project and no astro any longer... 17kB JS being sent to the browser.

Alex Lohr • Aug 3 '23

I can share a bit of insider knowledge here: the porting of solid-start to Astro has hit a few snags and is therefore abandoned, the core team is currently testing a few other approaches while pushing the work done before forward that couldn't be merged because it was mostly experimental. In the meantime, Ryan explores ways to resume SSR-rendered components: hackmd.io/@0u1u3zEAQAO0iYWVAStEvw/...

While it might seems things are slow, they are actually moving in a surprisingly fast pace, just in many different directions at once and not as open as one would wish for.

Alex Lohr • Feb 14 '23

Small update: solid-start 0.2.21 is released, so you can now use that and skip the patching step.

Chrisspotless • Feb 17 '23

@lexlohr
This is awesome,and it;s indeed so detailed.

Mustafa_A • Apr 21 '23

Indeed.
He is very passionate about Solid.js ^^

Damian Tarnawski • Feb 13 '23

You've left in the gh action, is that intentional?

  pull_request:
    branches: [ main ]

Alex Lohr • Feb 13 '23

I knew I had forgotten something. Thanks.

Gregory Venezia • Mar 26 '23

When I try to view the website I get a 404 error.

Gregory Venezia • Mar 27 '23

I resolved this issue. I just had to wait until GitHub pages loaded the files.

Alex Lohr • Mar 26 '23

Thanks for the feedback. There is currently an issue with SolidStart, Ryan is just preparing a new release.

Steve Yee • Apr 16 '23 • Edited

Configure vite Step has changed.

import solid from "solid-start/vite";
import static from "solid-start-static";
import { defineConfig } from "vite";

export default defineConfig({
  base: "/my-project/",
  // insert your github project name between slashes above
  plugins: [solid({ adapter: static() })],
});

needs to be

import solid from "solid-start/vite";
import solidStatic from "solid-start-static";
import { defineConfig } from "vite";

export default defineConfig({
  base: "/my-project/",
  // insert your github project name between slashes above
  plugins: [solid({ adapter: solidStatic() })],
});

further more, github actions might fail if you do not give permission to the github-pages-deploy-action
as such update the yml to:

name: CI
permissions:
  contents: write

on:
  push:
    branches: [main]
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3

      - name: install
        run: npm i --legacy-peer-deps

      - name: build
        run: npm run build

      - name: deploy pages
        uses: JamesIves/github-pages-deploy-action@v4.4.1
        with:
          branch: gh-pages
          folder: dist/public

see Read and Write Permissions in:
github.com/JamesIves/github-pages-...

Alex Lohr • Apr 16 '23

From what I can see, you only changed the default import name of the static adapter. There is no functional change whatsoever.

Steve Yee • Apr 16 '23 • Edited

Maybe so but strict mode reserves the name 'static', and as such for me the app failed to launch. True we could call the import bananas, so long as it's not 'static'

Alex Lohr • Apr 16 '23

Thanks for the feedback, I've changed the name.

Birk Skyum • Apr 5 '23 • Edited

Can you use npm run start to preview the build locally before pushing to github pages, or does the assets in your case also load from the wrong url?

When I do npm run start, the client try to fetch localhost:55775/github-repo-name/a..., but it actually exist at localhost:55775/assets/entry-clien...

Josh Rossi • Nov 23 '23

I am just trying to build the actual static site and that keeps failing. It says the following:

file:///Users/joshrossi/Code/LendingUI/node_modules/rollup/dist/es/shared/node-entry.js:2287
        base = Object.assign(new Error(base.message), base);
                             ^

Error [RollupError]: "template" is not exported by "node_modules/solid-simple-table/node_modules/solid-js/web/dist/server.js", imported by "node_modules/solid-simple-table/dist/SimpleTable.mjs".

My vite config is like this

import solid from "solid-start/vite";
import solidStatic from "solid-start-static";
import { defineConfig } from "vite";

export default defineConfig({
  base: "/src/",
  // insert your github project name between slashes above
  plugins: [solid({ adapter: solidStatic() })],
});

This is really really making me hate SSR. I just want to build the pages, I can deal with hosting etc