Understanding the Structure of a Phoenix LiveView Application

Introduction

Phoenix LiveView is a revolutionary framework for building interactive, real-time applications without requiring extensive JavaScript. Instead, it relies on server-rendered HTML updates pushed over WebSockets. When building a Phoenix LiveView application, understanding the directory structure is essential to navigate, organize, and enhance your application efficiently.

In this article, we will break down the project structure of a typical Phoenix LiveView application and explain the purpose of each folder and file.

Project Structure Overview

Here is a simplified textual representation of the Phoenix LiveView application structure:

📂 TODO_APP/
│
├── 📂 _build/               # Compiled files for different environments (dev, prod, etc.)
│   └── 📂 dev/              # Contains compiled files for development (e.g., esbuild, tailwind)
│
├── 📂 .elixir_ls/           # Elixir Language Server files for IDE support
│   └── 📂 build/            # Compiled files and metadata for development
│
├── 📂 assets/               # Frontend assets (CSS, JS, etc.)
│   ├── 📂 css/              # Tailwind CSS files
│   ├── 📂 js/               # JavaScript files (e.g., AlpineJS, custom scripts)
│   ├── 📂 vendor/           # Third-party libraries
│   └── 📄 tailwind.config.js # Tailwind CSS configuration file
│
├── 📂 config/               # Configuration files for various environments
│   ├── 📄 config.exs        # General configuration
│   ├── 📄 dev.exs           # Development environment configuration
│   ├── 📄 prod.exs          # Production environment configuration
│   ├── 📄 runtime.exs       # Runtime-specific configurations
│   └── 📄 test.exs          # Testing environment configuration
│
├── 📂 deps/                 # Dependencies installed via 'mix deps.get'
│
├── 📂 lib/                  # The core of the application code
│   ├── 📂 todo_app/         # Business logic and contexts (schemas, changesets, etc.)
│   └── 📂 todo_app_web/     # Web interface (controllers, views, LiveViews, templates)
│       ├── 📂 components/   # Reusable UI components for LiveView
│       ├── 📂 controllers/  # Handles HTTP requests (mainly for REST APIs)
│       ├── 📂 live/         # LiveView modules and components (real-time UI updates)
│       ├── 📂 templates/    # EEx templates for rendering HTML
│       ├── 📂 views/        # Modules for rendering templates
│       ├── 📂 channels/     # WebSocket communication modules (if needed)
│       └── 📄 endpoint.ex   # The HTTP/Socket interface for the application
│
├── 📂 priv/                 # Static files, migrations, and I18n files
│   ├── 📂 static/           # Compiled assets (CSS, JS, Images)
│   ├── 📂 gettext/          # Translation files
│   └── 📂 repo/             # Database migration files
│
├── 📂 test/                 # Application tests (unit, integration, etc.)
│   ├── 📂 support/          # Helper functions for testing
│   └── 📂 todo_app_web/     # Tests for web-related modules (controllers, LiveViews, etc.)
│
├── 📄 .formatter.exs        # Code formatting rules
├── 📄 .gitignore            # Files and directories to be ignored by Git
├── 📄 mix.exs               # Project definition and dependencies
├── 📄 mix.lock              # Snapshot of dependency versions
└── 📄 README.md             # Project documentation

Breakdown of Each Directory & File

📂 _build/

Contains compiled files for different environments (like dev and prod). During development, it stores files generated by assets compilation tools such as esbuild and tailwind. When deploying to production, this folder contains optimized assets ready for deployment.

📂 .elixir_ls/

This folder is created by the Elixir Language Server (ElixirLS), which provides rich IDE features like code completion, diagnostics, and inline documentation. The build/ subfolder holds metadata and compiled files necessary for the language server's operation.

📂 assets/

Stores all frontend-related files:

• 📂 css/: Tailwind CSS files for styling your application.
• 📂 js/: JavaScript files (such as AlpineJS for interactivity).
• 📂 vendor/: External dependencies.
• 📄 tailwind.config.js: Configuration for customizing Tailwind CSS.

📂 config/

Holds configuration files for different environments:

• config.exs: General application configuration.
• dev.exs: Development-specific settings.
• prod.exs: Production-specific settings.
• runtime.exs: Settings evaluated at runtime (useful for secrets).
• test.exs: Testing-specific settings.

📂 deps/

Contains external dependencies fetched by mix deps.get. Not directly edited but essential for dependency management.

📂 lib/

This is the heart of your application, containing all backend-related code:

• todo_app/: Business logic (contexts, schemas, changesets).
• todo_app_web/: Web interface, structured into components, controllers, LiveViews, templates, views, and WebSocket channels.

📂 priv/

Stores static files and other resources:

• static/: Precompiled assets like images and compiled JS/CSS.
• gettext/: Files for handling translations.
• repo/: Migration files for database schema management.

📂 test/

Contains all the test cases, divided into unit and integration tests. support/ contains helper functions used by multiple tests.

📄 mix.exs & mix.lock

These files are essential for managing your dependencies and configuration settings. mix.lock ensures repeatable builds by locking specific dependency versions.

📄 README.md

Serves as documentation for your project, outlining what the project is about, how to set it up, and how to contribute.