Elixir_ash_inertia_svelte_template

mm0x1

Phoenix SAAS Template

An example app built with Phoenix, Ash Framework, InertiaJs, Svelte 5, and TypeScript based on phx_inertia_react_ts_tw.

I had a hard time getting InertiaJs working with Phoenix and Ash, so I created this repo to serve as a starting point for any projects I might do in the future.

Stack

Backend: Phoenix 1.8, Ash 3.0, PostgreSQL
Frontend: Svelte 5 (with runes), TypeScript, Vite, TailwindCSS 4.1, DaisyUI
Routing: Inertia.js v2 (server-driven SPA)
Auth: AshAuthentication (session-based)

Quick Start

Prerequisites

Before starting development, ensure you have the following tools installed:

Required Tools

Mise - Runtime version manager

# Install mise (macOS)
brew install mise

# Install mise (Linux)
curl https://mise.run | sh

Docker & Docker Compose - For database and services

# macOS
brew install --cask docker

# Linux (Ubuntu/Debian)
sudo apt-get update && sudo apt-get install docker.io docker-compose-plugin

direnv - Environment variable management

Automatic Tool Installation

This project uses mise to manage tool versions. After installing mise:

# Install all required tools (Elixir, Erlang, Node.js, etc.)
mise install

Database Setup

The project uses PostgreSQL. You can run it via Docker Compose:

# Start PostgreSQL in the background
docker compose up -d postgres

Local Development Setup

Clone the repository:

git clone <repository-url> my-saas-app
cd my-saas-app

Set up environment variables:

# Copy the example environment file
cp .env.example .env

# Allow direnv to manage environment variables
direnv allow

Install dependencies and setup the project:

# Install all tools via mise
mise install

# Setup database, install dependencies, build assets
docker compose up
mix setup

Start the app:
```
mix phx.server
```
Visit your application: Open http://localhost:4000 in your browser

Development Commands

Code Quality

mix quality                      # Run all quality checks (format, credo, compile, lint)
mix quality.fix                  # Auto-fix formatting and linting issues
mix credo                        # Run Credo code quality analysis
mix credo --strict               # Strict mode with all checks
cd frontend && npm run lint      # Lint frontend code
cd frontend && npm run check     # Run svelte-check for type errors
mise exec -- lefthook run pre-commit  # Run git hooks manually

Git Hooks

This project uses Lefthook for automated code quality checks on commit.

Pre-commit hooks automatically:

Format Elixir code (mix format)
Run Credo code quality analysis
Check TypeScript compilation
Lint and fix frontend code (ESLint)

Hooks install automatically during mix setup. To skip hooks in emergencies:

LEFTHOOK=0 git commit -m "Emergency commit"

Customization Guide

Naming

Search the codebase for the following words and rename them. Also rename folders.

template_app
TemplateApp
TemplateAppWeb
template_app_web
_template_app_key

Branding

Update environment variables in .env
Customize colors in frontend/src/App.css
Replace logo in priv/static/images/
Modify page titles using the configuration system

Contributing

Development Setup

Fork the repository
Create a feature branch
Make your changes
Run tests: mix test && cd frontend && npm test
Submit a pull request

Code Standards

Backend: Follow Elixir community standards, use mix format
Credo: All code must pass mix credo --strict quality checks
Frontend: ESLint configuration provided, fix linting errors
Svelte: Use Svelte 5 runes ($state, $derived, $effect, $props)
Pre-commit: Hooks automatically check formatting and linting before commits
Documentation: Update README for significant changes
Tests: Maintain test coverage for new features

Development Resources

Phoenix Documentation - Framework guides
Ash Framework - Business logic framework
Inertia.js - SPA adapter documentation
Svelte 5 - Frontend framework with runes
Vite - Frontend build tool
TailwindCSS - Styling framework

Top categories