Skip to content
This repository has been archived by the owner on Jul 19, 2020. It is now read-only.

Expanded getting started/project setup/wasm-pack docs #90

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Expanded getting started/project setup/wasm-pack docs #90

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5c48292
Expanded getting started/project setup/wasm-pack docs
May 12, 2020
0de0a87
“start from” → “use”
May 13, 2020
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
62 changes: 59 additions & 3 deletions src/getting-started/project-setup/using-wasm-pack.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Yew</title>
</head>
<body>
<script src="pkg/bundle.js"></script>
</body>
</html>
```

* 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::<Model>();

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.
Expand All @@ -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).
Expand Down