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

Intro: https://youtu.be/6eMWAI1D-XA
Demo site: https://lapa.chepura.space

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
leptos-rs/leptos
A cutting-edge, high-performance frontend framework SSR+SPA. Using reactive signals.

Axum

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
Brendonovich/prisma-client-rust
Type-safe database access.

Features

• project
  • SEO site
  • admin dashboard
  • CLI with clap: settings-init, user-add, migrate
  • prisma schema: user, session, post, image, settings
  • ops scripts: build, upload, run (site, admin, cli)
• site
  • SSR + SPA hydrated
  • open graph meta tags
• prod features
  • ratelimit with benwis/tower-governor
  • compression with tower-http/compression
  • precompression with ryanfowler/precompress see ./ops scripts
• admin auth and session with
  • axum_session AscendingCreations/AxumSessions
  • axum_session_auth AscendingCreations/AxumSessionsAuth
  • custom prisma DatabasePool
• post
  • admin CRUDL
  • published_at
• images
  • preview and upload
  • resize and convert on backend
  • order in gallery
  • is_hero flag
  • delete and alt update in "dialog"
• settings
  • robots.txt, site_url
  • images sizes
  • home_text
• css
  • based on https://open-props.style
  • dark and light themes
  • mobile first
  • sass, @custom-media, @container, see notes on css below
• components
  • forms, inputs and response messages
  • input datetime-local usage with chrono library
  • RoutingProgress
  • Favicons

Run

Generate prisma client

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

Init

RUST_LOG="debug" cargo lapa settings-init
RUST_LOG="debug" cargo lapa user-add

Dev

RUST_LOG="info,admin=debug" cargo leptos watch -p admin
RUST_LOG="info,site=debug" cargo leptos watch -p site

Tip to enable tower_http debug

RUST_LOG="info,tower_http=debug,admin=debug" cargo leptos watch -p admin
RUST_LOG="info,tower_http=debug,site=debug" cargo leptos watch -p 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

Production with compress and ratelimit

cargo leptos build --release --features="compression,ratelimit"
# or
cargo leptos build --release --features="prod"

Ops

./ops folder contains example scripts to prepare production build and deploy it on server. Check .env.example Requires https://github.com/ryanfowler/precompress

./ops/site-deploy.sh && ./ops/site-run.sh # build, deploy and run site
./ops/admin-deploy.sh && ./ops/admin-run.sh # build, deploy and run admin

./ops/prisma-upload.sh # upload prisma folder with migrations to server
./ops/cli-deploy.sh # upload cli to server

Notes on CSS

Modern CSS is quite cool. Nesting, custom media, container queries. All that was used here before, but required cargo-leptos fork. As well another cli step to bundle everything into one css. For now returning to SASS. Considering return back to CSS if/when cargo-leptos will support lightningcss config and bundling.

Sass PR #24. Ligntningcss bundle with cli proof of concept #23.

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.