LAPA - Leptos Axum Prisma starter with Admin dashboard and SSR/SPA website

Motivation

I want to have practical full-stack setup to build websites and services.
Utilising type safety and performance of Rust opens the door for new era of web dev, that is taking off.
Ecosystem and standardized approach is helpful to develop scalable and future-proof apps.
Some benefits:

• strict types
• enforced error and value management (Result and Option)
• predictable performance (no garbage collector)
• native performance
• single bundler (cargo)
• straight path to WebAssembly

3 pillars

Leptos

https://leptos.dev
https://github.com/leptos-rs/leptos
A cutting-edge, high-performance frontend framework SSR+SPA. Using reactive signals.

Axum

https://github.com/tokio-rs/axum
Backend framework built with Tokio, Tower, and Hyper. Focuses on ergonomics and modularity.

Prisma

https://www.prisma.io
https://prisma.brendonovich.dev
https://github.com/Brendonovich/prisma-client-rust
Type-safe database access.

Includes

• monorepo with 2 main packages for SEO site and admin dashboard
• prisma schema for db (user, session, post, image, settings)
• admin auth and session with
  • axum_session https://github.com/AscendingCreations/AxumSessions
  • axum_session_auth https://github.com/AscendingCreations/AxumSessionsAuth
  • custom adapter for DatabasePool to use prisma
• image preview and upload
• images resize and convert on backend
• css based on https://open-props.style
• css processing with https://lightningcss.dev (forked cargo-leptos for now)
  • nesting
  • custom media
• compression and precompression
• stiched together forms, inputs and response messages
• input datetime-local usage with chrono library
• robots.txt from database
• RoutingProgress
• Favicons

Run

Requires prisma client to be generated

cargo prisma db push # generate client and push schema to db
# or
cargo prisma generate # only generate client

Dev

cargo leptos watch -p lapa_admin
cargo leptos watch -p lapa_site

Prod

See relevant tutorial and demo project. https://github.com/alexichepura/leptos_axum_prisma_sozu https://www.youtube.com/watch?v=KLg8Hcd3K_U

cargo leptos build --release

Notes on CSS nesting and custom media

For now requires fork of cargo-leptos with relevant flags for lightningcss https://github.com/leptos-rs/cargo-leptos/commit/da6c7aeec7b062335e6592ca379c175fb82d3c16

cargo install --git https://github.com/alexichepura/cargo-leptos --branch lightningcss-parsing-flags --locked cargo-leptos

CSS nesting

https://caniuse.com/css-nesting

nav {
    /* nav styles */
	&>a {
        /* nav>a styles */
    }
}

Custom media

@custom-media --md-n-above (width >=768px);
@media (--md-n-above) {}

Container query

https://caniuse.com/css-container-queries

main form {
    container-type: inline-size;
}
@container (width >=480px) {
    form footer {
		grid-template-columns: auto auto;
	}
}

Container query + custom media

NOTE Container query doesn't work with custom media yet

@container (--sm-n-above) {} /* doesn't work */
@container (width >=480px) {} /* works */

Notes on prisma

How initial migration created https://www.prisma.io/docs/guides/migrate/developing-with-prisma-migrate/add-prisma-migrate-to-a-project

mkdir -p prisma/migrations/0_init
cargo prisma migrate diff --from-empty --to-schema-datamodel prisma/schema.prisma --script > prisma/migrations/0_init/migration.sql
cargo prisma migrate resolve --applied 0_init

License

This project is licensed under the terms of the MIT license.