Making a custom 404 page with Phoenix

Phoenix Cookbook : part 1 of 4 published on Aug 26, 2015

By default, Phoenix returns just a text value of “Page not found” with a 404 response.

Here are the steps to make your own custom 404 page.

Change Dev Environment to not ignore errors

# /config/dev.exs
...
  debug_errors: false,
  catch_errors: true,
...

Update Error View

Comment / remove the 404 function.

# /web/views/error_view.ex
defmodule Nest.ErrorView do
  use Nest.Web, :view

  # def render("404.html", _assigns) do
  #   # "Page not found"
  #   render "404.html"
  # end

  def render("500.html", _assigns) do
    "Server internal error"
  end

  # In case no render clause matches or no
  # template is found, let's render it as 500
  def template_not_found(_template, assigns) do
    render "500.html", assigns
  end
end

Create 404 Template

<!-- /web/templates/error/404.html.eex -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>404 - Page Not Found</title>
    <link rel="stylesheet" href="<%= static_path(@conn, "/css/app.css") %>">
  </head>

  <body>
    <h1>404 - Page Not Found</h1>
    <p>This isn't the page you were looking for.</p>
  </body>
</html>

Check it out

Now if you power up your Phoenix app and get a 404 error, you will see your new 404 page.

Next: Authenticating Users using a Token with Phoenix