no_npm_wasm_game_of_life's Introduction

no_npm_wasm_game_of_life

No bundle, no npm, game of life using Rust wasm.

You'll need

wasm-pack

project structure

.
├── Cargo.lock
├── Cargo.toml
├── run.sh
├── src
│   └── lib.rs
└── www
    ├── css
    │   └── styles.css
    ├── favicon_96x96.png
    ├── html
    │   └── index.html
    ├── js
    │   └── index.js
    └── pkg
        ├── game_of_life_pre_bg.wasm
        ├── game_of_life_pre_bg.wasm.d.ts
        ├── game_of_life_pre.d.ts
        ├── game_of_life_pre.js
        └── package.json

First we put all our website related files in www at the root of our project. This keeps out project nice and clean.

in index.html

we must specify that out index.js is a javascript module

<script type="module" src="../js/index.js"></script>

index.js

We need to specify the file extension when we import our glu code generated by wasm-bindgen and build by wasm-pack

we do not need to import game_of_life_canvas_bg.wasm like in the official tutorial as it is not possible at the moment to import a wasm file directly without a bundler.

However, we can still have access to the shared webassembly memory though init()

game_of_life_canvas.js

import init, { Universe, Cell } from "../pkg/game_of_life_canvas.js";

async function run() {
    const wasm = await init().catch(console.error);
    const memory = wasm.memory;

    ...

} 

run();

Build with wasm-pack

We use wasm-pack to build and explicitly specify our output directory for the generated wasm code.

wasm-pack build --target web --out-dir www/pkg

Serve the website

Any minimal http server will do for local development.

ex:

cargo install https

I use this little script to build and serve the website locally

# filename: run.sh

set -ex

wasm-pack build --target web --out-dir www/pkg

echo "Now serving on http://127.0.0.1:8080/html"
http -a 127.0.0.1 -p 8080 www

Recommend Projects