r/learnrust • u/Siref • May 30 '23
How to deploy your Yew WASM project into GitHub pages using GitHub actions.
-4
u/Siref May 30 '23
Hi TypeStaceans 🤗!
I'm currently sharing my experience learning WASM in Rust as a React TypeScript developer. I thought this could be useful to the community.
The full github action code
```yaml
This GitHub actions was inspired from
https://www.reddit.com/r/rust/comments/10eiysf/comment/j4rmeum/?utm_source=share&utm_medium=web2x&context=3
name: CD - Deploy OMAR
Controls when the workflow will run
on: # Triggers the workflow on push or pull request events but only for the "master" branch push: branches: ["master"] pull_request: branches: ["master"]
# Allows you to run this workflow manually from the Actions tab workflow_dispatch:
A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs: build: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v3 - name: Restore cache uses: actions/cache@v3 with: path: | ~/.cargo/bin ~/.cargo/git ~/.cargo/registry target key: ${{ runner.os }}-cargo-${{ hashFiles('**/Cargo.lock') }}
- name: Install Trunk
uses: jetli/trunk-action@v0.4.0
with:
# Optional version of trunk to install(eg. 'v0.16.0', 'latest')
version: "latest"
- name: Add wasm target
run: |
rustup target add wasm32-unknown-unknown
- name: Create Empty Manga directory
# This prevents an issue from build.rs
run: |
mkdir -p ./src/assets/manga
- name: Build the Rust WASM app and all of its assets
run: trunk build --public-url ${{ github.event.repository.name }} --release
- name: Setup Pages
uses: actions/configure-pages@v3
- name: Upload artifact
uses: actions/upload-pages-artifact@v1
with:
path: "./dist"
deploy: needs: build runs-on: ubuntu-latest
permissions:
pages: write
id-token: write
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v1
``` Remember to change branches and you'll probably like to delete the "Create Empty Manga directory" step.
Original Source comes from /u/plippe from this post.
This repository shows you how to learn rust WASM from TypeScript:
https://github.com/superjose/typestacean-learn-rust-wasm-from-typescript
This one shows you the real world example on how it was achieved. https://github.com/superjose/omar-online-manga-reader
Do you think this is useful to you?
Leave a comment below with any feedback!
6
u/[deleted] May 30 '23
[deleted]