Update README to talk about building for web

Create Dockerfile for tiny webserver image
This will build the WASM binary, generate the JS bindings, and then copy them and the index.html into a BusyBox image for serving.
2025-09-08 15:13:41 -05:00 · 2025-09-08 15:09:19 -05:00 · 2025-09-08 15:04:55 -05:00
4 changed files with 75 additions and 2 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -0,0 +1,3 @@
+.git/
+target/
+Dockerfile
--- a/38
+++ b/38
@@ -0,0 +1,38 @@
+# This is a simple, stand-alone server image for hosting the WASM file.
+# It is not intended to integrate with other webpages, webservers, or sites
+# on an existing server. For that, you must patch the code yourself.
+FROM rust AS builder
+
+# Install build tools
+RUN rustup target add wasm32-unknown-unknown
+RUN cargo install --locked wasm-bindgen-cli
+
+# Build the program
+
+# Copy in only the Rust source so the builder doesn't discard any cached build
+# layers just because the README changed.
+COPY src/ src/
+COPY Cargo.toml Cargo.toml
+COPY Cargo.lock Cargo.lock
+COPY .cargo .cargo
+
+RUN cargo build --locked --target wasm32-unknown-unknown --release
+RUN wasm-bindgen \
+    --no-typescript \
+    --target web \
+    --out-dir out/ \
+    --out-name "chaos-game-rs" \
+    target/wasm32-unknown-unknown/release/chaos-game-rs.wasm
+
+
+# Copy WASM & JS to a new image for use
+FROM busybox:musl
+RUN mkdir -p /var/www
+COPY --from=builder out/ /var/www
+COPY index.html /var/www/index.html
+
+WORKDIR /var/www
+
+EXPOSE 8080/tcp
+
+CMD ["httpd", "-f"]
--- a/README.md
+++ b/README.md
@@ -16,6 +16,29 @@ Use `cargo run --features=dynamic_linking` for faster cycle times when modifying

 Run `cargo run --release --target=wasm32-unknown-unknown`. This will start a dummy webserver, *wasm-server-runner*, which in turn hosts a dummy webpage that loads the WASM file. Run the program by visiting the dummy site in your browser: [http://localhost:1334]

-This requires the `wasm-server-runner` crate to be installed: `cargo install wasm-server-runner`.
+To make a "real" deployment, I use the output of `wasm-bindgen --web` and the tiny index.html here in the repo. These are thrown at whatever webserver is available at hand.

-**TODO:** A "real deployment" section.
+```sh
+# Build the program
+user@host:~/chaos-game-rs$ cargo build --release --target wasm32-unknown-unknown
+user@host:~/chaos-game-rs$ wasm-bindgen --no-typescript --target web --out-dir out/ --out-name "chaos-game-rs" target/wasm32-unknown-unknown/release/chaos-game-rs.wasm
+
+# Place the HTML, JS, and WASM all together in a web root.
+# Here, I'll reuse the ./out/ folder
+user@host:~/chaos-game-rs$ cp index.html ./out/index.html
+
+# Host the files with an HTTP server. Any will do, but some are easier to
+# configure than others.
+
+# BusyBox's httpd (note that "httpd" might mean Apache2 or Nginx on your
+# machine. Check the manual for the right flags).
+user@host:~/chaos-game-rs$ httpd -f -p 8080 -h ./out
+
+# Python's http.server module
+user@host:~/chaos-game-rs$ python3 -m http.server -p 8080 -d ./out
+
+# Or, again, the wasm-sever-runner, from the start of this section
+user@host:~/chaos-game-rs$ cargo run --target=wasm32... # etc, etc
+```
+
+The `wasm-bindgen` tool offers [other module formats](https://rustwasm.github.io/docs/wasm-bindgen/reference/deployment.html), which may be of interest for anyone trying to use this as one of many pages on a site. I may come back to explore that later, but for now it's just a couple of files to manually move around.
--- a/index.html
+++ b/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+    <body style="margin: 0px;">
+        <script type="module">
+            import init from "./chaos-game-rs.js"
+            init();
+        </script>
+    </body>
+</html>