Beesbot

Rails 5.2 Loaded

Aug 01, 2018

It's become a tradition for me to document my recommendations on how to load up a rails project and get started. Here is my guide for the latest rails version and if you want to just look at the end result, here is the Rails Loaded Five repo on github. Let's get started...

Create your app

Hopefully your using rbenv to manage ruby versions. Let us install ruby and rails.

rbenv install 2.3.3
gem install rails

Create your project

rails new rails_loaded  --skip-bundle
cd rails_loaded

No coffee & yes bourbon

In your Gemfile remove coffee script and add bourbon, if you feel the way I do...

#gem 'coffee-rails', '~> 4.2'
gem 'bourbon'
gem 'bitters'

Build your bundle

bundle install --path=vendor
bundle exec rails server

...and browse to localhost:3000 to see your welcome message.

House cleaning

Lets not generate assets or helpers by default. Add the following to config/application.rb

class Application < Rails::Application

    # don't generate assets or helpers (add this)
    config.generators do |generate|
        generate.helper false
        generate.assets false
    end

end

Setup bourbon. You'll put these to use in a few minutes here.

bundle exec bourbon install --path app/assets/stylesheets/

And install bitters

cd app/assets/stylesheets
bundle exec bitters install
cd ../../../
mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

Starter styles

Use Normalize to css reset some bad browser behavior. Create a file app/assets/stylesheets/normalize.css and copy the normalize code into it.

Then replace the contents of app/assets/stylesheets/application.scss with the following

@import "normalize";
@import "bourbon/bourbon";
@import "base/base";

.container {
   max-width: 1000px;
   margin-left: auto;
   margin-right: auto;
 }
 header {
   padding:2em 0;
   background-color: #eee;
 }
 nav {
        float:right;
  li {
            display: inline;
            margin-right: 1em;
        }
    }
 main {
   padding: 2em 0;
 }
 footer {
   padding:2em 0;
   background-color: #eee;
         font-size: 10px;
 }

Update your app/views/layout/application.html.erb

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta http-equiv="x-ua-compatible" content="ie=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

            <title>Rails Loaded</title>
            <%= csrf_meta_tags %>
            <%= csp_meta_tag %>
            <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
        </head>

        <body>
            <header>
                <div class="container">
          <nav>
              <ul>
                <li><%= link_to 'home', root_path %></li>
              </ul>
          </nav>
                    Rails Loaded
                </div>
            </header>
            <main>
                <%= yield %>
            </main>
            <footer>
                <div class="container">
                    You Inc. 2018
                </div>
            </footer>

            <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
        </body>
    </html>

Notable changes here: 1. the mobile viewport settings, 2. the javascript moved to the bottom, 3. the standard header, main and footer tags.

Stock pages

Every website needs a welcome page and a style page

bundle exec rails g controller welcome index style

Replace the contents of config/routes.rb with this

get 'welcome/index'
get '/style', to: 'welcome#style', as: 'welcome_style'
root 'welcome#index'

Style page

Create sample html; or if you are me borrow it from bitters example page and put it in your app/views/welcome/style.html.erb. This page will come in handy as you add sass and want to be sure it all works well together.

Welcome page

For the welcome page you'll just need to add a container to center things. Something like this

<section class="container">
        <h1>Welcome#index</h1>
        <p>Find me in app/views/welcome/index.html.erb</p>
</section>

Stand it up

Run the server

bundle exec rails server

Then browse to see things in action

Congrats, Rails is loaded!