How to deploy CSR to Netlify?

[andreacfromtheapp]

Hi 👋

the docs have instructions for GitHub Pages and Vercel, however, I use Netlify and I'm unsure 1) how to deploy a CSR app, and 2) does it support it and that's why it's missing?

Help appreciated!

ps: if this work, I'll submit a doc update if welcome.

[gbj]

I have never used Netlify (or GitHub Pages or Vercel, for that matter) but I would assume it's the same as deploying any SPA to the same service. i.e., you use trunk build --release, which fils a dist/ directory with all the files you need to deploy, which you can then deploy to Netlify however that's normally done. Feel free to contribute to the book with any Netlify-specific config that's needed.

[andreacfromtheapp]

hello @gbj

that worked, thank you. I'll contribute to the docs ASAP.

thahk you for always beiing present for the community.

[andreacfromtheapp]

hi @gbj , this is all it takes and I'd be ready to contribute it as PR to Leptos Book, with one remaining question? Do I need the example repo? Thanks.

---

Netlify

All it takes to deploy a Leptos CSR app to Netlify is to create a project and to
add two simple configuration files in your project root. Let's begin with the
latter.

Configuration Files

Create a netlify.toml file in your project root with the following content:

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

[build.environment]
RUST_VERSION = "stable"

[[redirects]]
from = "/*"
to = "/index.html"
status = 200

Create a rust-toolchain.toml file in your project root with the following
content:

[toolchain]
channel = "stable"
targets = ["wasm32-unknown-unknown"]

Deployment

1. Add your project to Netlify
   by connecting your Git repository
2. Netlify will automatically detect your netlify.toml configuration
3. If you need additional environment variables, configure them in
   Netlify's environment variables settings

The rust-toolchain.toml ensures the correct Rust toolchain and WASM target are
available during the build process. The redirect rule in netlify.toml ensures
your SPA routes work correctly by serving index.html for all paths.

[gbj]

This looks great -- I don't think you need to include a sample repo, it's all pretty straightforward. Go ahead and make a PR, and thanks so much!

[andreacfromtheapp]

thank you Sir! leptos-rs/book#244

[andreacfromtheapp]

closing as solved (not being rude, but one less worry for you)