Standardize Leptos CSR builds with Nix, Crane, and Trunk.
npx skills add https://github.com/juspay/AI --skill nix-rust-leptos
Please help me install this Agent Skill. Skill: nix-rust-leptos Source: https://github.com/juspay/AI/tree/main/.opencode/skills/nix-rust-leptos Command: npx skills add https://github.com/juspay/AI --skill nix-rust-leptos
Conventions for building Leptos CSR apps with Nix (crane + Trunk). This guide standardizes the production build workflow and tooling integration to reduce setup time and errors across teams.
Initialize a Leptos CSR project with Nix and Crane, then run the Trunk-based build to produce a production-ready client bundle.
High-intent search queries and answers about installing and using this skill.
To build a Leptos CSR app with Nix and Trunk, use craneLib.buildTrunkPackage to manage WASM compilation, wasm-bindgen, wasm-opt, asset hashing, and SRI. This standardizes the production build pipeline and reduces setup errors across teams by integrating the tooling consistently.
The best way to handle Tailwind CSS in a Leptos Trunk build is to include Tailwind CSS in nativeBuildInputs and use the data-trunk tailwind hook. This integrates the CSS framework directly into the Trunk-based packaging workflow managed by Crane.
JS interop in a Leptos CSR app built with Nix is handled through a dedicated bridge.rs file for non-Leptos JS helpers. For browser APIs, prefer leptos-use to ensure safe cleanup and seamless integration within the WASM package.
Yes, you can use Crane to build a Leptos client crate inside a Nix workspace by running the build from the crate directory or using postUnpack to target the client crate specifically, ensuring correct workspace setup and module integration.
Trunk packaging fails to include frontend assets in Nix when the source filter does not preserve HTML, CSS, and JS files. You must adjust the source filter to keep these frontend assets intact during the WASM packaging and build process.
Yes, buildTrunkPackage handles WASM optimization and asset hashing automatically. It manages wasm compilation, wasm-bindgen, wasm-opt, Tailwind CSS, asset hashing, SRI, and cross-reference rewriting for production-grade builds.
adelabdelgawadValidate and synchronize cargo-leptos metadata blocks in Cargo.toml files.
AppleLampsGenerate React component scaffolds with server/client templates and TypeScript props interfaces.
dasch-swissGenerate Leptos components with Rust and CSS files in the Mosaic Tiles crate.
agentglassCreate WebAssembly bindings for TypeScript and JavaScript using Rust and wasm-bindgen.
