diff --git a/docs/tutorial/rust/src/running_in_a_browser.md b/docs/tutorial/rust/src/running_in_a_browser.md index 29f5f0a52..0abc6aba9 100644 --- a/docs/tutorial/rust/src/running_in_a_browser.md +++ b/docs/tutorial/rust/src/running_in_a_browser.md @@ -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. @@ -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] @@ -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 @@ -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: @@ -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 `` element for rendering and loads the generated wasm +Create a minimal `index.html` in the top level of the project that declares a `` element for rendering and loads the generated wasm file. The Slint runtime expects the `` element to have the id `id = "canvas"`. (Replace `memory.js` with the correct file name). @@ -71,11 +71,11 @@ file. The Slint runtime expects the `` 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/).