Font Awesome

Convert a Static HTML Website to a Ruby on Rails Web Application

Tatyana Shestopalova Walkthroughs , , , , , , , , , ,

Motivation

Even the simplest website starts from a sketch or drawing of what the page should look like. This is often referred to as a wireframe, or otherwise known as the blueprint for a web product. While working on our roommates project, my startup partner and I worked together to design in PowerPoint a blueprint for our one-page “Coming Soon” website. After completing a number of web development courses on Codecademy, I was able to build a static web page per our design. In addition to HTML, CSS, and JavaScript, the website I built utilized the following tools:

  • Bootstrap
    • …for responsive <div>‘s, i.e., jumbotrons that automatically scale according to various page widths
  • Bootstrap Social
    • …for standard social icons (think Facebook and Twitter icons)
  • jQuery
    • …the famous JavaScript library
  • jQueryUI
    • …for additional JavaScript effects such as ToggleClass
  • Font Awesome
    • …for icons like fa-fa-bars and checkmarks
  • Custom Favicon
    • …the square image next to the website URL in the browser, similar to a logo

Standard, right?

However, a static website coded in HTML, CSS, and JavaScript wasn’t enough for our purposes. We needed our static website to function within the Ruby on Rails framework so that additional database-backed functionality could be incorporated in the future (e.g. the ability for users to send messages that would be stored on a database). I had difficulty finding documentation online that described how to configure our static website to a Ruby on Rails environment that supported all of the above tools. This is where the theoretical knowledge I gained from web development tutorials came to an end and I needed “real world” information.

After finding that most of the information I needed was scattered around the web, I decided to write my own walkthrough for how to convert a static website into a web application powered by Ruby on Rails.

Walkthrough

Step 1: Create the Application Infrastructure

In other words, create the web application from the computer terminal.

$rails new MyAppName

Step 2: Add Gems

Open the Gemfile (MyAppName/Gemfile) and incorporate the Bootstrap, Bootstrap Social, Font Awesome, and jQueryUI gems. Note: Depending on your Gemfile syntax you may need to add extra comment lines (beginning with #) between gems.

gem 'bootstrap-sass', '~> 3.3.4'
gem 'font-awesome-sass', '~> 4.3.0'
gem 'jquery-ui-rails'
gem 'bootstrap-social-rails'

Step 3: Install Gems

Install the Ruby on Rails Gemfile from the computer terminal. Note: First change the directory in the terminal to the MyAppName directory. For a list of terminal commands, click here. Hint: The terminal command you need is cd.

$bundle install

Step 4: Create a Controller

Generate a controller from the computer terminal. Note: Pages is the controller name.

$rails generate controller Pages

A controller receives requests for an application.

Step 5: Define an Action

Open the pages_controller.rb file saved in MyAppName/app/controllers and define an action for the home page. Note: Index is the action name.

def index
end

An action collects information and provides it to a view.

Step 6: Define a Route

Open the routes.rb file saved in MyAppName/config and root the web application to the Pages controller’s Index action.

root 'pages#index'

Routes decide which controller will receive a given request.

Step 7: Paste Custom CSS Code into the Controller Stylesheet

Incorporate the custom CSS file used to style the original static website by opening the pages.scss file saved in MyAppName/app/assets/stylesheets and pasting in all the original custom CSS code. Note: The pages.scss file was automatically generated when the Pages controller was created, but you may need to change the extension from .css to .scss.

Step 8: Import Tool-Based CSS into the Application Stylesheet

Open the application stylesheet (application.scss) saved in MyAppName/app/assets/stylesheets and import the CSS associated with Bootstrap, Bootstrap Social, Font Awesome, and the custom pages.scss file.

Mini Step 8: First change the format of the application.css file from .css to .scss

@import "bootstrap-sprockets";
@import "bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";
@import "bootstrap-social";
@import "pages";

Step 9: Where, oh where could JavaScript be?

Open the application JavaScript file (application.js) saved in MyAppName/app/assets/javascripts and include the JavaScript libraries for jQueryUI and Bootstrap. Note: Font Awesome is not ‘required’ here because Font Awesome does not rely on JavaScript.

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .

Mini Step 9: Move the custom JavaScript file used to used to add responsiveness to the original static website into the MyAppName/app/assets/javascripts folder. This file will be picked up in the application by the //= require_tree line. The file can have any name you want, such as script.js.

Note: Turbolinks matter. Learn why in my post about Turbolinks.

Step 10: Mutilate the original index.html File

A Ruby on Rails web application pulls boilerplate html code and metadata from the application view file (application.html.erb) saved in the MyAppName/app/views/layouts folder. The html body yields to another view specified by the controller. In this case, the body view specified by a request to the home page is coded in the index file saved in the Pages view folder (MyAppName/app/views/pages/index.html.erb).

This 2-part step describes how to take apart the original index.html file and incorporate it into the Ruby on Rails infrastructure (also known as the MVC model).

Part A: Application View (<head> Tag)

The application.html.erb file contains the following lines of code by default:

<!DOCTYPE html>
<html>
<head>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>

Note: The charset attribute defines your page’s character encoding, and the viewport meta-tag controls your page’s scale and layout on mobile devices.

Then, add all other standard meta tags. Guides for good meta tags to include can be found here and here.

Your original index.html page may have included the following meta tags:

  • Link to bootstrap.min.css stylesheet
  • Link to bootstrap-social.min.css stylesheet
  • Link to font-awesome.min.css stylesheet
  • Link to jQueryUI stylesheet
  • Link to custom CSS stylesheet

None of these 5 stylesheets should be included in your revised index.html view because Rails pulls stylesheet information from the MyAppName/app/assets/stylesheets folder. We incorporated these stylesheets into the proper Rails folder in Step 7 and Step 8.

Finally, modify the following:

The favicon used for the static website was previously linked within the <head></head> tag with code that looks something like this:

<link rel="icon" type="image/ico" href="favicon.ico"/>

To incorporate a favicon into a Ruby on Rails web application, first save the favicon.ico file in the application’s MyAppName/app/assets/images folder and then replace the old favicon link with the following embedded ruby code:

<%= favicon_link_tag 'favicon.ico' %>

Part B: Controller View (<body> Tag)

Create a new index.html.erb file and save it in the MyAppName/app/views/pages folder. Paste in all code that was originally within the <body></body> tags, but omit the <body></body> tags themselves since they are already included in the application view (the first html tag in this file might be a <div></div> tag).

Omit the following tags that were included in the original index.html file:

  • Link to the jQuery library
  • Link to the jQueryUI library
  • Link to the Bootstrap.min.js file
  • Link to the custom JavaScript file

The last item in the above list reflects the need to omit any and all links to JavaScript files (e.g. links inside <script></script> tags). These files were incorporated into the proper Rails folder in Step 9.

That’s all!

Finally, in the computer terminal run the $rails server command and visit http://localhost:3000 in your web browser. The web application should display the original static website as originally intended, but now within the preliminary infrastructure of a database-backed web application.

 

Did you find this walkthrough helpful?

Do you have questions on the above?

Do you see any errors?

 

If so, please leave your thoughts in the comments below.