What steps does a Github Action Script for deploying Yew Apps with Trunk to Firebase has to have?

Question

The issue I was facing, was that I had a hard time figuring out how to set up the correct deploy script for the Firebase Github action yml file.

Answer 1

A Script that performs this has to have, except the standard one, the following steps:

1. Set up the rust toolchain with the correct compile target

In order for the final trunk command to work, you must install rust and cargo on the executing server. The easiest way of doing this is using a toolchain. By someone else's recommendation, I settled with this one.

This toolchain will make sure that rust and cargo will be installed. Additionally, you have to specify your desired compile target. You may remember when you configured your Yew-app that you ran this command:

rustup target add wasm32-unknown-unknown

A quick reminder, citing the yew docs:

_{Rust can compile source codes for different "targets" (e.g. different processors). The compilation target for browser-based WebAssembly is called wasm32-unknown-unknown. The following command will add the WebAssembly target to your development environment.}

This means when the toolchain runs, we want to specify what compile-target we want it later to implement, this is done by setting the given target on the "targets" field. In the end, the code for this first step looks like this:

# name of the provided rust toolchain + the toolchain specifier, here => "@stable"
uses: dtolnay/rust-toolchain@stable
with:
  # the mentioned target field with the corresponding compile-target
  targets: wasm32-unknown-unknown

2. Install trunk

Like you set up your local environment with trunk, we need to do the same here.

run: cargo install trunk

3. Build command

Last but not least, provide the build command. The Yew docs mention: "When you're ready to release your app, you can just run trunk build --release."

Note: If you are for some reason tempted: don't use trunk serve --release...

run: trunk build --release

4. Final Notes

When packing those commands together it is important to get the indentation right! We will also add for every step a separate "- name:" tag, declaring the current operation. So our steps section will finally look like this:

...
    runs-on: ubuntu-latest
# step section
    steps:
      - uses: actions/checkout@v3
      - name: Set up Rust
        uses: dtolnay/rust-toolchain@stable
        with:
          targets: wasm32-unknown-unknown
          toolchain: stable
      - name: Install Trunk
        run: cargo install trunk
      - name: Build and Deploy
        run: trunk build --release
# rest of the auto-generated file
      - name: Deploy to Firebase Hosting
        ...

Hope that helps anyone!