Subscribe for only $15 to access all of our content

#105: How to Create Nested Phoenix Templates

Elixir 1.8

Phoenix 1.4


Often as an application gets bigger, the number of templates you have grows too. When this happens you may want to organize them to make them easier to manage. In our application here, we’re starting to have that problem. If we open our “page” templates directory. We see there are a few different partial files for each “section” and as we add more sections, we’ll use another partial. Let’s organize these a little better.

We could set up a separate view and that would be a good idea if we wanted to use these partials across many different views. However, our partials here are specific to this view and wont be shared.

Instead let’s organize these partials by creating a nested directory here called “sections” since it will store the different sections for this page. Then let’s move all our partials into the new directory. Since they’re in a new location, we need to go open our “index.html.eex” template and update how we’re calling them.

Template path: lib/teacher_web/templates/page/index.html.eex

...
<%= render "sections/section_1.html" %>
<%= render "sections/section_2.html" %>
<%= render "sections/section_3.html" %>

Now if we go back to the browser we get an error that Phoenix could not render our new partials. By default Phoenix doesn’t compile templates in nested directories. Let’s update our application to precompile all templates in the view including ones in nested directories.

To do that we can use the Phoenix.View “pattern” option. We’ll open our teacher_web.ex module and in our “view” block let’s add the “pattern” option, giving it a pattern to compile any templates in nested directories.

lib/teacher_web/ex

...
def view do
  quote do
    use Phoenix.View, 
      root: "lib/teacher_web/templates",
      namespace: TeacherWeb,
      pattern: "**/*"

...

Then if we go back to the browser and reload our page - it works. Our all our templates - even those in subdirectories - can now be called.

More Episodes

#106: Intro to Structs

In this episode we’ll get an introduction to Elixir structs. Great for anyone just getting started with Elixir.

Watch episode
Alchemist's Edition

#104: Generating RSS Feeds with Elixir

In this episode we’ll take an existing Elixir Phoenix application and build an Atom feed for it. To build the feed we’ll use the Atomex package.

Watch episode

#103: Writing Tests with ExVCR

In this episode we’ll explore one way of mocking external HTTP requests when testing using ExVCR. ExVCR records the actual HTTP request and response and replays it whenever that test runs.

Watch episode