Made withPhoenixClip

Learn the Phoenix Framework Create a Blog App Part 1

P

Program With Erik

Creator on the Phoenix channel

Watch on YouTube ↗

11K viewsJan 25, 20179:58 runtime

Learn how to build a blog application API from scratch using the Phoenix framework for Elixir. This tutorial walks you through setting up a new Phoenix project, configuring it as a JSON API backend without HTML or Brunch, and preparing it for a JavaScript front end. You'll…

Chapters

#phoenix#clip#backend

Project Overview

This video walks through creating a JSON API backend for a blog application using the Phoenix framework and Elixir. The goal is to create an API that can be consumed by a separate JavaScript front-end framework like Ember.js or Vue.js.

Prerequisites & Installation

Before starting, you need a few key technologies installed:

Erlang
Elixir
Node.js

Tip
The official Phoenix Framework website (phoenixframework.org) provides detailed installation instructions for all operating systems.

Creating an API-Only Project

A new Phoenix project is generated from the command line using Mix, Elixir's build tool. To create a project that only serves an API (without server-rendered HTML or front-end asset bundling), use the --no-html and --no-brunch flags.

mix phoenix.new blog --no-html --no-brunch

Adding JSON:API and CORS Support

To ensure compatibility with front-end frameworks like Ember.js, the API must adhere to the JSON:API specification and handle Cross-Origin Resource Sharing (CORS).

Add Dependencies: Update your mix.exs file to include these packages:
- ja_serializer: For JSON:API serialization.
- cors_plug: To handle cross-origin requests from the front-end application.
Configure Encoders: In config/config.exs, add a configuration for Phoenix to recognize and use the JSON:API format encoder.

Important
The cors_plug is essential for development when your front-end (e.g., Ember server) and back-end (Phoenix server) are running on different ports.

Generating a Resource

A Post resource is created using a generator provided by the ja_serializer library. This command scaffolds all the necessary components for a CRUD API endpoint.

# General structure of the command
mix ja_serializer.gen.json Post posts title:string body:string author:string

This single command automatically creates:

A model for the Post schema.
A controller with actions for index, show, create, update, and delete.
A migration file to create the posts table in the database.
API routes in the router.

Database Management with Ecto

Phoenix uses Ecto for database interactions. Key commands include:

mix phoenix.routes: Lists all available routes to verify the generator worked correctly.
mix ecto.migrate: Applies pending migrations to create or alter database tables.
mix run priv/repo/seeds.exs: Executes the seeds.exs script to populate the database with initial data.

Verifying the API Endpoint

After migrating and seeding the database, start the server with mix phoenix.server. You can then navigate to http://localhost:4000/api/posts in your browser to verify that the API is running and correctly returning the seeded data in the JSON:API format.

Introduction to Phoenix for a Blog API

Hey developers, today we're going to look at the Phoenix framework and we're going to create a blog. Let's see how it goes.

Hey, so let's take a look at Phoenix framework. Phoenix framework is a web development framework written in Elixir, which implements server-side MVC. So it's really cool. If you're interested or you've done work in Ruby on Rails, this will be right at home with you. There's definitely subtle differences between Elixir and Ruby, and more than subtle differences, there's very big differences. So let's take a look at it and we'll begin.

In this tutorial, we'll just start off, let's go ahead and create a new Phoenix application, and then we'll just do some of the setup things. In the next video, we'll go into more detail on what you need to do to get this up and running. And then in the last videos, we'll get it working with Ember.js as our front end. So our Phoenix will just be an API backend. And then we're also going to see if we can try to get it working with Vue too, just giving you an idea how these different frameworks work. So let's begin.

Installation and Prerequisites

Before, if you're brand new to Phoenix and Elixir, best thing, best bet is to go to the phoenixframework.org or just Google Phoenix framework, you'll find it, and click on the installation. It'll give you some great information what you need to do to start. So if I scroll down here it says you need to have Elixir, of course, and so go to the Elixir page. So we go to the Elixir page and it says you need to, if you have Mac OS, you need to run brew update, you need to install if you have brew, that is. Or if you use port, you can use port to install it.

On Unix there's a lot of different ways: yum, apt, or you add it to your repo. And if you're using Ubuntu, sudo apt-get update. So what you have to do first is install Erlang and then once you have installed Erlang you can install Elixir. I won't get into the differences between Erlang and Elixir and what all that means. It's just a different type of programming language, just like Ruby, and then you have Ruby on Rails. We have Elixir and then we have Phoenix. So I have already done that on my system so I'm not going to bore you with those details. So we'll go on to the next part. And also you need for Phoenix, you'll need to have Node installed. So we'll go to the next part and we'll go ahead and create a new project.

Creating a New Phoenix API Project

So to do that, we'll have something called mix. Mix is installed. We can do mix help and then we have a number of commands. So you can see here, local.hex. I installed Phoenix already, so I have this mix phoenix.new. So let's run that command, mix phoenix.new, and we're going to just call it blog. We're going to go --no-html --no-brunch, and that's just saying, telling it let's go ahead and create an API without anything else. And we'll hit yes here to go ahead and make sure it installs all our dependencies.

All right, so everything is installed here and we can just make sure it works real quickly. We'll change directory to blog. We'll go mix phoenix.server. All right, so let's go to localhost:4000. All right, since we have an API but we haven't created any routes or anything yet, we at least see that we get a 'no route' error. And you'll notice that Phoenix has really good error detection. You can turn this off in debug, but you can say, hey, there's no route for the root element and this is all you have in here. So yeah, that's not going to work.

Adding JSON:API and CORS Support

So hey, I went ahead and jumped a little bit forward here, and I'll show you what I did here to create this API. So I want to go ahead and install ja_serializer. ja_serializer is a JSON API serialization for Elixir and you're probably wondering why we need that. And the reason we need that in our Phoenix application here is we're going to use a couple of different front-end frameworks. And one of them is Ember.js, and Ember.js by convention, by default, uses JSON API. So we really want to make sure we have that installed. So I went ahead and followed the instructions here and I'll show you what I did.

First, I went to the mix.exs file here, you can see it. And inside here, I put ja_serializer and then also just because I thought we may need it later, I added this CORS plug, which is cross-origin request plugin so we don't have any problems if we run Ember.js separately. So I'll show you how that works. And also in the ja_serializer, I had to go in and per the instructions here, I had to run a few commands. One other thing I did too was if you go into in the config and then config.exs, I went ahead and added this line right here, which says config :phoenix, format. This just tells it that we can use JSON API, that's a new format encoder, and that we're using application/vnd. So that's right here. So I just added, copy and pasted that into my config.

Generating the 'Post' Resource

And then on top of that, I went into my router and I created this plug here, my API plug, my pipeline. I just wanted to make sure it accepts JSON API, just the JSON there. And you may see something called resources here. So I added a new resource. And the way you do that is...you can see from the instructions from ja_serializer that you can use an API generator, and this API generator creates what we need. And since we're creating a blog, we want to make sure we have...we'll start with one route called Posts. We want to make sure we can create new posts and edit posts and that they have an author and title. So you can see down here... can you see that? Yeah. So you can see it's kind of hard to see but there's Post, posts, and then we're going to have a title, a body and an author. So that's, I ran that command, which I won't run it again, but that goes ahead and creates all the routes for us and it generates a bunch of files.

So if we go into our web and then go into our controller, we now have a PostController. This was all generated by running that command. So now we have this index, create, show, and update. And if we run mix phoenix.routes, we can see all the routes that we have here. Now we have this API posts, API post ID edit, and the reason that is is because we ran that generator command that you saw earlier, just using the information out of the GitHub for the ja_serializer plugin. And yeah, we have all this, we have this post. So we can get the posts, we can delete them, we can edit them, we can change them. So we're going to use this type of CRUD convention right here to do all that. And all this is already created for us when we generated it, which makes it really nice.

Database Migration and Seeding

And then we just had to run mix ecto.migrate and that went ahead and migrated everything for us. And if you look here at lib/blog... oops, let me see here... priv/repo/migrations we can kind of see the migration that we created too. So it created this migration, it's creating this table with title, body, and author, and so that's what it is. I believe the lengths of these are limited to 256 bytes, so we can change that later. We could have changed this migration. We can just kind of like rake in Rails, we can migrate things and then we can revert them too, but we'll do that later.

So now we have this is our new posts. We have it in our database too. So that should be it. This file right here is our seeds file. We can run it by running mix run and then the file name of the location: priv/repo/seeds.exs. And that'll run this file and it'll insert this record in the database. So now we only have one file, or one record in the database for our post. And this is this post.

Verifying the API and Next Steps

So let's go ahead and run the server and see if it works. And then we have an endpoint. Let's rerun it, make sure it's still working. 4000. We have /api/posts. Great. And here it is. So I have my one and only post in here, this attributes. So we know that the API is working.

So now in our next video, we'll go ahead and set up Elixir, well, we'll set up Ember. And we'll see if we can get it talking to it, and then we'll see if we can edit or delete posts. And then we'll take a look at Vue. Thank you for watching. If you like this video, please click the subscribe button. I really appreciate it. Or leave a comment below as well. Thank you and have a great day.