Search

Making Quick and Easy Page Prototypes in Rails

Andrew Jones

2 min read

Feb 10, 2014

Making Quick and Easy Page Prototypes in Rails

I’m a front-end developer, which means I write HTML, CSS and JavaScript code all day. But I also frequently work with back-end developers on projects, and I often contribute front-end code and assets to web apps built with the Ruby on Rails MVC framework.

One issue that I frequently run into is the need to quickly create new page prototypes that aren’t ready to be integrated into the app, but still need to leverage existing Rails layouts and assets. Creating new controllers, views and routes every time is not only time-consuming, but it also leads to unnecessary clutter in the project’s repository. Plus, many front-end devs aren’t familiar enough with MVC or Rails to be comfortable making those kinds of additions.

While working on a Rails project recently, I needed to spin up a new page prototype and decided there had to be an easier solution. In my previous life as a PHP developer using frameworks like CakePHP and CodeIgniter, I’d created something of a “page prototype controller” and wondered if the same could be built in Rails.

As it turns out, you can. Here’s how:

The Controller

The controller itself is created as /app/controllers/pages_controller.rb, with the following code:

    class PagesController < ApplicationController
    end

This is literally all you’ll need in your controller to get started. However, depending on your app, you may also want to bypass authentication with the addition of something like: skip_before_filter :authenticate.

The Route

Next, you’ll need to add a line to your /config/routes.rb file:

    get '/pages/:action' => 'pages'

The View

Now, create a folder under /app/views called “pages” and drop a file called test.erb into it.

The Magic

Essentially, any request that starts with “yourdomain.com/pages” is passed to this new controller. Specifically, it passes the second part of the URL string (the ‘:action’ part of the new route), which corresponds to a view of that same name.

For example, “yourdomain.com/pages/test” will load the view at /app/views/test.erb, including the layout from ‘/app/views/layouts/application.html.erb`.

That’s it! I hope this proves useful to other developers needing to create quick HTML prototypes within Rails apps without adding unnecessary work or cruft to the project.

Zack Simon

Reviewer Big Nerd Ranch

Zack is an Experience Director on the Big Nerd Ranch design team and has worked on products for companies ranging from startups to Fortune 100s. Zack is passionate about customer experience strategy, helping designers grow in their career, and sharpening consulting and delivery practices.

Speak with a nerd

Schedule a call today! Our team of nerds are ready to help

Let's Talk

Related Posts

We are ready to discuss your needs.

Stay in Touch WITH Big Nerd Ranch News