Switch from `trunk` to `bevy run web` #312

TimJentzsch · 2024-09-29T10:36:55Z

Objective

Closes #297.

This PR prepares the project to use the Bevy CLI, mainly the bevy run command.
It simplifies especially running for the web target, which previously required use of trunk (and a bunch of additional configuration).

Solution

Remove custom web assets. Use the defaults provided by Bevy CLI instead.
Remove custom compilation profiles for the web build. The CLI will automatically use custom web and web-release profiles which use sensible defaults for web builds.
Adjust the release CI workflow to use the Bevy CLI with --bundle instead of trunk.
Update the README to use Bevy CLI instead of trunk.

Note that this introduces a "regression" to the user that they now have to specify --no-default-features, which was automatically passed to trunk.
I created TheBevyFlock/bevy_cli#250 so we can do that in Bevy CLI as well.

Testing

Install the Bevy CLI:

cargo install --git https://github.com/TheBevyFlock/bevy_cli --locked bevy_cli

Checkout this branch: gh pr checkout 312 (with the GitHub CLI)

Run the app in the browser:

bevy run --no-default-features web --open

Add a `bevy run` command which conveniently runs your Bevy app. It mostly wraps `cargo run`, but also provides a `web` sub command, which makes it a lot easier to target the browser. This option will compile your app for WASM, create JS bindings, add an `index.html` file if you don't provide one yourself and serves the build locally to open it in your browser. The default `index.html` file is mostly what we had in `bevy_quickstart`. This is the last part of #24. Closes #8. # Testing 1. Checkout the `bevy-run` branch. 2. Run `cargo install --path .` to install this version of the Bevy CLI. 3. Navigate to your Bevy app. 4. Run `bevy run web`. Note that your app must be compatible with WASM. If you have features or profiles enabled by default which are not compatible with WASM, you need to disable them. E.g. `bevy run --no-default-features web`. If you have a custom `index.html` configured for `trunk`, it might also not work out of the box. You can try removing the entire `web` folder to try the default setup. A good example project is of course `bevy_new_2d`, which you can test on this branch: <TheBevyFlock/bevy_new_2d#312>

# Objective Closes #196, unblocks <TheBevyFlock/bevy_new_2d#312>. With `wasm-opt`, we can further increase the performance and reduce the file size of the Wasm binary we use for web builds. This speeds ups the app both in-game and the loading times. # Solution As a simple first solution, we add a hard-coded size optimization pass in release mode. In future PRs, we can make this more configurable. To the user, we log the time the optimization took as well as the file size reduction as percentage. This is behind the `wasm-opt` feature flag (currently disabled by default), to give the user a way to turn this off and because this increases compile times of the CLI quite a bit.

# Objective Closes #68. Adds the `--bundle` argument to the `bevy build web` and `bevy run web` commands. This will pack all files needed for the web into a single folder. The location of the bundle will be `target/bevy_web/{profile}/{binary}`. This makes it a lot easier to deploy the app e.g. on itch.io or a generic web server. It also unblocks the switch from `trunk` to the Bevy CLI for the Bevy 2D template: <TheBevyFlock/bevy_new_2d#312>. # Solution - Add the `--bundle` option to the build and run web commands. - Create a new `WebBundle` enum, which can represent a linked or packed bundle: - A linked bundle is what we use by default, which is optimized for dev. It keeps e.g. the asset folder and WASM artifacts in their place to avoid duplication and copy operations. When running the app, the local web server will "link" together all the files and folders needed to run the app. - A packed bundle is a folder that contains all the necessary web artifacts. They will be copied in the directory. This option is most useful to deploy the web app.

This is now included in the Bevy CLI

TimJentzsch · 2025-01-25T20:28:29Z

Current status:

Release CI needs testing (for web), @benfrankel do you know an easy way to do that?

Web sound is not working yet locally. Warning in console:

An AudioContext was prevented from starting automatically. It must be created or resumed after a user gesture on the page.

benfrankel · 2025-01-25T20:36:10Z

Release CI needs testing (for web), @benfrankel do you know an easy way to do that?

The release workflow can be triggered manually, but not from a PR, I believe. There are a few options:

Merge this PR once it's ready and been reviewed, then test the release CI and make a fix PR if necessary.
Merge this PR in a temporary branch and run the release CI there.
Run the release CI in a fork.

TimJentzsch · 2025-01-29T20:51:05Z

The audio will be fixed by TheBevyFlock/bevy_cli#249.

TimJentzsch · 2025-01-29T21:04:22Z

@benfrankel This should be ready now.

For the CI I'm still uncertain if it already works as expected, but I'm fine with the options you proposed.
Option 1 is probably the easiest, but also with a bit of risk. But I guess it wouldn't break the already deployed version, so it's not that big of a deal.

# Objective The script for restarting the audio context for web apps didn't work. This resulted in the app not getting any audio. # Solution The fix is simple: The script for restarting the audio context needs to be called _before_ the app is loaded, I assume to ensure that the creation of the audio context is tracked correctly. # Testing You can test it on the current prototype of the [`bevy_new_2d` port](TheBevyFlock/bevy_new_2d#312). Compare `bevy run --no-default-features web --open` with the current `main` and this branch. This branch should have sound when you click the buttons.

benfrankel

I did a first pass on the diff, and I have a few questions.

src/lib.rs

web/index.html

web/style.css

web/index.html

Cargo.toml

benfrankel · 2025-02-10T06:03:08Z

.vscode/tasks.json

            "label": "Run native release",
            "type": "cargo",
            "command": "run",
-            "args": [
-                "--release",
-                "--no-default-features"
-            ],
+            "args": ["--release", "--no-default-features"],


I'm curious why we suggest that users use the Bevy CLI for native release while the .vscode/tasks.json still uses cargo run directly. Is VS Code special-cased to interpret the output of cargo commands? Also, is there a benefit to bevy run over cargo run for native builds, or is it just for uniformity?

Right now, the native build and run is just a wrapper around cargo.
Consistency makes sense though, I will adjust that

Actually, the task type is set to cargo, so there might actually be some special handling happening. That needs to be investigated further

.github/workflows/release.yaml

alec-deason · 2025-02-14T20:21:22Z

For what it's worth I've been using these changes in a project and they've worked great for me.

TimJentzsch · 2025-02-16T13:49:56Z

Putting this back to draft while we resolve the remaining regressions

# Objective Partially related to #123. Removes one regression from <TheBevyFlock/bevy_new_2d#312>. When you currently run an app with `bevy run web`, the browser tab will just be called "Bey App". This is not very descriptive or nice, so it would be better if we could choose a better default value. # Solution - Adjust our bundling pipeline to allow pre-processing of the `index.html` in all cases - If not provided, add a `<title>` with the name of the binary - E.g. `bevy_new_2d` becomes "Bevy New 2d" As a follow-up to this PR we can also more easily apply the post-processing with the dev-only options for the dev server. # Testing 1. Install the CLI from this branch. 2. Run any Bevy project with `bevy run web`. It should show the name of the binary in the title. Try for example `bevy run --example=breakout web` in the bevy repository. 3. If you provide a custom `web/index.html` file and set a `<title>`, it should not be overwritten.

TimJentzsch added 2 commits September 29, 2024 12:27

Prepare project for builds with bevy run web

188e6f7

Adjust documentation for bevy run

d15ce02

TimJentzsch mentioned this pull request Sep 29, 2024

Bevy run TheBevyFlock/bevy_cli#120

Merged

This was referenced Dec 23, 2024

Add --bundle option to web commands TheBevyFlock/bevy_cli#195

Merged

Add option to run wasm-opt when building for the web TheBevyFlock/bevy_cli#196

Closed

Optimize binary with wasm-opt in release mode TheBevyFlock/bevy_cli#206

Merged

TimJentzsch and others added 6 commits January 25, 2025 19:54

Merge branch 'main' into 297-use-bevy-run

f963f93

Remove web release profile

c5b2cb1

This is now included in the Bevy CLI

Fix canvas configuration

a83df81

Remove value that's set to default

0ee7ad8

Adjust release CI to use Bevy CLI

c2a704c

Remove web profile configuration in template

6bbef56

TimJentzsch mentioned this pull request Jan 29, 2025

Fix audio context not restarting automatically TheBevyFlock/bevy_cli#249

Merged

Automatically confirm prompts in CI

2fb207f

TimJentzsch mentioned this pull request Jan 29, 2025

Add configuration to automatically disable/enable features when running in the web TheBevyFlock/bevy_cli#250

Open

TimJentzsch marked this pull request as ready for review January 29, 2025 21:02

TimJentzsch added 2 commits January 29, 2025 22:10

Port VS Code tasks to Bevy CLI

aa3bf2e

Fix CI release template

52b8963

benfrankel reviewed Feb 10, 2025

View reviewed changes

TimJentzsch added 2 commits February 15, 2025 11:47

Restore custom release profile settings

2bd6bde

Fix web-release profile configuration

38005d5

TimJentzsch marked this pull request as draft February 16, 2025 13:49

This was referenced Feb 16, 2025

Automatically add a sensible title to web page TheBevyFlock/bevy_cli#273

Merged

Notify user if their browser doesn't support JavaScript or the canvas TheBevyFlock/bevy_cli#274

Closed

Log invocations of external commands TheBevyFlock/bevy_cli#275

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Switch from `trunk` to `bevy run web` #312

Switch from `trunk` to `bevy run web` #312

TimJentzsch commented Sep 29, 2024 •

edited

Loading

TimJentzsch commented Jan 25, 2025

benfrankel commented Jan 25, 2025 •

edited

Loading

TimJentzsch commented Jan 29, 2025

TimJentzsch commented Jan 29, 2025

benfrankel left a comment

benfrankel Feb 10, 2025 •

edited

Loading

TimJentzsch Feb 10, 2025

TimJentzsch Feb 15, 2025

alec-deason commented Feb 14, 2025

TimJentzsch commented Feb 16, 2025

Switch from trunk to bevy run web #312

Are you sure you want to change the base?

Switch from trunk to bevy run web #312

Conversation

TimJentzsch commented Sep 29, 2024 • edited Loading

Objective

Solution

Testing

TimJentzsch commented Jan 25, 2025

benfrankel commented Jan 25, 2025 • edited Loading

TimJentzsch commented Jan 29, 2025

TimJentzsch commented Jan 29, 2025

benfrankel left a comment

Choose a reason for hiding this comment

benfrankel Feb 10, 2025 • edited Loading

Choose a reason for hiding this comment

TimJentzsch Feb 10, 2025

Choose a reason for hiding this comment

TimJentzsch Feb 15, 2025

Choose a reason for hiding this comment

alec-deason commented Feb 14, 2025

TimJentzsch commented Feb 16, 2025

Switch from `trunk` to `bevy run web` #312

Switch from `trunk` to `bevy run web` #312

TimJentzsch commented Sep 29, 2024 •

edited

Loading

benfrankel commented Jan 25, 2025 •

edited

Loading

benfrankel Feb 10, 2025 •

edited

Loading