diff --git a/src/getting-started/project-setup/using-wasm-pack.md b/src/getting-started/project-setup/using-wasm-pack.md index c53b4d4..179b8be 100644 --- a/src/getting-started/project-setup/using-wasm-pack.md +++ b/src/getting-started/project-setup/using-wasm-pack.md @@ -6,12 +6,60 @@ This tool was created by the Rust / Wasm Working Group and is the most actively Note that the crate-type in your `Cargo.toml` will need to be `cdylib` when using `wasm-pack` {% endhint %} -### Install +### Install wasm-pack ```bash cargo install wasm-pack ``` +### Set up your project + +{% hint style="info" %} +If you use the [yew-wasm-pack-minimal](https://github.com/yewstack/yew-wasm-pack-minimal) template, these setup steps are already taken care of. +{% endhint %} + +* Add a minimal `index.html` file to your project root: +```html + + + + + Yew + + + + + +``` + +* Add a `main.js` file with these contents to your project root: +```javascript +import init, { run_app } from './pkg/myapp.js'; +async function main() { + await init('/pkg/myapp_bg.wasm'); + run_app(); +} +main() +``` + +* Add `wasm-bindgen` as a dependency in `Cargo.toml`: +```toml +[dependencies] +wasm-bindgen = "^0.2" +``` + +* Add a `run_app` function to `lib.rs`: +```rust +use wasm_bindgen::prelude; + +#[wasm_bindgen] +pub fn run_app() -> Result<(), JsValue> { + yew::start_app::(); + + Ok(()) +} +``` + ### Build This command will produce a bundle in the `./pkg` directory with your app's compiled WebAssembly along with a JavaScript wrapper which can be used to start your application. @@ -22,12 +70,20 @@ wasm-pack build --target web ### Bundle -For more information on Rollup visit this [guide](https://rollupjs.org/guide/en/#quick-start) +You need the `wasm` plugin for `rollup`: ```bash -rollup ./main.js --format iife --file ./pkg/bundle.js +npm install @rollup/plugin-wasm --save-dev ``` +Now you can bundle your application: + +```bash +rollup ./main.js --format iife --plugin wasm --file ./pkg/bundle.js +``` + +For more information on Rollup visit this [guide](https://rollupjs.org/guide/en/#quick-start). + ### Serve Feel free to use your preferred server. Here we use a simple python server to serve to [http://\[::1\]:8000](http://[::1]:8000).