GH Pages Deploy

[haslingerm]

Disclaimer: I'm not a Rust developer

I'm currently comparing several WASM frameworks (CSR only) and wanted to give leptos a try as well.
I managed to get the sample app up and running and even extend the component a bit, but now I'm struggling on how to approach the GH pages (static file) deployment.

From what I've read so far leptos is able to run on the client without a server and I suppose I have to use trunk somehow.
Doing a release build I can clearly see files in the site directory, but without any html file, so something is clearly missing.

Could anyone give me some pointers how to deploy to a pure CSR target?
Or are there any GH Actions samples for GH pages deployment I could take as reference?

It might be obvious for someone invested in the ecosystem, so apologies in advance :)

[gbj]

If you use trunk build, you will see files in the dist directory, including an HTML file.

It seems like this is not what you are doing — so what are you doing?

[haslingerm]

If you use trunk build, you will see files in the dist directory, including an HTML file.

When I do that I get the error error getting canonical path to source HTML file "index.html" - despite executing within the directory containing the Cargo.toml file.
Since there is no HTML file in the template I suppose it is generated somehow during build.

It seems like this is not what you are doing — so what are you doing?

This got me fixated on thinking that trunk is not an instead-of but an additional step which digests the output of cargo build - that was apparently a misconception.
So where do I have to look next? There is nothing about a HTML file in the Cargo.toml file (which is the same I cloned from the sample repo only extended with chrono = {version = "0.4.26"} dependency which I don't expect to have any interference here).

Maybe I'm running into a similar issue as in #845? That one was closed as basically 'not in scope for this example', but you said this example is working for you so I have to do something different.

[J-Cake]

You do actually need a HTML file. The file is parsed by Trunk to determine the assets it needs to build. Things like SCSS work out-of-the-box. WASM is bundled automatically.

It's cool, but I honestly don't think the Trunk docs are particularly useful as they're very scarce and don't really do much documenting per se. Also, you can run trunk build --release to produce size-optimised binaries. From experience, a decent Leptos app, with a few dependencies in Debug mode will get you to roughly 120MiB for the WASM file alome. On a dev machine that's fine, but trying to publish that shit - not a chance. Release mode gets me a binary of roughly 1 500KiB. Still not perfect, but better

[gbj]

I'd recommend comparing your setup to the counter example in the repo, or following the Getting Started first chapter of the book, either of which include an appropriate index.html to include in your project for Trunk to use.

When you say "the template," which template are you using?

[shamilsan]

Could anyone give me some pointers how to deploy to a pure CSR target? Or are there any GH Actions samples for GH pages deployment I could take as reference?

Just as an example, you may see a deployment workflow here: https://github.com/gear-tech/ss58.org/blob/master/.github/workflows/build.yml

Note that the repo should be configured to be deployed using GitHub Actions (it is in the beta stage, though): https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow

Also, you are to provide an index.html with an empty body for the trunk to work (example).

[haslingerm]

I'd recommend comparing your setup to the counter example in the repo, or following the Getting Started first chapter of the book, either of which include an appropriate index.html to include in your project for Trunk to use.

When you say "the template," which template are you using?

I was using this sample/template since it looked like the recommended way to get started. It does not have an index.html file. Seems to be something different altogether, since the example in the book is much less complex.
I threw that project away and started anew using the book and got it working.

Just as an example, you may see a deployment workflow here: https://github.com/gear-tech/ss58.org/blob/master/.github/workflows/build.yml

Thanks, that got me almost there! I had an issue with it expecting _site instead of dist and instead of fiddling with that I used my usual deploy action instead.
Another thing to note is that for non custom domain GH pages a base href has to be set for which I used the --public flag of trunk build in combination with <base data-trunk-public-url /> in the HTML file.

For anyone finding this in the future here is the deploy script that worked for me:

name: Deploy to GH pages

on:
  push:
    branches: [ "master" ]
  workflow_dispatch:

env:
  CARGO_TERM_COLOR: always

jobs:
  deploy-to-github-pages:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - name: Install toolchain
      uses: dtolnay/rust-toolchain@nightly
      with:
        target: wasm32-unknown-unknown
    - name: Install trunk
      uses: jetli/trunk-action@v0.4.0
      with:
        version: latest
    - name: Install WASM Binary Toolkit
      run: sudo apt-get install -y binaryen
    - name: Cache
      uses: Swatinem/rust-cache@v2
    - name: Build
      run: trunk build --release --public-url /REPO_NAME_HERE/ #insert your repo name
    - name: Optimize WASM
      run: find dist -name "*.wasm" -exec wasm-opt {} -o {} -Oz -c --dae --dce --rse -s 4 --vacuum \;
    - name: Add .nojekyll file
      run: touch dist/.nojekyll
    - name: Run tests
      run: cargo test --verbose
    - name: Commit dist to GitHub Pages
      uses: JamesIves/github-pages-deploy-action@v4
      with:
        BRANCH: gh-pages
        FOLDER: dist

[gbj]

I was using this sample/template since it looked like the recommended way to get started. It does not have an index.html file. Seems to be something different altogether, since the example in the book is much less complex. I threw that project away and started anew using the book and got it working.

Got it. That's what I figured. This is a template for using Leptos with both server-side rendering (with Actix) and client-side hydration (in the browser), and is designed for use with cargo-leptos, although it also has instructions on how to use it without it. In any case, looks like you're well on your way now! Glad you found a working deploy script.