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:

classPagesController<ApplicationControllerend

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.