Hosting a Leptos project on Netlify

July 23, 2024

Leptos Netlify Rust

A guide for hosting a Leptos (or any Trunk) project on Netlify


Hosting a Leptos (or any Trunk) project on Netlify

Adding the code to Github

First we need to push the code to a Github repository.

Great!

Now we can go ahead and sign-up for a free Netlify account.

  • Follow the steps in the UI to link your Netlify account to your Github.
  • Create a new site on netlify and get it to deploy from your newly created repository.
  • Leave all the settings as default, as we will create files to handle the deploy process subsequently.

Setting up Netlify to build your Trunk app.

Netlify is lovely, they natively have cargo installed. So all we need to do is tell it what it needs to build our project. We need to tell it a few main things.

  • What is our rust tool-chain.
  • What tools to install
  • Where to serve the final Web-Assembly files from

That’s easy. We can create a few files to do the above. First, create a rust-toolchain.toml in the root folder, and add the following.

[toolchain]
channel = "nightly"

In the root of your project directory, create a netlify.toml and add the following:

[build]
command = "cargo install trunk; rustup target add wasm32-unknown-unknown; trunk build --release"
publish = "dist"

Now commit and push this change, and wait for it to build. This may take a while so be patient.

Now you can open the production deploy and view your Trunk application in all its glory.