Phoenix Framework: Project Setup and Directory Structure

Welcome to Week 5-6 of our Elixir and Phoenix journey! This module focuses on the foundational aspects of creating and understanding a Phoenix project. We'll cover how to set up a new project and explore the standard directory structure, which is crucial for efficient development in Elixir's web framework.

Setting Up a New Phoenix Project

Phoenix provides a convenient command-line interface (CLI) tool to generate new projects. This tool sets up all the necessary files, configurations, and dependencies for a basic web application. Before you begin, ensure you have Elixir and Erlang installed, along with the Phoenix installer.

What is the primary tool used to generate a new Phoenix project?

The Phoenix Framework CLI tool (often invoked via mix phx.new).

To create a new project named 'my_app', you would typically run the following command in your terminal:

bash

mix phx.new my_app

This command will prompt you with a few questions, such as whether to fetch and install dependencies. It's generally recommended to say 'Y' to install dependencies.

The mix phx.new command is your gateway to a new Phoenix application, pre-configured with essential components for web development.

Understanding the Phoenix Directory Structure

Once your project is generated, you'll find a well-organized directory structure. This structure follows conventions that promote maintainability and collaboration. Let's break down the key directories:

The Phoenix directory structure is designed for clarity and modularity.

Key directories like lib, priv, config, and test house your application's core logic, assets, configuration, and tests, respectively.

The lib/ directory is the heart of your application, containing your Elixir modules and logic. priv/ holds static assets, database migrations, and seeds. config/ manages application settings and environments. test/ is for your unit and integration tests. web/ (or lib/my_app_web/ in newer versions) contains your controllers, views, templates, and routers. assets/ is for frontend assets like JavaScript and CSS, managed by tools like esbuild or webpack.

Key Directories Explained

Directory	Purpose	Key Contents
`lib/`	Core application logic	Elixir modules, context modules, schemas
`lib/my_app_web/`	Web-related components	Controllers, views, templates, routers, channels
`priv/`	Private application data	Database migrations, seeds, static assets
`config/`	Application configuration	Environment-specific settings (dev.exs, prod.exs)
`test/`	Automated tests	Unit tests, integration tests, fixtures
`assets/`	Frontend assets	JavaScript, CSS, images (managed by build tools)

Visualizing the Phoenix project structure helps in understanding the separation of concerns. The lib directory contains your application's core Elixir code, including business logic and data structures. The lib/my_app_web directory is dedicated to the web layer, housing components like controllers that handle incoming requests, views that prepare data for presentation, and templates that render HTML. The priv directory is for assets that are not directly served by the web server but are part of the application's deployment, such as database migration scripts and seed data. Configuration files in config dictate how your application behaves in different environments (development, testing, production). Finally, the test directory is where you write automated tests to ensure your application functions correctly.

📚

Text-based content

Library pages focus on text content

Next Steps: Exploring the Router and Controllers

With a solid understanding of project setup and structure, our next steps will involve diving into the

code

router.ex

file to understand how requests are mapped to controllers, and then exploring the controllers themselves to see how they interact with your application's logic and prepare data for the views.

Learning Resources

Phoenix Framework Official Documentation: Getting Started(documentation)

The official guide to installing Phoenix and creating your first project, covering essential setup steps.

Phoenix Framework Official Documentation: Project Structure(documentation)

Detailed explanation of the standard Phoenix project directory layout and the purpose of each directory.

Elixir School: Phoenix Project Structure(tutorial)

A beginner-friendly tutorial that walks through the Phoenix project structure with clear explanations.

Phoenix Framework: Creating a New Project(documentation)

Official documentation on the `mix phx.new` command and its options for project generation.

Understanding the Phoenix Router(documentation)

Learn how Phoenix routes requests to controllers and the role of the `router.ex` file.

Elixir Forum: Phoenix Project Structure Discussion(blog)

Community discussions and insights on Phoenix project structure and best practices.

YouTube: Phoenix Framework Tutorial - Project Setup(video)

A video walkthrough demonstrating how to set up a new Phoenix project from scratch.

Elixir School: Phoenix Controllers(tutorial)

An introduction to Phoenix controllers, their role in handling requests, and how they interact with the router.

Phoenix Framework: Configuration(documentation)

Guide to understanding and managing application configuration files in Phoenix.

What is Elixir?(wikipedia)

An overview of Elixir, the functional programming language that powers the Phoenix Framework.