Solid-start is the long awaited meta-framework for Solid.js. Since it entered its second beta after a rewrite, there were a few breaking changes, so the previous article on this one's topic was no longer valid.
With solid-start, you can deploy your application with client-side rendering, server-side rendering, or islands architecture basically anywhere thanks to nitro.
One of these presets to deploy pages is "static", which creates a basic server for the server-rendered pages and then uses it to render static versions of them, to be deployed on github pages or wherever else you want. There is also "github_pages", but I cannot see that it does anything different than "static", so let us stick with that.
Creating your project
npm init solid@latest my-app
# or
pnpm create solid@latest my-app
Instead of my-app, use whatever name you want. Select a version with SSR and whatever other configuration you want.
Make sure you are using at least @solid-js/start@0.4.8 or newer, since that fixes an issue with the hydration of pages with a different base url.
Install the dependencies
Once your package is set up, install the dependencies:
npm i
# or
pnpm i
Configure vite
You can add whatever configuration you want; the important parts are ssr: true and the server config.
import { defineConfig } from "@solidjs/start/config";
export default defineConfig({
start: {
ssr: true,
server: {
baseURL: process.env.BASE_PATH,
preset: "static"
}
}
});
Configure the Router
You need to make the Router in src/app.tsx aware of the base path set in the vite configuration, so add the following base property:
<Router
base={import.meta.env.SERVER_BASE_URL}
root={...}
>
Create a github action to deploy the page
We can use JamesIves/github-pages-deploy-action to deploy the output from our build on github pages; however, we need to create an extra file .nojekyll so directories starting with an underscore (like _build) will be served and our page will receive its assets.
Add .github/workflows/main.yml:
name: CI
on:
push:
branches: [ main ]
pull_request:
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
env:
BASE_PATH: /my-app/
- name: create .nojekyll
run: touch .output/public/.nojekyll
- name: deploy pages
uses: JamesIves/github-pages-deploy-action@v4.5.0
with:
branch: gh-pages
folder: .output/public
Instead of /my-app/, insert your github repository name again.
Enable GitHub pages for your project
Once the action finished,
- Go to your project's GitHub page and on there to the settings tab
- In the left menu, select pages
- For branch, select gh-pages and / (Root)
It may take a few seconds up to two minutes until the pages are set up for the first time – subsequent deployments are usually a lot faster. After that, you can take a look at your freshly deployed GitHub page with your solid-start project.
Happy hacking!
Top comments (16)
as far as I know github pages is static hosting, if you plan to use SolidJs its fine, but how can you deploy solid-start? You need a running server for this? Where do you exactly deploy?
Thats why i believe whole your Solid app was just prerendered, if you have any (loader, getInitialProps alternative in Solid) it will not be updated, but cached forever until next build
Obviously, you can only deploy the static pages that you create using solid-start. This means you can use internal APIs only as long as the answers are present during the build (and you won't get any updates unless you re-deploy). Using external APIs (mind the CORS headers) works fine.
intresting.
waiting for more on this :-)
"...up to two minutes" sound a bit annoying during development. Is there any "fast track preview" like we have in vite?
This only applies to the first initialization for the GitHub pages. The action usually runs within a few seconds after pushing or merging to master. I should probably add a few words of clarification there
Also, solid-start supports a dev server that runs within milliseconds and has hot module reloading, too. This is only the time that deployment on GitHub pages takes.
San you please show this process on a real static site via a YouTube video😓
Sorry, I'm mostly about text. If you want, you can find me as
@lexLohron discord; ping me and I'll help you there with your current project.Hi, I have a doubt. Can we use npm run build command also to take build right?
I do. You'll see it in the workflow.
Ok. Thanks for reply. Why I asked because for solid app, after taking build dist file was created. But in solid start, .output and vinxi files were created. So that I'm confused. Can you tell me please why two files were created?
solid-start creates the files to start a server temporarily that is used to render the static pages.
ok
Please make an updated version
Yup, this works. Thanks buddy! I think the vite baseUrl and solid router baseUrl did the trick. How did you know how to do this? I can't find anything about it on the docs.
trade secrcet ;-) :-p
( joking obviously )
A lot of trial and error.