Tutorial: Conway's Game of Life in Rust and WebAssembly

#1

https://rustwasm.github.io/book/game-of-life/introduction.html

Hi everyone!

This new tutorial goes a bit more in depth than the extant tutorials we’ve had for Rust and WebAssembly. The goal is to introduce all the topics you need when doing real Rust+Wasm development, all with a single running example to give continuity.

Topics covered include:

  • Setting up the toolchain and making a hello world
  • Designing Rust programs for WebAssembly
  • Debugging
  • Time profiling
  • Code size profiling

Every chapter also has exercises, if you want to challenge yourself.

If you follow along with the tutorial, please take notes along the way!! Your feedback would be incredibly valuable!

Thanks,

Nick

Simple Rust WebAssembly Tutorial Request
#2

Is there an updated link? Looking forward to checking this out.

#3

https://rustwasm.github.io/book/game-of-life/introduction.html

Sorry for the URL churn!

#4

Thank you!

#5

Rust/npm newbie here. I was able to follow the first steps on the Game of Life tutorial, but I get an error at this part:

npm init wasm-app www
npx: installed 1 in 1.027s
cloning the template failed!

I see that this error message was added to the code by this PR from Aug 23rd ( Add create-wasm-app bin so that npm init wasm-app works)

When I try to clone the repo myself, it works:

cd /tmp && git clone https://github.com/rustwasm/create-wasm-app.git
Cloning into 'create-wasm-app'...
remote: Enumerating objects: 141, done.
remote: Total 141 (delta 0), reused 0 (delta 0), pack-reused 141
Receiving objects: 100% (141/141), 122.50 KiB | 399.00 KiB/s, done.
Resolving deltas: 100% (97/97), done.
#6

Try running

npm init --verbose wasm-app www

or after running the code without the flag check for the npm-debug.log file in the current working directory. See here:

On failure, all logs are written to npm-debug.log in the current working directory.

#7

I couldn’t find the npm-debug.log file, but here’s the output of the command:

npm init --verbose wasm-app www
npm info it worked if it ends with ok
npm verb cli [ '/usr/bin/node',
npm verb cli   '/usr/bin/npm',
npm verb cli   'init',
npm verb cli   '--verbose',
npm verb cli   'wasm-app',
npm verb cli   'www' ]
npm info using npm@6.4.1
npm info using node@v11.1.0
npx: installed 1 in 1.381snfo using node@v11.1.0
cloning the template failed!o using node@v11.1.0
npm verb exit [ 0, true ]
npm timing npm Completed in 1619ms
npm info ok
#8

I’m fumbling in the dark a bit, but if you manually edit /.bin/create-wasm-app.js to add a console.log fileName you can see if the problem is with the location of the destination directory. Adding a console.log process.argv might also provide useful info, since the third arg is used to provide the fileName value.

#9

Hmm… sometimes the cloning happens without errors, so I was able to go a step further, but then another error happens, this time on the browser (I’m using thttpd -d www -p 8080 to serve the files):

bootstrap.js:5 Error importing `index.js`: TypeError: Failed to resolve module specifier "hello-wasm-pack". Relative references must start with either "/", "./", or "../".
catch.e @ bootstrap.js:5

If anyone is interested, I’ve made a tarball with the www folder at https://www.dropbox.com/s/4euzrfoxsqf4t9u/gol.tbz?dl=0

#10

are you always calling the command from the same working directory?

#11

Yep.

#12

First: the best way to get help with issues with create-wasm-app is to file an issue on the project’s issue tracker: https://github.com/rustwasm/create-wasm-app/issues/new

I’m a bit confused that you can run the git clone ... manually, but that it doesn’t work in the script which is pretty much only doing that too.

Can you file an issue and provide precise steps to reproduce, as well as some info about what OS you’re running, and which directories you’re running these commands in, etc? Thanks!

#13

Hi @fitzgen, I’ll open an issue, but will post here as well (but only this time).

The git error is gone by now (even though I don’t remember doing anything that fixed it).

But there’s still the second error, which can be reproduced by running this command:

docker run -it --rm -p 8080:8080 elifarley/docker-dev-env:wasm-rust ./setup-example.sh

This will load a Docker image based on Debian with Node 10 installed. On top of this base image, my Dockerfile also sets up Rust like this:

curl https://sh.rustup.rs -sSf | sh -s -- -y
. $HOME/.cargo/env
curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh && \
cargo install cargo-generate

The docker run command (see start of this message) will launch a container based on this image and execute something like this:

echo 'wasm-game-of-life' | cargo generate --git https://github.com/rustwasm/wasm-pack-template
cd wasm-game-of-life && \
wasm-pack build && \
npm init wasm-app www && \
(cd www && python -m SimpleHTTPServer 8080)

You can see the source code for this (Dockerfile and setup-example.sh) at https://github.com/elifarley/docker-dev-env/tree/master/wasm-rust

After that, you can point your browser to http://localhost:8080/ and this error message should appear on the web console:

bootstrap.js:5 Error importing `index.js`: TypeError: Failed to resolve module specifier "hello-wasm-pack". Relative references must start with either "/", "./", or "../".
#14

I found out where I messed things up - I missed the npm install and npm link parts.

The updated script that calls wasm-pack and npm can be found at setup-example.sh

#15

I liked the tutorial very much. Near the end it really depends on which of the exercises you did, and if sometimes did not totally much, but enough to work through. I took it a bit further and made a 3d version. See https://gameoflife3d.gklijs.tech source at https://github.com/gklijs/game-of-life.