Bootstrap
Add Bootstrap to your Rails app using Webpacker with this app template.
Used 2445 times
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
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
Josh Teperman
I forked this as it seems to be missing popperjs/core dependency :)
yarn 'jquery', 'popper.js', '@popperjs/core', 'bootstrap'
https://railsbytes.com/public/templates/V2GsA5