Dev Series – Phoenix Part 1 – Elixir Phoenix Installation

Dev Series – Phoenix Part 1 – Elixir Phoenix Installation

This will be a dev series about on how to install, build and deploy an application using Phoenix framework and other third party libraries.

What is Phoenix?

Phoenix is a web development framework written in Elixir which implements the server-side Model View Controller (MVC) pattern. Many of its components and concepts will seem familiar to those of us with experience in other web frameworks like Ruby on Rails or Django.

Prerequisites

Before we start, make sure you have the following installed on your system:

• Elixir (version 1.12 or later)
• Erlang (version 24 or later)
• Node.js (version 14 or later)
• PostgreSQL (for database)

Installing Elixir

On macOS (using Homebrew)

brew install elixir

On Ubuntu/Debian

sudo apt update
sudo apt install elixir

On Windows

Download and install from the official Elixir website or use Chocolatey:

choco install elixir

Verify Installation

After installation, verify that Elixir is properly installed:

elixir --version

You should see output similar to:

Erlang/OTP 25 [erts-13.0.4] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] [jit:ns]

Elixir 1.14.2 (compiled with Erlang/OTP 25)

Installing Phoenix

Now that we have Elixir installed, let’s install the Phoenix application generator:

mix archive.install hex phx_new

Creating a New Phoenix Project

Let’s create our first Phoenix application:

mix phx.new repz_exercise --database postgres

This command creates a new Phoenix project called repz_exercise with PostgreSQL as the database.

Navigate to the project directory:

cd repz_exercise

Project Structure

Phoenix generates a well-organized project structure:

repz_exercise/
├── _build/          # Compiled artifacts
├── assets/          # Frontend assets (CSS, JS)
├── config/          # Configuration files
├── deps/            # Dependencies
├── lib/             # Application source code
│   ├── repz_exercise/     # Business logic
│   └── repz_exercise_web/ # Web interface
├── priv/            # Static files and database migrations
└── test/            # Test files

Installing Dependencies

Install the project dependencies:

mix deps.get

Database Setup

Create and migrate the database:

mix ecto.create
mix ecto.migrate

Installing Node.js Dependencies

Phoenix uses Node.js for asset compilation. Install the frontend dependencies:

cd assets
npm install
cd ..

Starting the Development Server

Now we can start our Phoenix server:

mix phx.server

Or if you want to start it with an interactive Elixir shell:

iex -S mix phx.server

Accessing Your Application

Open your browser and navigate to http://localhost:4000. You should see the Phoenix welcome page!

What’s Next?

In the next part of this series, we’ll dive into:

• Setting up user authentication with Pow
• Understanding Phoenix contexts
• Creating our first routes and controllers

Conclusion

We’ve successfully installed Elixir, Phoenix, and created our first Phoenix application. The development server is running, and we’re ready to start building our application.

In the next tutorial, we’ll implement user authentication using the Pow library, which will give us a solid foundation for building user-centric features.

Stay tuned for Part 2: Authentication using Pow!