Rails 6 and Bootstrap 4

This blogpost shows how to setup Rails 6 with Bootstrap 4.

This snippet shows a somehow different and less customized approach.

$ rails new rails6-bootstrap4
$ bundle --binstubs
$ yarn add bootstrap jquery popper.js

# config/webpack/environment.js

...
const webpack = require('webpack');
environment.plugins.append(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default'],
  }),
);

...

# app/javascript/packs/application.js

import 'bootstrap/dist/js/bootstrap';

# app/javascript/packs/styles.scss

@import '~bootstrap/scss/bootstrap';

# config/webpacker.yml

...
extract_css: true

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

<%= stylesheet_pack_tag 'styles', media: 'all', 'data-turbolinks-track': 'reload' %>
...
<body>
  <%= yield %>
  <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>  
</body>

$ bin/webpack-dev-server
$ bin/rails s

malachaifrazier/README.md