In this post, we see you how you can get going on deploying your Rust WASM game. Often, WASM
games will just need an HTML page to be embedded in, and a public server to make the page
available across the Internet. We saw in a recent post on Rust game engines, that many engines currently offer the option to output your game in WASM, with (Bevy, Fyrox and Macroquad included).
Here, we will use an open-source Macroquad game written to demo Entity Component Systems, using Shipyard, a Rust ECS mentioned in a recent Rust ECS post.
That leaves us with a web server and deployment service to pick! Axum is currently
a popular Rust Web framework choice, and to keep things completely Rust, we shall deploy using Shuttle.
Shuttle offer Rust app hosting and have a free tier, which should be just fine
for our game.
Now we know the approach, why don’t we get started?
We will build the Square Eater game, which was originally written to demo ECSs. You should be able
to follow along easily enough, with your own Rust game, though, even if it’s not built using
Macroquad. Let me know if you run in difficulties with other game engines!
We will create three binaries from the project:
one just to run the game locally, natively or build to WASM;
another as a local Axum server for development and to test the webpage locally; and
a copy of the Axum server binary configured to deploy and run on Shuttle.
Shuttle has excellent Axum support, and the code for running the Axum server locally and on
Shuttle is almost identical, so we will put that shared code in a library and reference it from
the two server output versions we create.
To add the three binaries in a single project, we can use the Cargo targets feature . The Cargo.toml file will look like this:
Here we have the library and three binaries, mentioned earlier. If you match the name of the
Shuttle binary to your Shuttle project name, (line 16), Shuttle
will automatically build and deploy that binary. The project name needs to be unique across
Shuttle, as it forms the domain Shuttle uses to server the project from.
Here, we are just using some open-source code for the game, and it can fit into a single source
file. We place that code in src/bin/main.rs, and can run the game
locally using:
With game matching the binary name used in Cargo.toml, above. The code we use is provided as an example of using the Shipyard Rust ECS . Get the code from there, or copy it from below:
src/bin/main.rs — click to expand code.
For this to run, we need to add the following dependencies in Cargo.toml:
miniquad and sapp-wasm are not, strictly,
needed to run the game locally, but used in the next section, when we build the game to WASM.
If this is the first time you are generating WASM with Rust on your machine, add the WASM output
toolchain:
Then, you can run a WASM release build with:
This will output the WASM code to target/wasm32-unknown-unknown/release/game.wasm. Copy that file to a new public folder in the project root directory;
we will use it when we create the web page next.
Remember to add any favicons referenced in the HTML rel tags to the public folder.
🚧 Local Development and Testing Server using Axum #
We just need Axum to run as a static file server, and can set this up in a few source files.
Create src/bin/server.rs with this content:
This references the shared library, mentioned before. We can create it now, adding a src/lib.rs file:
This will serve files in the public folder from the / route, and just serve the index.html file if the requested path
is not found. See Auxm docs for more sophisticated setup.
Finally, we can add the mentioned health_check route in src/routes/health_check.rs:
And, include that file in the source tree by adding src/routes/mod.rs:
As a last step, here, we need to update Cargo.toml with Axum dependencies.
We only use those dependencies when building the local or Shuttle binaries, not the game. For that
reason, we make them optional, and will update the game build command to skip them.
Here is the final Cargo.toml:
I also added the shuttle dependencies, which we use in the next section.
To build just the game, now, we can run:
And to test the local server:
Try that command, and jump to http://127.0.0.1:8000 in your browser,
and you should see your game, in-browser.
To get going with Shuttle, you will need the CLI app installed locally. To install, run:
This will probably take a few minutes to download and compile.
Next, create a Shuttle.toml file in the project root directory, with
the following content:
Then, we need to add the source code for the shuttle binary file, which Shuttle will run when they
deploy your app. This file will is tiny, because we are using the shared Axum-based library,
created earlier:
To deploy, first create a project, from the Terminal (remember your project name has to be unique
for this to work):
Then deploy:
The binary will compile on Shuttle servers, and you will see output as it compiles. Your game site
should now be accessible from the URL https://YOUR-PROJECT-NAME.shuttleapp.rs!
In this post on deploying your Rust WASM game, we saw how you can deploy a Macroquad WASM game
with Shuttle and Axum. In particular, we saw:
how to Cargo targets to build multiple binaries;
how to serve a static file server with Axum; and
the process for deploying a Rust app to Shuttle.
I hope you found this useful. You can find the full source code for the project in a Rodney Lab GitHub repo . Please share links for WASM games you create. Also, let me know if there is anything I could
improve in this content to make it easier to follow, or improve your experience.
If you have found this post useful, see links below for further related content on this site. Let
me know if there are any ways I can improve on it. I hope you will use the code or starter in your
own projects. Be sure to share your work on X, giving me a mention, so I can see what you did.
Finally, be sure to let me know ideas for other short videos you would like to see. Read on to
find ways to get in touch, further below. If you have found this post useful, even though you can
only afford even a tiny contribution, please consider supporting me through Buy me a Coffee.