Create Content Negotiation Tutorial

[nelsonic]

Our goal with the @dwyl App is to have a server-side rendered (and progressively enhanced) Web UI (HTML) that works on any device and a REST API (JSON) that can be consumed programmatically by any script/system/app. We want the default UX (the Web) to be great and we want the API to be available from "Day 1". We definitely don't want to create/maintain two separate Phoenix Apps. We don't even want to maintain two separate router pipelines. We want the same route to transparently return a different representation of the content dependent on the Accepts header.

Todo

• Create a tutorial that builds an App from scratch that:
  • Returns a random famous quotation on the GET / request.
  • Render HTML if the Accepts header is text/html
  • Render JSON if the Accepts header is application/json

Read and understand the following:

• MDN Article: https://developer.mozilla.org/en-US/docs/Web/HTTP/Content_negotiation
• Chris's gist: https://gist.github.com/chrismccord/31340f08d62de1457454 (pattern matching)
• Issue thread with more detail: flexible content negotiation phoenixframework/phoenix#1054

[nelsonic]

Seeing this error:

     ** (ArgumentError) a content-type header is required when setting a binary body in a test connection

Will investigate when I get back to my desk.

[nelsonic]

Derp ... 🤦
Can you spot what is wrong with this code:

defmodule AppWeb.PageControllerTest do
  use AppWeb.ConnCase

  test "GET /", %{conn: conn} do
    conn =
      conn
      |> put_req_header("accept", "text/html")
      |> get(conn, "/")

    assert html_response(conn, 200) =~ "Welcome to Phoenix!"
  end
end

If you can, great! If not, don't worry, it's subtle! See the commit that fixed the test: 7fc61bc

[nelsonic]

[nelsonic]

[nelsonic]

Terminal JSON on localhost:

[nelsonic]

I'm fairly happy with the tutorial: https://github.com/dwyl/phoenix-content-negotiation-tutorial
(feedback and improvements very much welcome!)

Now I'm working on generalising the solution in a Plug so that any App can do this with minimal code: https://github.com/dwyl/content_negotiation_plug

🧑‍💻