Phoenix + HTMX + Vite starter

• Phoenix

• Htmx 1.x

• Svelte

  Prerequisites

• Install Docker

  • Mac

• Initialize project

  • Run init.sh script to install devbox + devbox dependencies

    Devbox requires the Nix Package Manager. If Nix is not detected when running a command, Devbox will install it for you in single-user mode for Linux. Don't worry: You can use Devbox without needing to learn the Nix Language.

  If you would like to install Nix yourself, we recommend the Determinate Nix Installer.

• Open in VsCode and install recommended extensions

  Getting Started

• Prerequisites completed

• Use vscode and open in devbox:

  • Ctrl + Shift + P > ``

• Start project with task start from the commandline/Task extension installed in vscode

Learning

• Phoenix

  NOTE: You can safely ignore the Asset Management portion of the guides

  • Package Glossary - Gain high-level understanding of the packages common to phoenix
  • Guides
    • Directory structure

      NOTE: Assets are treated slightly differently in this project because we're using bun + vite + tailwindcss as our asset build pipeline

    • Request Lifecycle
    • Plug
    • Routing
    • Controllers
    • Components and Heex
    • Ecto (Persistence)
    • Testing
    • Contexts (Business domain boundaries)
    • JSON & APIs

      NOTE - not used terribly often as we're relying on LiveViews and HTMX for our UI

    • Extra Credit
      • Telemetry
      • Channels
    • Distributed Job Server
      • Create a job
      • Add a Cron Job
    • Mix Tasks (CLI Tooling)
• Svelte
• HTMX - Assignment - Learn how to route using HTMX instead of using phoenix full-page loads

  Phoenix Controllers Development

  Phoenix LiveView Development

Phoenix

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 from your browser.

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

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