mirror of
https://github.com/yewstack/yew.git
synced 2025-12-08 21:26:25 +00:00
b246e0d5ed
* tree-wide: update links to https://rustwasm.github.io/wasm-bindgen https://rustwasm.github.io/wasm-bindgen -> https://wasm-bindgen.github.io/wasm-bindgen https://rustwasm.github.io/docs/wasm-pack -> https://drager.github.io/wasm-pack/book/ https://rustwasm.github.io/wasm-pack -> https://github.com/drager/wasm-pack
66 lines
6.5 KiB
Plaintext
66 lines
6.5 KiB
Plaintext
---
|
|
title: 'Project Setup'
|
|
sidebar_label: Introduction
|
|
description: 'Set yourself up for success'
|
|
---
|
|
|
|
## Rust
|
|
|
|
First, you'll need Rust. To install Rust and the `cargo` build tool, follow the [official instructions](https://www.rust-lang.org/tools/install).
|
|
|
|
You also need to install the `wasm32-unknown-unknown` target to compile Rust to Wasm.
|
|
If you're using rustup, you just need to run `rustup target add wasm32-unknown-unknown`.
|
|
|
|
:::important
|
|
The minimum supported Rust version (MSRV) for Yew is `1.49.0`. Older versions can cause unexpected issues accompanied by incomprehensible error messages.
|
|
You can check your toolchain version using `rustup show` (under "active toolchain") or alternatively `rustc --version`. To update your toolchain, run `rustup update`.
|
|
:::
|
|
|
|
## **Wasm Build Tools**
|
|
|
|
Extra tooling is needed to facilitate the interop between WebAssembly and JavaScript. Additionally,
|
|
depending on the tool you choose, they can help make deployment and packaging much less of a
|
|
headache by generating all of the JavaScript code necessary to load and run your app's `.wasm`
|
|
binary in a browser.
|
|
|
|
### [**`trunk`**](https://github.com/thedodd/trunk/)
|
|
|
|
A tool practically made for building Yew apps.
|
|
It can build any `wasm-bindgen` based app and its design is inspired by rollup.js.
|
|
With Trunk you don't need to have Node.js installed or touch any JavaScript code for that matter.
|
|
It can bundle assets for your app and even ships with a Sass compiler.
|
|
|
|
All of our examples are built with Trunk.
|
|
|
|
[Getting started with `trunk`](getting-started/project-setup/using-trunk.mdx)
|
|
|
|
### [**`wasm-pack`**](https://drager.github.io/wasm-pack/book/)
|
|
|
|
A CLI tool developed by the Rust / Wasm Working Group for packaging up WebAssembly. Best used
|
|
together with the [`wasm-pack-plugin`](https://github.com/wasm-tool/wasm-pack-plugin) for Webpack.
|
|
The primary purpose of `wasm-pack` is building Wasm libraries for use in JavaScript.
|
|
Because of this, it can only build libraries and doesn't provide useful tools like a development server or automatic rebuilds.
|
|
|
|
[Get started with `wasm-pack`](getting-started/project-setup/using-wasm-pack.mdx)
|
|
|
|
### [**`cargo-web`**](https://github.com/koute/cargo-web)
|
|
|
|
This was the best preferred tool to use before the creation of `wasm-bindgen`.
|
|
|
|
[Getting started with `cargo web`](getting-started/project-setup/using-cargo-web.mdx)
|
|
|
|
### Comparison
|
|
|
|
| | `trunk` | `wasm-pack` | `cargo-web` |
|
|
| ----------------------------- | ---------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
| Project Status | Actively maintained | Actively maintained by the [Rust / Wasm Working Group](https://rustwasm.github.io) | No Github activity for over 6 months |
|
|
| Dev Experience | Just works! Batteries included, no external dependencies needed. | Bare-bones. You'll need to write some scripts to streamline the experience or use the webpack plugin. | Works great for code but needs separate asset pipeline. |
|
|
| Local Server | Supported | Only with webpack plugin | Supported |
|
|
| Auto rebuild on local changes | Supported | Only with webpack plugin | Supported |
|
|
| Asset handling | Supported | Only with webpack plugin | Static assets only |
|
|
| Headless Browser Testing | [In Progress](https://github.com/thedodd/trunk/issues/20) | [Supported](https://github.com/drager/wasm-pack/book/commands/test.html) | [Supported](https://github.com/koute/cargo-web#features) |
|
|
| Supported Targets | <ul><li><code>wasm32-unknown-unknown</code></li></ul> | <ul><li><code>wasm32-unknown-unknown</code></li></ul> | <ul> <li><code>wasm32-unknown-unknown</code></li> <li><code>wasm32-unknown-emscripten</code></li> <li><code>asmjs-unknown-emscripten</code></li> </ul> |
|
|
| `web-sys` | Compatible | Compatible | Incompatible |
|
|
| `stdweb` | Incompatible | Compatible | Compatible |
|
|
| Example Usage | [Sample app](getting-started/build-a-sample-app.mdx) | [Starter template](https://github.com/yewstack/yew-wasm-pack-minimal) | [Build script](https://www.github.com/yewstack/yew/tree/v0.18/packages/yew-stdweb/examples) for `yew-stdweb` examples |
|