install the Phoenix application generator

mix archive.install hex phx_new

phx_new (application that creates your phoenix)

documentation

mix help phx.new

create new project

mix phx.new hello_world
mix phx.new hello_world --database sqlite3

mix phx.new hello_world --database sqlite3 --no-ecto

mix phx.new hello_world --module HelloWorld

mix phx.new ~/Workspace/hello_world --no-html --no-assets

create phoenix html template basic

mix phx.gen.html Todos Todo todos title:string completed:boolean
mix phx.gen.html Todos Todo todos title:string description:text completed:boolean

mix ecto.migrate

output

* creating lib/hello_web/controllers/todo_controller.ex
* creating lib/hello_web/controllers/todo_html/edit.html.heex
* creating lib/hello_web/controllers/todo_html/index.html.heex
* creating lib/hello_web/controllers/todo_html/new.html.heex
* creating lib/hello_web/controllers/todo_html/show.html.heex
* creating lib/hello_web/controllers/todo_html/todo_form.html.heex
* creating lib/hello_web/controllers/todo_html.ex
* creating test/hello_web/controllers/todo_controller_test.exs
* creating lib/hello/todos/todo.ex
* creating priv/repo/migrations/20260403183538_create_todos.exs
* creating lib/hello/todos.ex
* injecting lib/hello/todos.ex
* creating test/hello/todos_test.exs
* injecting test/hello/todos_test.exs
* creating test/support/fixtures/todos_fixtures.ex
* injecting test/support/fixtures/todos_fixtures.ex

Add the resource to your browser scope in lib/hello_web/router.ex:

resources "/todos", TodoController

Remember to update your repository by running migrations:

$ mix ecto.migrate

quicktour

quicktour

post steps after running mix phx.new hello

We are almost there! The following steps are missing:

$ cd hello

Then configure your database in config/dev.exs and run:

$ mix ecto.create

Start your Phoenix app with:

$ mix phx.server

You can also run your app inside IEx (Interactive Elixir) as:

$ iex -S mix phx.server

useful commands

kill process for existing port

lsof -i :4000

kill -9 PID

Phoenix Components

component docs

Define reusable function components with HEEx templates.

A function component is any function that receives an assigns map as an argument and returns a rendered struct built with the ~H sigil:

defmodule MyComponent do
  # In Phoenix apps, the line is typically: use MyAppWeb, :html
  use Phoenix.Component

  def greet(assigns) do
    ~H"""
    <p>Hello, {@name}!</p>
    """
  end
end

Embedding external template files

embedded template docs

defmodule MyAppWeb.Components do
  use Phoenix.Component

  embed_templates "cards/*"

  def landing_hero(assigns) do
    ~H"""
    <.pricing_card />
    <.features_card />
    """
  end
end

if you get inotify error messages in console, install it.

sudo dnf install inotify-tools