PhxLiveTailwindDaisy

A modern Phoenix 1.8 application with:

• Phoenix LiveView for real-time server-rendered UI
• Inertia.js + Svelte 5 for SPA-like experiences
• Vite for lightning-fast frontend builds with HMR
• Tailwind CSS v4 for utility-first styling
• DaisyUI for beautiful component classes
• SQLite for simple, file-based database
• Bun for fast package management

Tech Stack

Backend

• Phoenix 1.8.1
• Elixir 1.15+
• Ecto with SQLite adapter

Frontend

• Vite 6.3+ (replaces ESBuild)
• Svelte 5.0 with runes
• Inertia.js 2.2+
• Tailwind CSS 4.1+
• DaisyUI 5.1+

Getting Started

To start your Phoenix server:

• Run mix setup to install and setup dependencies
• Start Phoenix endpoint with mix phx.server or inside IEx with iex -S mix phx.server

Now you can visit:

• localhost:4000 - Home page
• localhost:4000/demo - LiveView demo
• localhost:4000/inertia/counter - Inertia + Svelte demo

Development

Vite Dev Server

When you run mix phx.server, Vite automatically starts on port 5173 and provides:

• Hot Module Replacement (HMR) for instant updates
• Fast builds with on-demand compilation
• Automatic CSS injection

Asset Pipeline

• Development: Vite dev server on port 5173 with HMR
• Production: mix assets.deploy builds optimized bundles

Project Structure

assets/
├── css/
│   └── app.css          # Tailwind CSS v4 with DaisyUI
├── js/
│   └── app.js           # Main entry point (Phoenix + Inertia)
├── svelte/
│   └── Counter.svelte   # Svelte 5 components
├── vite.config.mjs      # Vite configuration
└── package.json         # Frontend dependencies

Key Features

Vite Integration

This project uses phoenix_vite for seamless Vite integration:

• Automatic dev server startup
• HMR for Svelte components
• Optimized production builds
• Asset fingerprinting

Svelte 5 Runes

Components use modern Svelte 5 syntax:

<script>
  let { counter = 0 } = $props()
  let currentCounter = $state(counter)
</script>

Hybrid Approach

Mix and match LiveView and Inertia:

• Use LiveView for real-time features
• Use Inertia + Svelte for rich client interactions
• Share the same database and backend logic

Ready to run in production? Please check our deployment guides.

Production Build Sequence

Follow these steps to run the application in a production-like environment:

1. Build static assets:

   MIX_ENV=prod mix assets.deploy
   

2. Export the runtime configuration (adjust values as needed):

   export DATABASE_URL="ecto://127.0.0.1/phx_prod.db"
   export SECRET_KEY_BASE="$(MIX_ENV=prod mix phx.gen.secret)"
   export PHX_URL_SCHEME="http"
   export PHX_HOST="localhost"
   export PHX_URL_PORT=4000
   export PORT=4000
   

3. Boot the server in production mode:

   PHX_SERVER=true MIX_ENV=prod mix phx.server
   

Learn more

• Official website: https://www.phoenixframework.org/
• Guides: https://hexdocs.pm/phoenix/overview.html
• Docs: https://hexdocs.pm/phoenix
• Forum: https://elixirforum.com/c/phoenix-forum
• Source: https://github.com/phoenixframework/phoenix