Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Changes to the WASM stage of the Rust quickstart #4814

Merged
merged 1 commit into from
Mar 12, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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/).
Loading