Bootstrap

Add Bootstrap to your Rails app using Webpacker with this app template.
Icons/chart bar
Used 1158 times
Created by
C Chris Oliver

Usage

Run this command in your Rails app directory in the terminal:

rails app:template LOCATION="https://railsbytes.com/script/x9Qsqx"
Template Source

Review the code before running this template on your machine.

def yarn(*packages)
  run("yarn add #{packages.join(" ")}")
end

yarn 'jquery', 'popper.js', 'bootstrap'

inject_into_file 'config/webpack/environment.js', after: "const { environment } = require('@rails/webpacker')\n" do <<~EOF
  const webpack = require('webpack')
  environment.plugins.append('Provide', new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
    Popper: ['popper.js', 'default']
  }))
  EOF
end

inject_into_file 'app/views/layouts/application.html.erb', before: '</head>' do <<~EOF
  <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  EOF
end
  
inject_into_file 'app/javascript/packs/application.js' do <<~EOF
import 'bootstrap/dist/js/bootstrap'
import 'bootstrap/dist/css/bootstrap'
  EOF
end
Comments
Viktor Schmidt
Hey Chris, thank you for this nice and short template.

Could you please add versions to you Yarn packages, add Bootstrap variables and, if possible, to add Bootstrap Icons?! 
See:
https://getbootstrap.com/docs/4.5/getting-started/theming/#importing
https://icons.getbootstrap.com/#install
https://rubygems.org/gems/bootstrap-icons-helper

Would be great! Thank you!

Cheers,
Viktor
© 2021 GoRails, LLC