Lesson 7

Building our first pages


Now that you know more about how routes, templates and controllers work together, let's start building the app we want! In this lesson, we're going to design three pages:

  1. The landing page (index)

  2. The "Login"-page

  3. The "Signup"-page

In case you haven't already taken a look at the Sketch-file in the "Phoenix"-lesson, this is what they should look like:

The landing page
The "Login"-page ("Signup" uses the same design)

If you ever run into a problem or your app stops working while following the course, you can either compare your code with the one I have on my GitHub repo (I have organised it so that it has one commit per chapter), or leave a comment right here (hover over some text or code and click the little comment-icon on the right side).

Creating the routes

Let's jump back into our router.ex-file and generate our routes based on the mockup. The /-scope should currently look like this:


We will now delete our /test-route, and instead add the /login and /signup-routes:


If you try to go to one of the new routes in your browser, you'll obviously be greeted with an error message. Time to fix the controller!

Head into the page_controller.ex-file. You can delete the say_hello/2-function that we defined earlier. Instead, we'll make sure that we define the three functions that we're referencing from our router: index, login and signup:


Note that we previously returned render conn, "index.html" in our index/2-function, however, you can actually remove that "index.html"-string. If you omit the second parameter, Phoenix will automatically look for a template with the same name as your function anyway (so the index/2-function is connected to index.html.eex).

Getting closer. Now we just need our templates.

Create two new files in the messengyr_web/templates/page-folder: login.html.eex and signup.html.eex. We'll keep the contents very simple and similar to each other:


There we go! Similarly, if you go to /signup, you should see the "Signup" page.

We'll also update our index page, so that you can log in and sign up from there directly:


It's not pretty yet, but that's okay!

You can also delete the my_name/0-function in page_view.ex while you're at it, since we're not using it anymore.

Styling the pages

Let's make the page pretty! First, download this zip-file to get all the image assets that we're going to use. Unzip it and place the resulting images-folder in assets/static so that it overwrites the images-folder that's currently there.

bgCombined Shape

Next, we're going to make some changes to our layout-template, so open messengyr_web/templates/layout/app.html.eex. We're adding a special class to the body-tag so that we can style pages differently depending on the route we're on (thanks to @conn.path_info), and we also want to add a header that's visible on every page instead of the h1-tag. Your final body-tag and its content should look like this:


Note that we're using the special link-helper in our header so that we can easily link to other pages within the app. The first parameter is the text that we want to show inside the a-tag (for the login-link, it's just "Log in"), and in the :to-option you first specify the path type (Routes.page_path will look up our page_controller), and then the route as an atom (e.g. :login).

This link-helper might at first seem tedious compared to just using a normal a href="/login", but the upside is that your app becomes more "aware" of your intentions . If you accidentally delete a route that you've linked to in your template for example, you'll get an error message instead of keeping a link leading to a blank page.

Next, we remove the CSS-file located at assets/css/phoenix.css. These are some predefined styles that Phoenix uses (mostly to show its default landing page) with the Bootstrap library. Since we don't need that, there's no point in keeping it, as it might conflict with our own styling. You might have to restart your Phoenix server (CTRL + C, mix phx.server) after deleting it to see the changes.

You should now be able to navigate from one page to the other when clicking on "Log in":

This still looks really ugly though. Time to apply some CSS! In order to make our CSS code more manageable, we'll use the SASS preprocessor. Run this command in a terminal window, inside your assets directory, to install the sass-brunch package from NPM:

If you open your package.json from the assets folder, you should now see sass-brunch among your other devDependencies. Great! Now simply change the name of the file at assets/css/app.css to app.scss, and you're ready to use SASS!

Since this isn't a CSS-tutorial, I won't go into detail about how the styling works here, simply copy the following code and paste it in your app.scss-file:


Now, just wait for the page to reload and... tada!

That looks much better already!

The plugin will automatically concatenate all the SASS-files that you add to this folder, so let's create a new header.scss file there as well, with the following content:


And now our header is there too. Great! If Phoenix doesn't pick up the header.scss file for some reason, try restarting the server.

All your three pages should now have some basic markup and styling and we're ready to focus more on the functionality! In the next chapter, we'll go through databases with Ecto!


Mingyar Furtado

In case your phoenix project is using Webpack to do things like that, just take a look here in case you need help: https://github.com/mingyar/messengyr/tree/lesson-7



Get this with warning with Phoenix v1.2.5

<%= render(@view_module, @view_template, assigns) %>

You should do:

  <%= @inner_content %>

Matt Sichterman

There is still in error in line 23 with newer versions of Phoenix. It should be <script src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>

Tristan Edwards

Thank you! It's been updated now 👍


lib/messengyr_web/templates/layout/app.html.eex:42: undefined function page_path/2

I am getting this errors because i think i am using a higher

Phoenix version. Can you help?


Resolved. I had to change 

<%= link "", class: "logo", to: page_path(@conn, :index) %>

<%= link "Log in", to: page_path(@conn, :login) %>


Tristan Edwards

Glad you figured it out and thanks for sharing! I've updated the code in the lesson 😊

Jesse Shea

In the app.html.eex file I had to change <%= link "", class: "logo", to: page_path(@conn, :index) %>

<%= link "Log in", to: page_path(@conn, :login) %> to <%= link "", class: "logo", to: Routes.page_path(@conn, :index) %>

<%= link "Log in", to: Routes.pagepath(@conn, :login) %> It's not really obvious on here because of the formatting, but I had to add Routes to the page_path which I learned from here: https://stackoverflow.com/questions/40449151/programming-phoenix-undefined-function-page-path-2 I'm using Phoenix 1.4

Jesse Shea

npm install sass-brunch --save-dev is giving all kinds of errors. Couldn't you use something generic that isn't vulnerable to update breakage?

Jesse Shea

This was by far the best demonstration that I have seen of Phoenix, but that it was broken by css has really disappointed me. Please don't use fancy nonsense when creating basic courses, I don't have time to figure out this stupid npm stuff.

Jesse Shea

Sorry it looks like it's all because I'm using Phoenix 1.4 that I'm having the trouble. If you could update this lesson on how to make sure that you use Phoenix 1.3 then it should keep others from going through the frustration.

Tristan Edwards

Hey Jesse! Thanks for the feedback and sorry for the problems your encountered. I will update the course to use Phoenix 1.4 in the coming weeks.

Chris Siannas

Hi there! I use Phoenix 1.4. I followed all the steps for the installation of sass, without problem,  and in general I followed the instructions as they were written. However I did not manage to have the pictures which displayed for the application. I do not Know if I can embed pictures with these comments ...

Chris Siannas

Actually I converted the sass file to css and finito !