Skip to content

Commit 4fd0d72

Browse files
FrandoFrando
authored
add browser-echo example (#106)
This adds a first example that runs iroh in the browser, compiled to WebAssembly. * Adds `browser-echo` example, see README for details. * Adds CI to build the wasm example and deploy to github pages. See it in action: https://n0-computer.github.io/iroh-examples/pr/106/browser-echo/
1 parent 06c4d8e commit 4fd0d72

18 files changed

+5731
-2
lines changed

‎.github/workflows/ci.yml

+15-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ env:
1313
RUSTFLAGS: -Dwarnings
1414
RUSTDOCFLAGS: -Dwarnings
1515
MSRV: "1.81"
16-
RS_EXAMPLES_LIST: "dumbpipe-web,extism/host,extism/iroh-extism-host-functions,extism/plugin,iroh-automerge,iroh-gateway,frosty"
16+
RS_EXAMPLES_LIST: "dumbpipe-web,extism/host,extism/iroh-extism-host-functions,extism/plugin,iroh-automerge,iroh-gateway,frosty,browser-echo"
17+
WASM_EXAMPLES_LIST: "browser-echo"
1718
IROH_FORCE_STAGING_RELAYS: "1"
1819

1920
jobs:
@@ -47,6 +48,9 @@ jobs:
4748
toolchain: ${{ matrix.rust }}
4849
components: clippy,rustfmt
4950

51+
- name: Add wasm target
52+
run: rustup target add wasm32-unknown-unknown
53+
5054
- name: Run sccache-cache
5155
uses: mozilla-actions/sccache-action@v0.0.4
5256

@@ -60,6 +64,16 @@ jobs:
6064
env:
6165
RUST_LOG: ${{ runner.debug && 'DEBUG' || 'INFO'}}
6266

67+
- name: wasm
68+
run: |
69+
for i in ${WASM_EXAMPLES_LIST//,/ }
70+
do
71+
echo "Checking wasm $i"
72+
cargo build --manifest-path $i/Cargo.toml --target wasm32-unknown-unknown
73+
done
74+
env:
75+
RUST_LOG: ${{ runner.debug && 'DEBUG' || 'INFO'}}
76+
6377
- name: fmt
6478
run: |
6579
for i in ${RS_EXAMPLES_LIST//,/ }

‎.github/workflows/deploy.yml

+98
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
name: Deploy Preview
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
paths:
8+
- "browser-echo/**"
9+
pull_request:
10+
paths:
11+
- "browser-echo/**"
12+
workflow_dispatch:
13+
inputs:
14+
pr_number:
15+
required: true
16+
type: string
17+
18+
# ensure job runs sequentially so pushing to the preview branch doesn't conflict
19+
concurrency:
20+
group: ci-deploy-preview
21+
22+
jobs:
23+
preview_deploy:
24+
permissions: write-all
25+
timeout-minutes: 30
26+
name: Deploy Docs preview
27+
if: ${{ github.event_name == 'push' || ((github.event_name == 'pull_request' || github.event_name == 'workflow_dispatch' ) && !github.event.pull_request.head.repo.fork ) }}
28+
runs-on: ubuntu-latest
29+
30+
steps:
31+
- name: Set preview path (PR)
32+
if: ${{ github.event_name == 'pull_request' || github.event_name == 'workflow_dispatch' }}
33+
env:
34+
PREVIEW_PATH: pr/${{ github.event.pull_request.number || inputs.pr_number }}
35+
run: |
36+
echo "PREVIEW_PATH=$PREVIEW_PATH" >> "$GITHUB_ENV"
37+
38+
- name: Set preview path (push)
39+
if: ${{ github.event_name == 'push' }}
40+
env:
41+
PREVIEW_PATH: main
42+
run: |
43+
echo "PREVIEW_PATH=$PREVIEW_PATH" >> "$GITHUB_ENV"
44+
45+
- uses: actions/checkout@v4
46+
47+
- name: Install Node.js
48+
uses: actions/setup-node@v4
49+
with:
50+
node-version: 20
51+
52+
- name: Install rust stable toolchain
53+
uses: dtolnay/rust-toolchain@stable
54+
55+
- name: Add wasm target
56+
run: rustup target add wasm32-unknown-unknown
57+
58+
- name: Install tools
59+
uses: taiki-e/install-action@v2
60+
with:
61+
tool: wasm-bindgen,wasm-opt,wasm-pack,cargo-make
62+
63+
- name: Build examples
64+
run: cargo make deploy
65+
66+
- name: Deploy Docs to Preview Branch
67+
uses: peaceiris/actions-gh-pages@v4
68+
with:
69+
github_token: ${{ secrets.GITHUB_TOKEN }}
70+
publish_dir: ./deploy-out
71+
destination_dir: ${{ env.PREVIEW_PATH }}
72+
publish_branch: generated-deploy-preview
73+
74+
- name: Find Docs Comment
75+
if: ${{ github.event_name == 'pull_request' || github.event_name == 'workflow_dispatch' }}
76+
uses: peter-evans/find-comment@v3
77+
id: fc
78+
with:
79+
issue-number: ${{ github.event.pull_request.number || inputs.pr_number }}
80+
comment-author: "github-actions[bot]"
81+
body-includes: Deployment for this PR has been generated
82+
83+
- name: Get current timestamp
84+
if: ${{ github.event_name == 'pull_request' || github.event_name == 'workflow_dispatch' }}
85+
id: get_timestamp
86+
run: echo "TIMESTAMP=$(date -u +'%Y-%m-%dT%H:%M:%SZ')" >> $GITHUB_ENV
87+
88+
- name: Create or Update Docs Comment
89+
if: ${{ github.event_name == 'pull_request' || github.event_name == 'workflow_dispatch' }}
90+
uses: peter-evans/create-or-update-comment@v4
91+
with:
92+
issue-number: ${{ github.event.pull_request.number || inputs.pr_number }}
93+
comment-id: ${{ steps.fc.outputs.comment-id }}
94+
body: |
95+
Deployment for this PR has been generated and is available at: https://${{ github.repository_owner }}.github.io/${{ github.event.repository.name }}/${{ env.PREVIEW_PATH }}/browser-echo/
96+
97+
Last updated: ${{ env.TIMESTAMP }}
98+
edit-mode: replace

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
target/
22
*iroh-data
33
*/.sendme*
4+
/deploy-out

‎Makefile.toml

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Use cargo-make to run tasks here: https://crates.io/crates/cargo-make
2+
3+
# this task is run from the "deploy" workflow in .github/workflows/deploy
4+
# it builds all browser examples, and assembles them in a deploy-out directory
5+
# together with a simple index.html with links to the individual examples.
6+
[tasks.deploy]
7+
dependencies = [{ name = "deploy", path = "browser-echo" }]
8+
9+
script = '''
10+
rm -r deploy-out || true
11+
mkdir deploy-out
12+
13+
cat <<EOF > deploy-out/index.html
14+
<!DOCTYPE html>
15+
<html lang="en"><head><title>iroh examples</title></head>
16+
<body><h1>iroh examples</h1><a href="https://github.com/n0-computer/iroh-examples">source code</a><ul>
17+
EOF
18+
19+
cp -r browser-echo/public deploy-out/browser-echo
20+
echo '<li><a href="./browser-echo/index.html">browser-echo</li>' >> deploy-out/index.html
21+
22+
echo '</ul></body></html>' >> deploy-out/index.html
23+
'''

‎README.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ Forward http requests to dumbpipe. Share a local dev server publicly.
1313

1414
# Extism
1515

16-
Use iroh through [extism]
16+
Use iroh through [extism]
1717

1818
# Iroh-automerge
1919

@@ -31,6 +31,10 @@ Node discovery using the bittorrent [mainline] DHT and [pkarr].
3131

3232
Todo app using iroh documents and [tauri]
3333

34+
# Browser-echo
35+
36+
Use iroh in the browser, compiled to web assembly.
37+
3438
[iroh-experiments]: https://github.com/n0-computer/iroh-experiments
3539
[extism]: https://extism.org/
3640
[automerge]: https://automerge.org/

‎browser-echo/.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/public/wasm
2+
/package-lock.json

0 commit comments

Comments
 (0)