Skip to content

Commit

Permalink
Changes to the WASM stage of the Rust quickstart
Browse files Browse the repository at this point in the history
  • Loading branch information
ChrisChinchilla authored and ogoffart committed Mar 12, 2024
1 parent 80b2ac1 commit 0409cb0
Showing 1 changed file with 8 additions and 8 deletions.
16 changes: 8 additions & 8 deletions docs/tutorial/rust/src/running_in_a_browser.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
# Running In A Browser Using WebAssembly

The tutorial so far used `cargo run` to build and run the code as a native application.
Native applications are the primary target of the Slint framework, but we also support WebAssembly
Native applications are the primary target of the Slint framework, but it also supports WebAssembly
for demonstration purposes. This section uses the standard rust tool `wasm-bindgen` and
`wasm-pack` to run the game in the browser. Read the [wasm-bindgen documentation](https://rustwasm.github.io/docs/wasm-bindgen/examples/without-a-bundler.html)
for more about using wasm and rust.
Expand All @@ -14,7 +14,7 @@ Install `wasm-pack` using cargo:
cargo install wasm-pack
```

Edit the `Cargo.toml` to add the dependencies.
Edit the `Cargo.toml` file to add the dependencies.

```toml
[target.'cfg(target_arch = "wasm32")'.dependencies]
Expand All @@ -26,7 +26,7 @@ getrandom = { version = "0.2.2", features = ["js"] }
when compiling for the wasm32 architecture. Note that the `rand` dependency is now duplicated,
to enable the `"wasm-bindgen"` feature.

While you are editing the `Cargo.toml``, make one last change. To turn the binary into
While you are editing the `Cargo.toml`, make one last change. To turn the binary into
a library by adding the following:

```toml
Expand All @@ -35,7 +35,7 @@ path = "src/main.rs"
crate-type = ["cdylib"]
```

This is needed because wasm-pack requires Rust to generate a `"cdylib"`.
This is because wasm-pack requires Rust to generate a `"cdylib"`.

You also need to change `main.rs` by adding the `wasm_bindgen(start)`
attribute to the `main` function and export it with the `pub` keyword:
Expand All @@ -48,11 +48,11 @@ pub fn main() {
}
```

Now, you can compile the program with `wasm-pack build --release --target web`. This
Compile the program with `wasm-pack build --release --target web`. This
creates a `pkg` directory containing several files, including a `.js` file
named after the program name that you need to import into an HTML file.

Create a minimal `index.html` that declares a `<canvas>` element for rendering and loads the generated wasm
Create a minimal `index.html` in the top level of the project that declares a `<canvas>` element for rendering and loads the generated wasm
file. The Slint runtime expects the `<canvas>` element to have the id `id = "canvas"`.
(Replace `memory.js` with the correct file name).

Expand All @@ -71,11 +71,11 @@ file. The Slint runtime expects the `<canvas>` element to have the id `id = "can
```

Unfortunately, loading ES modules isn't allowed for files on the file system when accessed from a
`file://` URL, so you can't simply load the index.html. Instead, you need to serve it through a web server.
`file://` URL, so you can't load the `index.html`. Instead, you need to serve it through a web server.
For example, using Python, by running:

```sh
python3 -m http.server
```

And now you can now access the game at [http://localhost:8000](http://localhost:8000/).
Now you can access the game at [http://localhost:8000](http://localhost:8000/).

0 comments on commit 0409cb0

Please sign in to comment.