DEV Community

Cover image for Bevy Minesweeper: WASM build
Qongzi
Qongzi

Posted on

Bevy Minesweeper: WASM build

Check the repository

Let's make our project run on browser:

Let's change our board_plugin/Cargo.toml:

[dependencies]
- # Engine
- bevy = "0.6"

# Serialization
serde = "1.0"

# Random
rand = "0.8"

# Console Debug
colored = { version = "2.0", optional = true }
# Hierarchy inspector debug
bevy-inspector-egui = { version = "0.8", optional = true }

+ # Engine
+ [dependencies.bevy]
+ version = "0.6"
+ default-features = false
+ features = ["render"]

+ # Dependencies for WASM only
+ [target.'cfg(target_arch = "wasm32")'.dependencies.getrandom]
+ version="0.2"
+ features=["js"]
Enter fullscreen mode Exit fullscreen mode

We only need one feature of the bevy dependency so we improve its declaration, and we add a new dependency only for wasm targets which improves rand on browser.

Now we edit the main Cargo.toml:

[dependencies]
- bevy = "0.6"
board_plugin = { path = "board_plugin" }

# Hierarchy inspector debug
bevy-inspector-egui = { version = "0.8", optional = true }


+ [dependencies.bevy]
+ version = "0.6"
+ default-features = false
+ features = ["render", "bevy_winit", "png"]

+ # Dependencies for native only.
+ [target.'cfg(not(target_arch = "wasm32"))'.dependencies.bevy]
+ version = "0.6"
+ default-features = false
+ features = ["x11"]

[workspace]
members = [
    "board_plugin"
]
Enter fullscreen mode Exit fullscreen mode

We can also disable the default features of bevy and only enable the useful ones. We add the x11 feature only for native use to avoid compilation issue for web assembly.

And.. That's it ! The app can now compile and run natively on wasm.

Let's improve a bit by adding a cargo config in .cargo/config.toml:

[target.wasm32-unknown-unknown]
runner = "wasm-server-runner"

[alias]
serve = "run --target wasm32-unknown-unknown"
Enter fullscreen mode Exit fullscreen mode

Then install the runner:
cargo install wasm-server-runner

you may now directly execute cargo serve and test your app on your browser !
You may also try the live version


Previous Chapter


Author: Félix de Maneville
Follow me on Twitter

Published by Qongzi

Top comments (4)

Collapse
 
ramones156 profile image
Ramon van Sprundel • Edited

Had a blast following this tutorial! Didn't think a game this simple could teach me so much about structuring projects :-)

Collapse
 
notkylebr profile image
Caio Castro

I just finished your tutorial. Had a blast and learned a lot. Thanks so much!

Collapse
 
qongzi profile image
Qongzi

Thank you, I'm very happy you liked it !

Collapse
 
dan_ profile image
Dan

Had a blast following this tutorial! Thanks!

By the way, if your server load assets failed, you can set environment variable to fix it, follow this commit: Custom serve directory