Elixir's speed, concurrency and simple syntax makes it into a very attractive language for web programming. In this chapter, we'll get started with Elixir's most popular web framework – Phoenix!
To give you some background...
Phoenix was created in 2014 by programmer Chris McCord, and aims to be the "web interface" for your Elixir app.
If you want to know more about Chris' motivations and goals for the framework, check out this video from ElixirConf 2014:
Phoenix can be installed using the Mix command line tool. But first, we need to install the Hex package manager! This is similar to NPM in Node or RubyGems in Ruby:
Now that we have Hex, we can install all the dependencies needed in our Phoenix app. Let's go ahead and install Phoenix with Mix:
We also want to install the new Mix task
phx to generate files for our project. This requires a separate install command right now, but will be the default once Phoenix 1.3 is out of beta (which should be very soon):
We're also going to need a database for our project. Phoenix and its database wrapper – Ecto – use Postgres by default (although it supports many other database systems too)
If you haven't installed Postgres on your computer, I recommend that you download Postgres.app (if you have a Mac) and follow the install instructions to get started.
What we want to build
Throughout the rest of this course we'll be using Phoenix to build a webapp called Messengyr – a simplified clone of Facebook Messenger.
Our application will only have 3 views:
Messenger interface (where the majority of the logic will be)
If you have a Mac with Sketch installed, feel free to download this Sketch-file to check out the interface we'll be implementing (if you don't have Sketch, don't worry, we'll go through the design together in the coming chapters).
You can also play around with the final result right here (it's a free Heroku app, so it might take a little time to load).
Creating your project
Let's create our "Messengyr"-project by running this new Mix command:
You should now see all the files being created, and a line asking:
Just press "y" to install the framework's dependencies. This might take a little while, so during that time we can take a look inside the new "messengyr"-folder that Mix just generated for us!
What's in a project?
It's worth noting that a Phoenix project is essentially just like any other Mix project, but with some extra goodies packed in. Chris McCord often points out that Phoenix is not your application, but just the "web interface" for your application (unlike a framework like Rails).
test, in addition to the
mix.exs-file should all look familiar, since those files were also generated in your previous Mix program. What's different though is that the
config-folder now comes with some predefined environment files (
prod.exs...). Moreover, the
test-folder also contains some default files and folders, and
mix.exs has a list of preinstalled dependencies like
Postgrex, which we'll talk more about later.
Let's now go through some of the new folders that are unique for Phoenix projects. Don't worry if some of the descriptions below sounds overly-complicated for now – you'll soon understand how every part works once we actually start working on our app.
lib: once again, this is where you'll spend by far the most time. It should contain a
messsengyrfolder and a
messengyr_webfolder is unique to Phoenix, and contains your routes, controllers, views and templates – all of which we'll go through in the next chapter.
package.json.Phoenix uses some of these Node packages to perform web-related tasks like transforming your files with Babel for example.There's also a
brunch-config.js-file, since Phoenix uses the Brunch compiler by default to compile, merge and minify some of your files for maximum efficiency (you might be more familiar with competing tools such as Gulp or Webpack).
deps: all your Hex dependencies go into this folder, both the ones that Phoenix has pre-installed and the ones that you might want to install in the future.
priv: this folder contains three sub-folders:
static. All your static assets from
assetswill end up in
staticafter they have been compiled (and possibly merged/minified).
repohelps us set up our database structure, and we'll learn more about it in an upcoming chapter.
Running your project
Enough talking, let's run our newly created project! We navigate to our project folder with
cd messengyr, and create the Postgres database that we'll be using for our app with this Mix-command:
Once that's done, we can start our server:
Phoenix will take a little time to compile all the files the first time, but after a while you should see the line
Running Messengyr.Endpoint with Cowboy using http://0.0.0.0:4000. Type in localhost:4000 in your browser and you should be greeted with this:
You did it! In the next chapter, we're going to learn more about the inner workings of Phoenix and create the first view for our app.