LoginSignup
4
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@YusukeIwaki

Rails 5.1 + webpacker + bootstrap の環境をCloud9で作るメモ

Last updated at Posted at 2017-10-02

完全に自分用のメモです。

リポジトリを作る

image.png

rails newするまで

既存のworkspaceは一旦消す

yusukeiwaki:~ $ rm -rf ~/workspace/
yusukeiwaki:~ $ mkdir ~/workspace
yusukeiwaki:~ $ cd ~/workspace/

railsをインストール

yusukeiwaki:~/workspace $ bundle init

すると Gemfile が作られるので、

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

git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }

gem "rails" #コメントアウトを外す

のように編集して

yusukeiwaki:~/workspace $ bundle install


Fetching gem metadata from https://rubygems.org/..........
Fetching version metadata from https://rubygems.org/..
Fetching dependency metadata from https://rubygems.org/.
Resolving dependencies...
Fetching rake 12.1.0
Installing rake 12.1.0
Using concurrent-ruby 1.0.5
(省略)

rails new

オプションがいろいろある。

  • --webpack オプションはあるけど、学習のために使わずにやってみる。
  • 今回はsprocketsはskip
  • rspec使うので、testもskip
yusukeiwaki:~/workspace $ bundle exec rails new . --skip-sprockets --skip-bundle --skip-test -f

       exist  
      create  README.md
      create  Rakefile
      create  config.ru
      create  .gitignore
       force  Gemfile
         run  git init from "."
Initialized empty Git repository in /home/ubuntu/workspace/.git/
      create  app
      create  app/assets/config/manifest.js
      create  app/assets/javascripts/application.js
      create  app/assets/javascripts/cable.js
      create  app/assets/stylesheets/application.css
      create  app/channels/application_cable/channel.rb
      create  app/channels/application_cable/connection.rb
      create  app/controllers/application_controller.rb
      create  app/helpers/application_helper.rb
      create  app/jobs/application_job.rb
      create  app/mailers/application_mailer.rb
      create  app/models/application_record.rb
      create  app/views/layouts/application.html.erb
      create  app/views/layouts/mailer.html.erb
      create  app/views/layouts/mailer.text.erb
      create  app/assets/images/.keep
      create  app/assets/javascripts/channels
      create  app/assets/javascripts/channels/.keep
      create  app/controllers/concerns/.keep
      create  app/models/concerns/.keep
      create  bin
      create  bin/bundle
      create  bin/rails
      create  bin/rake
      create  bin/setup
      create  bin/update
      create  bin/yarn
      create  config
      create  config/routes.rb
      create  config/application.rb
      create  config/environment.rb
      create  config/secrets.yml
      create  config/cable.yml
      create  config/puma.rb
      create  config/spring.rb
      create  config/environments
      create  config/environments/development.rb
      create  config/environments/production.rb
      create  config/environments/test.rb
      create  config/initializers
      create  config/initializers/application_controller_renderer.rb
      create  config/initializers/assets.rb
      create  config/initializers/backtrace_silencers.rb
      create  config/initializers/cookies_serializer.rb
      create  config/initializers/cors.rb
      create  config/initializers/filter_parameter_logging.rb
      create  config/initializers/inflections.rb
      create  config/initializers/mime_types.rb
      create  config/initializers/new_framework_defaults_5_1.rb
      create  config/initializers/wrap_parameters.rb
      create  config/locales
      create  config/locales/en.yml
      create  config/boot.rb
      create  config/database.yml
      create  db
      create  db/seeds.rb
      create  lib
      create  lib/tasks
      create  lib/tasks/.keep
      create  lib/assets
      create  lib/assets/.keep
      create  log
      create  log/.keep
      create  public
      create  public/404.html
      create  public/422.html
      create  public/500.html
      create  public/apple-touch-icon-precomposed.png
      create  public/apple-touch-icon.png
      create  public/favicon.ico
      create  public/robots.txt
      create  tmp
      create  tmp/.keep
      create  tmp/cache
      create  tmp/cache/assets
      create  vendor
      create  vendor/.keep
      create  package.json
      remove  config/initializers/assets.rb
      remove  config/initializers/cors.rb
      remove  config/initializers/new_framework_defaults_5_1.rb

なんとなくバージョン管理登録

yusukeiwaki:~/workspace (master) $ git add -A
yusukeiwaki:~/workspace (master) $ git commit -a -m "initial commit"

Webpackerを入れる

webpacker Gemを追加

webpackerを追加
diff --git a/Gemfile b/Gemfile
index 5026c36..2148941 100644
--- a/Gemfile
+++ b/Gemfile
@@ -19,6 +19,8 @@ gem 'jbuilder', '~> 2.5'
 # Use ActiveModel has_secure_password
 # gem 'bcrypt', '~> 3.1.7'
 
+gem 'webpacker'
+
 # Use Capistrano for deployment
 # gem 'capistrano-rails', group: :development

で、あらためて

yusukeiwaki:~/workspace (master) $ bundle install

（ログ出力は省略）

yarnのインストール

https://yarnpkg.com/en/docs/install#linux-tab に従う

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update && sudo apt-get install yarn

webpackerの初期設定

yusukeiwaki:~/workspace (master) $ bundle exec rails webpacker:install

      create  config/webpacker.yml
Copying webpack core config and loaders
      create  config/webpack
      create  config/webpack/development.js
      create  config/webpack/environment.js
      create  config/webpack/production.js
      create  config/webpack/test.js
Copying .postcssrc.yml to app root directory
      create  .postcssrc.yml
Copying .babelrc to app root directory
      create  .babelrc
Creating javascript app source directory
      create  app/javascript
      create  app/javascript/packs/application.js
Copying binstubs
       exist  bin
      create  bin/webpack-dev-server
      create  bin/webpack
      append  .gitignore
Installing all JavaScript dependencies
         run  yarn add @rails/webpacker from "."
yarn add v1.1.0
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...

（以下省略...）

javascript_pack_tag をlayout/application に入れる

javascript_pack_tagに置換
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 53f95d2..e0022d9 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -4,8 +4,7 @@
     <title>Workspace</title>
     <%= csrf_meta_tags %>
 
-    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
-    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
+    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
   </head>
 
   <body>

今回はassetsパイプラインを使わないぞ！という割り切りで、↑のようにする。

ちなみに蛇足だが、ここで app/javascript/packs/application.scss みたいなファイル名でCSSを作ってしまうと、 app/javascript/packs/application.js がちゃんとビルドされなくて、ものすごくハマる！

おためしで起動

yusukeiwaki:~/workspace (master) $ bin/webpack

Hash: 77d3b57fb7806bb9009c
Version: webpack 3.6.0
Time: 566ms
                              Asset      Size  Chunks             Chunk Names
application-8f8bdd9f4ff51391ec46.js   4.47 kB       0  [emitted]  application
                      manifest.json  68 bytes          [emitted]  
   [0] ./app/javascript/packs/application.js 515 bytes {0} [built]

でビルドして、

ぽちっと。

image.png

うーん、これじゃあ動いてるかわからんｗｗ :sweat:

てきとうにページを作る

yusukeiwaki:~/workspace (master) $ bundle exec rails g scaffold Todo title:string description:text
      invoke  active_record
      create    db/migrate/20171002024501_create_todos.rb
      create    app/models/todo.rb
      invoke  resource_route
       route    resources :todos
      invoke  scaffold_controller
      create    app/controllers/todos_controller.rb
      invoke    erb
      create      app/views/todos
      create      app/views/todos/index.html.erb
      create      app/views/todos/edit.html.erb
      create      app/views/todos/show.html.erb
      create      app/views/todos/new.html.erb
      create      app/views/todos/_form.html.erb
      invoke    helper
      create      app/helpers/todos_helper.rb
      invoke    jbuilder
      create      app/views/todos/index.json.jbuilder
      create      app/views/todos/show.json.jbuilder
      create      app/views/todos/_todo.json.jbuilder
      invoke  assets
      invoke    js
      create      app/assets/javascripts/todos.js
      invoke    css
      create      app/assets/stylesheets/todos.css
      invoke  css
      create    app/assets/stylesheets/scaffold.css
yusukeiwaki:~/workspace (master) $ bundle exec rake db:migrate
== 20171002024501 CreateTodos: migrating ======================================
-- create_table(:todos)
   -> 0.0023s
== 20171002024501 CreateTodos: migrated (0.2001s) =============================

image.png

Hello World from Webpacker が出ていれば　おｋ！

なんとなくバージョン管理

yusukeiwaki:~/workspace (master) $ git add -A
yusukeiwaki:~/workspace (master) $ git commit -a -m "webpacker"

bootstrapの導入

ようやく・・・！

package.jsonへの追加

yusukeiwaki:~/workspace (master) $ yarn add bootstrap@4.0.0-alpha.6 jquery popper.js                                                                                                    
yarn add v1.1.0
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.1.2: The platform "linux" is incompatible with this module.
info "fsevents@1.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "postcss-cssnext@3.0.2" has unmet peer dependency "caniuse-lite@^1.0.30000697".
warning "webpack-dev-server@2.9.1" has unmet peer dependency "webpack@^2.2.0 || ^3.0.0".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 4 new dependencies.
├─ bootstrap@4.0.0-alpha.6
├─ jquery@3.2.1
├─ popper.js@1.12.5
└─ tether@1.4.0
Done in 6.00s.

bootstrapを組み込む！

environment.jsの編集
diff --git a/config/webpack/environment.js b/config/webpack/environment.js
index d16d9af..86bf1a7 100644
--- a/config/webpack/environment.js
+++ b/config/webpack/environment.js
@@ -1,3 +1,10 @@
 const { environment } = require('@rails/webpacker')
 
+const webpack = require('webpack')
+environment.plugins.set('Provide', new webpack.ProvidePlugin({
+  $: 'jquery',
+  jQuery: 'jquery',
+  Popper: ['popper.js', 'default']
+}))
+
 module.exports = environment
app/javascript/packs/application.js
import 'bootstrap/dist/js/bootstrap';

console.log('Hello World from Webpacker')
app/javascript/packs/bootstrap.scss
@import '~bootstrap/dist/css/bootstrap';
stylesheet_pack_tagを追記
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index e0022d9..b613fc9 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -4,6 +4,7 @@
     <title>Workspace</title>
     <%= csrf_meta_tags %>
 
+    <%= stylesheet_pack_tag 'bootstrap', media: 'all', 'data-turbolinks-track': 'reload' %>
     <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
   </head>

ここまでやると、

ちょっとオシャレ〜になる。いや、全然オシャレじゃないけど。

ためしに、

<%= link_to 'New Todo', new_todo_path, class: 'btn btn-primary' %>

みたいにしてみると

たしかにBootStrapが効いてることがわかります。

4
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
4
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?