Elixir Phoenix: Creating An App With Tests (Part 1: The Setup)
Updated: January 16th, 2019
Learn by doing
My preferred way to learn is to learn by doing. I can read and watch things all day but until I get down and dirty with the code, it does not really sink in. A great way to learn by doing is to build an app so that is what we are going to do!
It will not be a high level overview that explains everything that is happening. It is more of a walk-through for those that have some familiarity with Elixir and Phoenix but have yet to build their first app. I am using Phoenix 1.4 and Elixir 1.8 for this tutorial.
The functionality will be simple. You can create an account. You can search and view videos. You can add new videos. There will be some complexities like getting information from the YouTube API to add videos and using Tailwind CSS instead of the default Milligram (Milligram replaced Bootstrap in Phoenix 1.4). However, since I have already gone through the trouble of fighting the code to make things work, everything should go smoothly for you.
Let me know if you get stuck at any point and I will be happy to help you out. Let’s get started!
NOTE: If you get stuck at any point, you can leave me a comment or check out the repo on GitHub. Each part has its own branch and will be linked at the beginning with (GitHub). There will also be commit hashes throughout so you can see what was done for a particular section. They will look like the below (70ea207). If they are in a subheading, the commit pertains to all of that section. Otherwise, the commit will be shared at the end of the relevant text.
Generate the app (70ea207) (GitHub)
We are going to build Catcasts. It will be a place to share your favorite YouTube cat videos. The user will be created by signing in with Google. The videos will be created by posting a URL to the YouTube API and getting the information back. This information will be used to create a page with the video embedded.
If you do not already have Elixir and Phoenix installed, you can follow the Elixir guide and the Phoenix guide. Now presuming that is done, time to create our app. We run mix phx.new catcasts to generate our app, and when it asks “Fetch and install dependencies? [Yn]” we will say “y”.
Set up Postgres (975847b)
At the end of our app being generated, we get some helpful instructions on what we need to do next.
The first thing we need to do after we run cd catcasts and before we run mix ecto.create is configure our database. Depending on how you have your local Postgres setup, there’s a good chance for your local environment the username is your home directory (for me it would be thebrianemory), and your password field is empty. Let’s open up our config/dev.exs file and configure our database.
Note: If you do not have Postgres set up on your local machine, Heroku has a helpful guide for getting it set up. If you are using Homebrew, you can instead run brew install postgresql in the command line.
You can then run mix ecto.create, your app will compile, and then you will see the wonderful message, “The database for Catcasts.Repo has been created.” At this point you can run mix phx.server and visit http://localhost:4000 to see “Welcome to Phoenix!”
NOTE: If you see a message similar to “Shall I install rebar3? (if running non-interactively, use “mix local.rebar — force”) [Yn]”, go ahead and select “y”.
We also have three tests that were created with the app that are currently passing. To see them passing, we first also must update our database settings in config/test.exs.
You can now run the tests using mix test (your app will compile before running the tests) and see the lovely green text “3 tests, 0 failures”.
Part 1: The Setup
Next Up:
Part 2: Using Tailwind CSS
Part 3: Navbar, Errors, and Homepage
Part 4: Using Google Ueberauth
Part 5: Setting a Current User
Part 6: Using the YouTube API
Part 7: Setting Up Authorizations
Part 8: Making Things Look Nicer
Part 9: Search, Sort, Pagination
Part 10 Bonus: Using Elixir’s 1.6 Code Formatter
Follow me on Twitter @thebrianemory. Follow me here, click the hands below to show some appreciation, leave a comment, and get in touch!
