Rails 5.2 with webpacker, bootstrap, stimulus starter
Create Project
1 | # Last few parameters(--skip-* part) is only my habbit not actully required |
Configure scss architecture
If you are using some front end framework you may like to integrate stylesheet into components with webpack or you just like to integrate stylesheets with webapck like me. This is a way that we integrate that into webpacker.
NOTE: This is only the convention of our team you can avoid this step and keep stylesheet in assets/.
1 | $ mkdir app/javascript/stylesheets |
After create files please write down styles as follow:
app/javascript/stylesheets/application.scss
1 | @import 'variables'; |
app/javascript/stylesheets/_variables.scss
1 | $colors: ( |
app/javascript/stylesheets/_base.scss
1 | h1 { |
On the top of app/javascript/packs/application.js
1 | import 'stylesheets/application' |
(Optional)Integrate stimulus manually
If you are not use --webpack=stimulus
for create project or install stimulus
in existed project.
1 | $ yarn add stimulus |
(Optional)Configure stimulus
app/javascript/s/packs/application.js
1 | /* eslint no-console:0 */ |
Example of testing stimulus
:
app/javascript/controllers/clipboard_controller.js
1 | import { Controller } from 'stimulus' |
Create a example controller and view
1 | $ rails g controller pages example |
Add app/views/pages/example.html.erb
1 | <h1>Hello, World</h1> |
Add pack to layout
Open app/views/layout/application.html.erb then add pack tags
to <head>
1 | <%= stylesheet_pack_tag 'application' %> |
Add route
config/routes.rb
1 | Rails.application.routes.draw do |
Then you can test
1 | $ rails s |
Navigate to localhost:3000
should see as follow
Until here you should complete Rails 5.2 using webpacker with stimulus and stylesheets.
For common practical stiuation you may want to use bootstrap v4.x.
Install bootstrap
1 | # https://getbootstrap.com/docs/4.1/getting-started/webpack/ |
Import boostrap stylesheets
In app/javascript/stylesheets/application.scss add bootstrap
1 | @import '~bootstrap/scss/bootstrap'; |
imiport bootstrap JavaScript
app/javascript/packs/application.js
1 | import 'bootstrap' |
Configure webpacker
Add configuration to config/webpack/environment.js. If you do not setup this step, the abilities related to Popper.js
such as tooltip
will not working.
1 | const { environment } = require('@rails/webpacker') |
Sometimes you may like to use jQuery in views you should expose jQuery to global
expose jQuery to global for views
1 | # https://webpack.js.org/loaders/expose-loader/ |
Add configuration to config/webpack/environment.js
1 | /** |
Other convention of our team
1 | $ mkdir -p lib/templates/active_record/model |
lib/templates/active_record/model/model.rb
1 | <% module_namespacing do -%> |
Rails 5.2 with webpacker, bootstrap, stimulus starter
https://andyyou.github.io/2018/05/02/rails-5-webpacker-stimulus-bootstrap-starter/