Overview of Phoenix project directory structure and essential development tools.

Get the right tools

• Install the “Phoenix framework” VS Code plugin for syntax highlighting

Project directory overview

• _build: compiled files (don’t track in git)
• .elixir_ls: generated by ElixirLS plugin (ignore)
• assets: all frontend files (JS, CSS, etc); uses Tailwind by default
• priv/static: stores production static files (e.g., images, logo, etc)
• config: app config (general + per environment, e.g., speed up bcrypt in tests)
• deps: Elixir dependencies (ignore in git)
• lib: all your source code (split between business logic and web-facing code)
  • [app]/: business domain logic
  • [app]_web/: web layer (controllers, views)
• priv: production files that aren’t source code (static assets, DB migrations, translation files)
• test: mirrors lib structure for tests

Root files

• .formatter.exs: code formatting rules
• .gitignore: ignored files for git
• mix.exs: like package.json for Elixir (app info, dependencies, custom scripts)
• mix.lock: lockfile for dependencies (don’t edit)
• README.md, sqlite3 DB file (if using SQLite)

Tips

• Use mix setup to initialize a project after cloning—installs and setups everything
• Custom scripts can be added in mix.exs