What are my options for a second web site consisting of a Rust/Yew/WASM web app?

Support
, ,
1

I am currently running a website built with Hugo and hosted on Netlify. I am currently using the free tier, since I am not exactly overwhelmed with bandwidth needs :wink:

I’ve recently started coding in Rust and have been looking at the Yew framework to produce WASM powered web sites. Am I right in thinking that I can host such a site on Netlify, and, if so, how do I go about creating a second website in Rust?

2

since I am not exactly overwhelmed with bandwidth needs :wink:

haha nice one

how do I go about creating a second website in Rust?

i mean isnt all of this just

# netlify.toml

[build]
    command = "<build command to generate wasm>"

/shrug

tbf i have never used the framework, but i assume it just generates static files - which u can easily do using netlify, thats how my blog runs lol

3

Thanks for the reply! Since I posted I’ve switched to another Rust web framework, Leptos. I’ve also noted that this is, indeed, possible, and may well be as simple as a single command, as you suggest. There seems to be a much more helpful Leptos community so I’m sure that someone there has some Netlify experience!

1 Like
4

Awesome. Thanks for writing back in and sharing this with the community.

5

I’ve finally gotten round to attempting to deploy a simple Leptos/Rust web app from Github.

I’ve set my netlify.toml to…

[build]
publish = "/"
command = "rustup toolchain install nightly && rustup target add wasm32-unknown-unknown && cargo install cargo-make --force && cargo make build"

[build.environment]
RUST_VERSION = "1.78.0"

and my rust-toolchain.toml to…

[toolchain]
channel = "nightly"

The project builds and deploys in Netlify, but the problem is that it just serves an empty page, the source of which is…

<!DOCTYPE html>
<html>
  <head>
    <!-- Add a plain CSS file: see https://trunkrs.dev/assets/#css -->
    <!-- If using Tailwind with Leptos CSR, see https://trunkrs.dev/assets/#tailwind instead-->
    <link data-trunk rel="css" rel="stylesheet" href="public/styles.css" />

    <!-- Include favicon in dist output: see https://trunkrs.dev/assets/#icon -->
    <link data-trunk rel="icon" href="public/favicon.ico" />

    <!-- include support for `wasm-bindgen --weak-refs` - see: https://rustwasm.github.io/docs/wasm-bindgen/reference/weak-references.html -->
    <link data-trunk rel="rust" data-wasm-opt="z" data-weak-refs />
  </head>
  <body></body>
</html>
6

I was finally able to get the web page working. I ran trunk build which generated some wasm stuff alongside the index.html in the dist folder, below my project folder. All it then needed was to reference that dist folder in my netlify.toml like so…

[build]
publish = "dist/"
command = "rustup toolchain install nightly && rustup target add wasm32-unknown-unknown && cargo install cargo-make --force && cargo make build"

[build.environment]
RUST_VERSION = "1.78.0"

It’s not the most ambitious web app ever, I’ll concede, but it represents a major breakthrough to me :heart_eyes:
https://tangerine-khapse-b37bac.netlify.app/

1 Like
7

Thank you for sharing that, @carlcaulkett. I’m sure this will be helpful to others looking to deploy this type of site to Netlify in the future.

8

So interesting, I never had this issue until today. Previously, I set the target and channel in the rust-toolchain.toml and it worked. I do have a script to check for trunk, so I only install it if the cache gets cleared. I wonder if something changed.

[toolchain]
channel = "nightly"
targets = ["wasm32-unknown-unknown"]
profile = "minimal"