Elixir & Elm 101–1 — Getting the basics setup
I am bummed that I still haven’t been able to convince work that Elixir is the perfect language to solve their problem, probably because I haven’t really built anything in production with it yet. So my next posts are going to be building my personal blog and site using it. My personal site https://jtwebman.com has been down for the last couple of months now as I never finished moving it over to Ghost. I want to build something in Elixir and Elm so here we go. This blog is going to be a full Elixir site with Elm running the backend admin UI. It will be completely open source.
I have a little head start as I have read most of the Programming Elixir book. It was a great book but I don’t think it is what I need to get started. If you want you probably can just work through the Introduction on the Elixir site and if you have been programming awhile you might get away with only doing a few of the pages on there. I like to learn from building stuff as opposed to reading books and introductory sites. So I hope this post serious helps you out as well. I do assume though that you have built websites before in other server side technologies. If not it is going to be a steep learning curve but I am sure you will learn as you go.
Let’s get started. Since, I have no site at all right now, the first step is to just get a basic Elixir site running with the blog posts as pages looking like my old site. This alone will probably be a few posts.
Erlang/OTP 18 [erts-7.3] [source-d2a6d81] [64-bit] [smp:4:4] [async-threads:10] [hipe] [kernel-poll:false]
Interactive Elixir (1.2.4) — press Ctrl+C to exit (type h() ENTER for help)
Ctrl-c Ctrl-c to exit. Notice the first line shows the Erlang version Erlang/OTP 18 then a few lines down you can see the Elixir version, Elixir (1.2.4). If you have lower versions some of what I build might not work. So try to stay on the latest.
Also I run Linux Mint 17.3 (Ubuntu 14.04 clone) for an OS. I would expect everything will be the same on Mac OS as well but windows is a different story. If you are on windows you might want to install VirtualBox and make a Linux Mint VM to work on as not all the tools I use like SSH will be on windows.
The next thing we will need is the Phoenix framework as well as Hex package manager. The Phoenix Install page is a good detailed walk through but to do it quickly here are the commands I ran.
Install or upgrade Hex to the latest:
Get the latest Phoenix mix tasks:
mix archive.install https://github.com/phoenixframework/archives/raw/master/phoenix_new.ez
Now we need to be running PostgreSQL on our local for later on when we start setting up a database though this is Erlang so maybe later we will move this part out of the Phoenix application and use a simple key value store, mnesia database, or maybe another interface to store it in any database. I just wanted to try out the default way first.
On mac just use the Postgres.app. On Ubuntu 14.04 clone you would run the following commands to install the latest Postgres 9.4 version as that is what is required to use the Ecto Elixir library that comes default with Phoenix library.
echo “deb http://apt.postgresql.org/pub/repos/apt/ trusty-pgdg main” >> /etc/apt/sources.list.d/pgdg.list
wget — quiet -O — https://www.postgresql.org/media/keys/ACCC4CF8.asc | sudo apt-key add -
sudo apt-get install postgresql-9.4 postgresql-client-9.4 pgadmin3
Now on Ubuntu you will need to give the postgres user a password so you can login.
sudo -u postgres psql postgres
Type “help” for help.
postgres=# \password postgres
Enter new password: postgres
Enter it again: postgres
Let’s make sure you have the latest Node.js installed as Phoenix uses a tool called Brunch to build the frontend assets. Run the following on the command line.
If you don’t get a version higher then v5.x.x or get an error you will need to install the latest node. On Mac I would just use Homebrew to install it but on Ubuntu 14.04 I would run the following to get the latest.
curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
sudo apt-get install nodejs
Now last but only if you are on Linux you will need to install the inotify-tools. This is so the live reload will work. On a Mac and windows machine this isn’t needed.
sudo apt-get install inotify-tools
Now we have everything we need to get started with our first Phoenix app. I now navigate to my projects folder. You don’t have to do this but I find it easier than doing it directly in the user home folder. To create a new folder with a new Phoenix app in it run the following command.
mix phoenix.new mysite_com
* creating mysite_com/config/config.exs
* creating mysite_com/config/dev.exs
* creating mysite_com/config/prod.exs
Fetch and install dependencies? [Yn] y
* running mix deps.get
* running npm install && node node_modules/brunch/bin/brunch build
Shall I install rebar? [Yn] y
The database for MysiteCom.Repo has been created.
If you don’t get the database created message at the end run:
psql -h localhost -U postgres -W
This will try to login to the Postgres database with a password. If it can’t connect search for the error on Google. Postgres can be a pain sometimes to get all the config settings correct.
Now we are ready to run the basic Phoenix site. Run the following on the command line.
You should now be able to point your browser to localhost:4000 and see this:
Awesome we have a running elixir website. We are going to stop here for the first post. In the next post we will get it to look like my old blog site by including sass, bootstrap, font-awesome, and updating the layout files. See you then!
Make sure to follow me here to get notification when my next post is live.