In this chapter we’re going to set up the bare bones of a meme-sharing social network application that we’ll work on over the coming chapters. We’re going to use Bootstrap to style and structure our app, then we’re going to deploy it to a live server on Heroku. If you haven’t gone through Chapter 0 yet, do that first.

Because our Cloud9 workspace is full of files from our To-do list app, we have to move all of our To-do list app files into a seperate folder. From your command line run the following commands:

cd ~/workspace
mkdir todo_app
mv * todo_app/

Now let’s generate our new rails project. I’m calling mine memespace.

rails new memespace

Now we have to run our apps manually. Open up a new command-line tab and run the following commands.

cd ~/workspace/memespace
rails server -b $IP -p $PORT

Our boilerplate app should be running. To stop this server and continue interacting with the terminal, press ctrl+c.

The Home Page

We’re not going to use generators while we build this app. Create the file app/controllers/static_pages_controller.rb

### app/static_pages/static_pages_controller.rb

class StaticPagesController < ApplicationController
  def home

Now we need to create the view

### app/views/static_pages/home.html.erb

<h1>Hello World</h1>

Edit config/routes.rb

### config/routes.rb

Rails.application.routes.draw do
 root 'static_pages#home'

Run your server and check the root URL and you should see the following:

Hello World

And we’re good to start building our app.

Bootstrap Navigation

To make our lives easy, we’re going to style our app with Bootstrap – a CSS framework developed by Twitter. We’ll install Bootstrap into our app as a gem. Ruby gems are like plugins, and they’re controlled by the Gemfile. We’re also going to install a gem called rails_12factor — it will give us more meaningful logging when we run into errors. In the root of your app there should be a file called Gemfile, add the following two lines to the bottom of this file:

### Gemfile

gem 'bootstrap-sass'
gem 'rails_12factor'

And run the bundle install command from the root of your app. Bundler reads the Gemfile and installs any necessary gems. We now need to create a stylesheet and import bootstrap. Make the file app/assets/stylesheets/main.scss with the following contents:

### app/assets/stylesheets/main.scss

@import "bootstrap-sprockets";
@import "bootstrap";

body {
 padding-top: 20px;
 padding-bottom: 20px;

Now we’re going to actually design our navbar using some Bootstrap styling. Create the file app/views/layouts/_navbar.html.erb and add the following lines:

### app/views/layouts/_navbar.html.erb
<nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        <a class="navbar-brand" href="#">Memespace</a>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>

Now we’re going to render that navbar into our base page layout. Go to app/views/layouts/application.html.erb and replace the <%= yield %> line with the following:

### app/views/layouts/application.html.erb

<div class="container">
 <%= render 'layouts/navbar' %>
 <%= yield %>

The <%= render 'layouts/navbar' %> line requires the underscore at the beginning of the filename in app/views/layouts/_navbar.html.erb.

Let’s style our homepage too. Change the contents of app/views/static_pages/home.html.erb to the following:

### app/views/static_pages/home.html.erb

<div class="jumbotron">
 <h1>Welcome to Memespace</h1>
   <a class="btn btn-lg btn-primary" href="#" role="button">Log In With Facebook</a>

And just like that, we already have a respectable-looking application.Welcome To Memespace

It doesn’t do anything yet, but we’ll quickly build it out into a functioning social network. First, let’s deploy it to a real production server with Heroku.


Cloud9 workspaces come with the Heroku command-line interface preinstalled. First sign up for an account with Heroku, then come back. Run heroku login in your Cloud9 terminal and enter your account credentials. Now we can set up our project to use git version control to deploy to Heroku. Run the following commands, which push our code to a new live Heroku server:

git init
heroku create
git add -A
git commit -am "Initial commit"
git push heroku master

These are the commands you’ll run every time you wish to update your app on Heroku. You should receive the following error:

remote: An error occurred while installing sqlite3 (1.3.11), and Bundler cannot
remote: continue.
remote: Make sure that `gem install sqlite3 -v '1.3.11'` succeeds before bundling.
remote: !
remote: ! Failed to install gems via Bundler.
remote: ! 
remote: ! Detected sqlite3 gem which is not supported on Heroku.
remote: !

This is because Heroku doesn’t support sqlite3, the database software we’re currently using in our app. We need to configure our app to use PostgreSQL when running in production, and sqlite3 otherwise. First, in your Gemfile, move the gem 'sqlite3' line into the group :development, :test group, and add a new group called :production containing the line gem 'pg'. Your Gemfile (with comments removed) should look like this:

### Gemfile

source ''

gem 'rails', '4.2.5'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0', group: :doc

group :development, :test do
 gem 'sqlite3'
 gem 'byebug'

group :development do
 gem 'web-console', '~> 2.0'
 gem 'spring'

group :production do
 gem 'pg'

gem 'bootstrap-sass'

Because we’ve changed our Gemfile, we need to run bundle install before we deploy again. After doing that, edit the production settings in config/database.yml to look like this:

### config/database.yml


 adapter: pg

Now, let’s try to deploy again:

git commit -am "Initial commit"
git push heroku master

Near the bottom of Heroku’s response you should see some lines that look like this:

remote: -----> Compressing...
remote: Done: 31M
remote: -----> Launching...
remote: Released v5
remote: deployed to Heroku

That last line contains your Heroku site’s URL. In my case it’s Visit that site and you should see your app.

In the (optional) next chapter we’ll get you a domain name.