Rails5.1.0 + Devise4.3.0 + Bootstrap3 with Yarn

% pwd
WORK_DIR

% mkdir sample_project
% cd sample_project; pwd
/WORK_DIR/sample_project

% echo 2.4.1 > .ruby-version
% echo sample > .rbenv-gemsets
% head .r*
==> .rbenv-gemsets <==
sample

==> .ruby-version <==
2.4.1

% rbenv versions
  system
* 2.4.1 (set by /WORK_DIR/sample_project/.ruby-version)

% rbenv gemset active
sample global

% gem list

*** LOCAL GEMS ***

bigdecimal (default: 1.3.0)
did_you_mean (1.1.0)
io-console (default: 0.4.6)
json (default: 2.0.2)
minitest (5.10.1)
net-telnet (0.1.1)
openssl (default: 2.0.3)
power_assert (0.4.1)
psych (default: 2.2.2)
rake (12.0.0)
rdoc (default: 5.0.0)
test-unit (3.2.3)
xmlrpc (0.2.1)

% gem install bundler
Fetching: bundler-1.15.0.gem (100%)
Successfully installed bundler-1.15.0
Parsing documentation for bundler-1.15.0
Installing ri documentation for bundler-1.15.0
Done installing documentation for bundler after 5 seconds
1 gem installed

% gem list | grep bundler
bundler (1.15.0)

% bundle init
Writing new Gemfile to /WORK_DIR/sample_project/Gemfile

% vim Gemfile
# frozen_string_literal: true
source "https://rubygems.org"

gem "rails", "5.1.0"

% bundle install
% rails -v
Rails 5.1.0

% rails new . -d mysql
       exist
      create  README.md
      create  Rakefile
      create  config.ru
      create  .gitignore
    conflict  Gemfile
Overwrite /WORK_DIR/sample_project/Gemfile? (enter "h" for help) [Ynaqdh] ★Enter入力
…
Bundle complete! 16 Gemfile dependencies, 70 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
         run  bundle exec spring binstub --all
* bin/rake: spring inserted
* bin/rails: spring inserted

% vim Gemfile
※末尾に以下を追加
################################################################################
# Added
################################################################################
# for debug.
gem 'pry'
gem 'pry-doc'
gem 'pry-byebug'
gem 'pry-stack_explorer'
gem 'pry-rails'

# for devise.
gem 'devise'
gem 'devise-bootstrap-views'
gem 'devise-i18n'
gem 'devise-i18n-views'

# yarnを使わない場合は以下を追加
#gem 'jquery-rails'
#gem 'bootstrap-sass'
#gem "font-awesome-rails"

% bundle install
% bundle list
※付録参照

% yarn add jquery bootstrap-sass font-awesome
yarn add v0.24.5
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...
success Saved lockfile.
success Saved 3 new dependencies.
├─ bootstrap-sass@3.3.7
├─ font-awesome@4.7.0
└─ jquery@3.2.1
✨  Done in 0.75s.

% yarn list
※付録参照

% head -100 package.json yarn.lock
※付録参照

% vim config/database.yml
username/passwordを適切に設定

% mysql --version
mysql  Ver 14.14 Distrib 5.6.16, for osx10.9 (x86_64) using  EditLine wrapper

% mysql.server start
Starting MySQL
 SUCCESS!

% rails db:create
Created database 'sample_project_development'
Created database 'sample_project_test'

% rails db
mysql> show databases;
以下のDBが作成されていること
sample_project_development
sample_project_test

mysql> quit
Bye
% 

% rails g devise:install
Running via Spring preloader in process 34661
      create  config/initializers/devise.rb
      create  config/locales/devise.en.yml
===============================================================================

Some setup you must do manually if you haven't yet:

  1. Ensure you have defined default url options in your environments files. Here
     is an example of default_url_options appropriate for a development environment
     in config/environments/development.rb:

       config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }

     In production, :host should be set to the actual host of your application.

  2. Ensure you have defined root_url to *something* in your config/routes.rb.
     For example:

       root to: "home#index"

  3. Ensure you have flash messages in app/views/layouts/application.html.erb.
     For example:

       <p class="notice"><%= notice %></p>
       <p class="alert"><%= alert %></p>

  4. You can copy Devise views (for customization) to your app by running:

       rails g devise:views

===============================================================================

% vim config/environments/development.rb
 29   # Don't care if the mailer can't send.
 30   config.action_mailer.raise_delivery_errors = true ★変更：false->true
 31
 32   config.action_mailer.perform_caching = false
 33
 34   config.action_mailer.default_url_options = { host: 'localhost', port: 3000 } ★追加
 35
 36   config.action_mailer.smtp_settings = { ★追加
 37     :address => 'smtp.gmail.com',
 38     :port => 587,
 39     :domain => 'example.com',
 40     :user_name => 'xxxx@gmail.com',
 41     :password => 'yyyy',
 42     :authentication => :plain,
 43     :enable_starttls_auto => true
 44   }

% rails g devise user
Running via Spring preloader in process 53666
      invoke  active_record
      create    db/migrate/20170522085148_devise_create_users.rb
      create    app/models/user.rb
      invoke    test_unit
      create      test/models/user_test.rb
      create      test/fixtures/users.yml
      insert    app/models/user.rb
       route  devise_for :users

% rails db:migrate
== 20170524033356 DeviseCreateUsers: migrating ================================
-- create_table(:users)
   -> 0.0096s
-- add_index(:users, :email, {:unique=>true})
   -> 0.0290s
-- add_index(:users, :reset_password_token, {:unique=>true})
   -> 0.0182s
== 20170524033356 DeviseCreateUsers: migrated (0.0571s) =======================

% rails g devise:views:bootstrap_templates
Running via Spring preloader in process 61262
      create  app/views/devise
      create  app/views/devise/confirmations/new.html.erb
      create  app/views/devise/mailer/confirmation_instructions.html.erb
      create  app/views/devise/mailer/reset_password_instructions.html.erb
      create  app/views/devise/mailer/unlock_instructions.html.erb
      create  app/views/devise/passwords/edit.html.erb
      create  app/views/devise/passwords/new.html.erb
      create  app/views/devise/registrations/edit.html.erb
      create  app/views/devise/registrations/new.html.erb
      create  app/views/devise/sessions/new.html.erb
      create  app/views/devise/shared/_links.html.erb
      create  app/views/devise/unlocks/new.html.erb

% rails s

http://localhost:3000でRailsデフォルトのwelcomeページ表示
http://localhost:3000/users/sign_up にアクセスしユーザ作成(作成後自動的にwelcomページに遷移)

% vim config/routes.rb
Rails.application.routes.draw do
  devise_for :users
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
  root to: 'home#index'
end

% rails routes
                  Prefix Verb   URI Pattern                    Controller#Action
        new_user_session GET    /users/sign_in(.:format)       devise/sessions#new
            user_session POST   /users/sign_in(.:format)       devise/sessions#create
    destroy_user_session DELETE /users/sign_out(.:format)      devise/sessions#destroy
       new_user_password GET    /users/password/new(.:format)  devise/passwords#new
      edit_user_password GET    /users/password/edit(.:format) devise/passwords#edit
           user_password PATCH  /users/password(.:format)      devise/passwords#update
                         PUT    /users/password(.:format)      devise/passwords#update
                         POST   /users/password(.:format)      devise/passwords#create
cancel_user_registration GET    /users/cancel(.:format)        devise/registrations#cancel
   new_user_registration GET    /users/sign_up(.:format)       devise/registrations#new
  edit_user_registration GET    /users/edit(.:format)          devise/registrations#edit
       user_registration PATCH  /users(.:format)               devise/registrations#update
                         PUT    /users(.:format)               devise/registrations#update
                         DELETE /users(.:format)               devise/registrations#destroy
                         POST   /users(.:format)               devise/registrations#create
                    root GET    /                              home#index

% rails g controller home
Running via Spring preloader in process 66110
      create  app/controllers/home_controller.rb
      invoke  erb
      create    app/views/home
      invoke  test_unit
      create    test/controllers/home_controller_test.rb
      invoke  helper
      create    app/helpers/home_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/home.coffee
      invoke    scss
      create      app/assets/stylesheets/home.scss

% vim app/controllers/home_controller.rb
class HomeController < ApplicationController
  def index
  end
end

% vim app/views/home/index.html.erb
<h1>HOME</h1>
Welcome sample project!

% mv app/assets/stylesheets/application.{css,scss}
% vim app/assets/stylesheets/application.scss
※SASSの形式で登録（bootstrap-sass/font-awesomeはパスを指定する必要あり）
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */
@import 'bootstrap-sass/assets/stylesheets/bootstrap';
@import 'bootstrap-sass/assets/stylesheets/bootstrap/custom';
@import "font-awesome/scss/font-awesome";
@import "devise_bootstrap_views";

 % vim app/assets/javascripts/application.js 
 ※jquery/bootstrapを追加
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require rails-ujs
//= require turbolinks
//= require jquery/dist/jquery ※jqueryのみでもロードできるがrailsの仕様を要確認
//= require bootstrap-sass/assets/javascripts/bootstrap ※こちらはパスを指定しないとロードできない
//= require_tree .

% grep '^$fa-font-path' node_modules/font-awesome/scss/_variables.scss
$fa-font-path:        "../fonts" !default;

% vim node_modules/font-awesome/scss/_variables.scss

% grep '^$fa-font-path' node_modules/font-awesome/scss/_variables.scss
$fa-font-path:        "font-awesome/fonts" !default;

node_modules/font-awesome/fonts/fontawesome-webfont.woff2 -> http://localhost:3000/fonts/fontawesome-webfont.woff2

node_modules/font-awesome/scss/font-awesome.scss -> http://localhost:3000/assets/application.css (アセットパイプラインにより統合されたcss)

node_modules/font-awesome/fonts/fontawesome-webfont.woff2 -> http://localhost:3000/assets/font-awesome/fonts/fontawesome-webfont.woff2

% vim node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_custom.scss
以下を追加
body {
  padding-top: 70px;
}

% vim app/views/layouts/application.html.erb
bodyタグ内部を以下に置き換え
  <body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <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>
          </button>
          <a class="navbar-brand" href="#"><%= Rails.application.class.to_s.split('::').first %></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
          <ul class="nav navbar-nav navbar-right">
            <% if user_signed_in? %>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                <%= current_user.email %> <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li><a href="#">設定メニュー1</a></li>
                <li><a href="#">設定メニュー2</a></li>
                <li role="separator" class="divider"></li>
                <li>
                  <a data-method="delete" href="/users/sign_out" rel="nofollow" data-toggle="tooltip" data-placement="bottom">
                    <i class="fa fa-sign-out" aria-hidden="true"></i>ログアウト
                  </a>
                </li>
              </ul>
            </li>
            <% end %>
          </ul>
        </div><!--/.navbar-collapse -->
              </div>
    </nav>
    <!-- Navigation bar -->

    <div class="container">
    <!-- Notice -->
    <% if notice.present? %>
      <div class="alert alert-dismissable alert-success">
        <button type="button" class="close" data-dismiss="alert">×</button                                                                                              <p><%= notice %></p>
      </div>
    <% end %>
    <% if alert.present? %>
      <div class="alert alert-dismissable alert-danger">
        <button type="button" class="close" data-dismiss="alert">×</button                                                                                              <p><%= alert %></p>
      </div>
    <% end %>

    <%= yield %>
    </div>
  </body>

% vim app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception
  before_action :authenticate_user! ★追加
end

% rails g devise:views:locale ja
Running via Spring preloader in process 58302
      create  config/locales/devise.views.ja.yml

% vim config/application.rb
require_relative 'boot'

require 'rails/all'

# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(*Rails.groups)

module SampleProject
  class Application < Rails::Application
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 5.1

    # Settings in config/environments/* take precedence over those specified here.
    # Application configuration should go into files in config/initializers
    # -- all .rb files in that directory are automatically loaded.
    config.i18n.default_locale = :ja ★追加
  end
end

% bundle list
Gems included by the bundle:
  * actioncable (5.1.0)
  * actionmailer (5.1.0)
  * actionpack (5.1.0)
  * actionview (5.1.0)
  * activejob (5.1.0)
  * activemodel (5.1.0)
  * activerecord (5.1.0)
  * activesupport (5.1.0)
  * addressable (2.5.1)
  * arel (8.0.0)
  * bcrypt (3.1.11)
  * bindex (0.5.0)
  * binding_of_caller (0.7.2)
  * builder (3.2.3)
  * bundler (1.15.0)
  * byebug (9.0.6)
  * capybara (2.13.0)
  * childprocess (0.7.0)
  * coderay (1.1.1)
  * coffee-rails (4.2.1)
  * coffee-script (2.4.1)
  * coffee-script-source (1.12.2)
  * concurrent-ruby (1.0.5)
  * debug_inspector (0.0.3)
  * devise (4.3.0)
  * devise-bootstrap-views (0.0.11)
  * devise-i18n (1.1.2)
  * devise-i18n-views (0.3.7)
  * erubi (1.6.0)
  * execjs (2.7.0)
  * ffi (1.9.18)
  * globalid (0.4.0)
  * i18n (0.8.1)
  * jbuilder (2.6.4)
  * listen (3.1.5)
  * loofah (2.0.3)
  * mail (2.6.5)
  * method_source (0.8.2)
  * mime-types (3.1)
  * mime-types-data (3.2016.0521)
  * mini_portile2 (2.1.0)
  * minitest (5.10.2)
  * multi_json (1.12.1)
  * mysql2 (0.4.6)
  * nio4r (2.0.0)
  * nokogiri (1.7.2)
  * orm_adapter (0.5.0)
  * pry (0.10.4)
  * pry-byebug (3.4.2)
  * pry-doc (0.10.0)
  * pry-rails (0.3.6)
  * pry-stack_explorer (0.4.9.2)
  * public_suffix (2.0.5)
  * puma (3.8.2)
  * rack (2.0.3)
  * rack-test (0.6.3)
  * rails (5.1.0)
  * rails-dom-testing (2.0.3)
  * rails-html-sanitizer (1.0.3)
  * railties (5.1.0)
  * rake (12.0.0)
  * rb-fsevent (0.9.8)
  * rb-inotify (0.9.8)
  * responders (2.4.0)
  * ruby_dep (1.5.0)
  * rubyzip (1.2.1)
  * sass (3.4.24)
  * sass-rails (5.0.6)
  * selenium-webdriver (3.4.0)
  * slop (3.6.0)
  * spring (2.0.2)
  * spring-watcher-listen (2.0.1)
  * sprockets (3.7.1)
  * sprockets-rails (3.2.0)
  * thor (0.19.4)
  * thread_safe (0.3.6)
  * tilt (2.0.7)
  * turbolinks (5.0.1)
  * turbolinks-source (5.0.3)
  * tzinfo (1.2.3)
  * uglifier (3.2.0)
  * warden (1.2.7)
  * web-console (3.5.1)
  * websocket (1.2.4)
  * websocket-driver (0.6.5)
  * websocket-extensions (0.1.2)
  * xpath (2.0.0)
  * yard (0.9.9)

% yarn list
yarn list v0.24.5
├─ bootstrap-sass@3.3.7
├─ font-awesome@4.7.0
└─ jquery@3.2.1
✨  Done in 0.13s.

% head -100 package.json yarn.lock
==> package.json <==
{
  "name": "sample_project",
  "private": true,
  "dependencies": {
    "bootstrap-sass": "^3.3.7",
    "font-awesome": "^4.7.0",
    "jquery": "^3.2.1"
  }
}

==> yarn.lock <==
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1


bootstrap-sass@^3.3.7:
  version "3.3.7"
  resolved "https://registry.yarnpkg.com/bootstrap-sass/-/bootstrap-sass-3.3.7.tgz#6596c7ab40f6637393323ab0bc80d064fc630498"

font-awesome@^4.7.0:
  version "4.7.0"
  resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133"

jquery@^3.2.1:
  version "3.2.1"
  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.2.1.tgz#5c4d9de652af6cd0a770154a631bba12b015c787"