Elixir web development 101: introduction & toolchain setup

by Maxime Rouyrre

This tutorial started as a brain dump of my first steps in the world of Erlang, Elixir, Phoenix, etc. I thought it might be useful to share it.

Part 2 : collaborative todolist with realtime updates

0.1 What is this ?
  • Erlang is a general-purpose, concurrent, functional programming language
  • Elixir is a dynamic, functional language designed for building scalable and maintainable applications. Elixir runs on the Erlang virtual machine (BEAM).
  • Phoenix is a web framework for Elixir.
  • Hex is a package manager for the Erlang ecosystem.

Both Elixir 1.5 and Phoenix 1.3 were released in July 2017 so you may want to give it a fresh look.

0.2 Some links I found useful
0.3 What is this article ?

I had no previous experience with Elixir and I'll show you how to get from this:

A fresh Ubuntu 17.10 install. To this:

A Phoenix test application "hello world" running on localhost.

So there's nothing special with the rest of this article but I wouldn't say there's no value in having a step by step documentation of the toolchain setup, especially if you're new to this. I know it can be tedious to track the different steps required with 15 open tabs, not everything being always up-to-date.

In case I forgot to document some steps, just tell me and I'll update the article

1.1 Installing Erlang and Elixir

Cf. https://elixir-lang.org/install.html. For Ubuntu:

$ wget https://packages.erlang-solutions.com/erlang-solutions_1.0_all.deb && sudo dpkg -i erlang-solutions_1.0_all.deb

For Ubuntu 17.10, the Erlang artful repositories aren't yet available, so you'll have to edit /etc/apt/sources.list.d/erlang-solutions.list to point to the zesty repository (which works just fine):

$ cat /etc/apt/sources.list.d/erlang-solutions.list 
### THIS FILE IS AUTOMATICALLY CONFIGURED ###
# You may comment out this entry, but any other modifications may be lost.
deb http://binaries.erlang-solutions.com/debian zesty contrib
$ sudo apt update
$ sudo apt install esl-erlang elixir

Now we can check Elixir is correctly installed:

$ iex -v
Erlang/OTP 20 [erts-9.1] [source] [64-bit] [smp:4:4] [ds:4:4:10] [async-threads:10] [kernel-poll:false]

IEx 1.5.2
1.2 Install phoenix and create a test application

To install the new phx.new project generator, use the following command:

$ mix archive.install https://github.com/phoenixframework/archives/raw/master/phx_new.ez

Use it to generate a new project:

$ mix phx.new todoapp
$ cd todoapp
$ mix deps.get
$ cd assets && npm install && node node_modules/brunch/bin/brunch build
1.3 Install Postgresql and create a test database

Your test application is configured to use Postgresql by default. Well need to create test database and get some auth credentials to finalize the Phoenix app setup.

$ sudo apt install postgresql postgresql-contrib
# Postgresql was already installed on my machine so I may have skipped some steps.
$ createuser --interactive
Enter name of role to add: dev                 
Shall the new role be a superuser? (y/n) n
Shall the new role be allowed to create databases? (y/n) y
Shall the new role be allowed to create more new roles? (y/n) n
$ createdb testapp_dev
$ psql
psql (9.6.5)
Type "help" for help.
# ALTER USER dev WITH PASSWORD 'password';
# GRANT ALL PRIVILEGES ON DATABASE testapp_dev to dev;
# \q

Then edit config/dev.exs accordingly:

username: dev,
password: password,

And run the following command:

$ mix ecto.create

For your information, Ecto is a database wrapper and language integrated query for Elixir.

1.4 Launch the Phoenix app

If everything is correctly setup, the following should sufficient:

$ mix phx.server

If you get an error message regarding inotify-tools, just install it:

$ sudo apt install inotify-tools

Finally open the website:

$ firefox http://0.0.0.0:4000/
Conclusion

Now we have setup everything to start some Elixir & Phoenix programming like in these examples:

Those examples are from 2015, I'll try do something up-to-date for my next article, when I get some time... and some more inspiration :)

Thanks for reading !

Part 2 : collaborative todolist with realtime updates