cargo-leptos

Build tool for Leptos:

Features

• SCSS compilation using dart-sass.

• CSS transformation and minification using Lightning CSS. See docs for full details.

• Builds server and client (wasm) binaries using Cargo.

• Generates JS - Wasm bindings with wasm-bindgen

• Optimises the wasm with wasm-opt from Binaryen

• Generation of rust code for integrating with a server of choice.

• --csr mode, building only the client side rendered wasm, for a fast development experience.

• Standard mode for building full server and client.

• watch command for automatic rebuilds with browser autoreload. Works both for --csr and standard mode.

• test command for running tests. Note that this runs cargo test for the three different modes (csr, hydrate and ssr).

• build command for building (normal mode or --csr).

• end2end command for building, running the server and calling a bash shell hook. The hook would typically launch Playwright or similar.

• new command for creating a new project based on templates, using cargo-generate. WIP: You'll need to ask on the Leptos discord for the url of a template.

Getting started

Install:

cargo install --locked cargo-leptos

If you for any reason needs the bleeding-edge super fresh version:

cargo install --git https://github.com/akesson/cargo-leptos cargo-leptos

Help:

cargo leptos --help

For setting up your project, base yourself on the example

Folder structure

├── src/
│ ├── app/             (the app logic)
│ ├── client/          (client packaging)
│ ├── server/          (the http server)
│ │ └── generated.rs   (generated by build)
│ ├── lib.rs
│ ├── app.scss         (root css/sass/scss file)
│ └── main.rs
│
├── static/
│ └── favicon.png
│
├── index.html         (template for generating the root page)
├── Cargo.toml         (needs the [package.metadata.leptos] config)
│
├── end2end/           (end-to-end test using Playwright)
│ ├── tests/
│ ├── playwright.config.ts
│ └── package.json
│
└── target/
  └── site/
    ├── index.html     (generated by build)
    ├── favicon.png
    └── pkg/
      ├── app.wasm
      ├── app.js
      └── app.css