Leptos Heavy Metal Stack

Overview

The Heavy Metal StackLeptos stack is a powerful tool for building server-side rendered apps with hydration. It combines Axum, TailwindCSS, and Sqlite to create a basic todo app. The stack uses Leptos’ server functions to call sqlx from the client and seamlessly run it on the server. It includes an sqlite DB and can be run with cargo leptos.

Features

• Axum backend for server-side rendering
• Seamless integration with Leptos for client-server communication
• Sqlite database for data storage
• Automatic recompilation of client and server code with cargo leptos
• CSS minification for optimized performance
• Easy deployment process with cargo leptos

Installation

To install the Heavy Metal StackLeptos stack, follow these steps:

1. Install cargo leptos using the command:

cargo install cargo-leptos

2. Install TailwindCSS by following the instructions provided here.

3. Server Side Rendering with cargo-leptos:

• Follow the cargo leptos documentation here to learn more about its features and benefits.
• Build the Tailwind CSS using the command:

cargo leptos

• Build the site in watch mode, which will recompile on file changes:

cargo leptos --watch

• When ready to deploy, run the server using the command:

cargo run

4. Server Side Rendering without cargo-leptos:

• Make sure wasm-pack is installed.
• Edit the [package.metadata.leptos] section in the project’s configuration file and set site-root to “pkg”.
• Change the path of the <StyleSheet /> component in the root component to point towards the CSS file in the root.
• Install wasm-pack and build the Webassembly used to hydrate the HTML from the server.
• Run the server to serve the Webassembly, JS, and HTML.

Summary

The Heavy Metal StackLeptos stack is a powerful tool for building server-side rendered apps with Axum, TailwindCSS, and Sqlite. It offers seamless integration with Leptos for client-server communication and includes features like automatic recompilation, CSS minification, and easy deployment. Whether using cargo leptos or setting up server side rendering without it, this stack provides a flexible and efficient solution for building robust web applications.