bazzel/README.md

Last active May 26, 2021 04:20

Star () You must be signed in to star a gist
Fork () You must be signed in to fork a gist

Learn more about clone URLs
Clone this repository at <script src="https://gist.github.com/bazzel/2c64e2e5804077f9a61938a93ed54823.js"></script>
Save bazzel/2c64e2e5804077f9a61938a93ed54823 to your computer and use it in GitHub Desktop.

Download ZIP

Rails 6 and Bootstrap 4

Raw

README.md

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 expose-loader

// config/webpack/environment.js

// Make $ available on the window object
// for SJR views and jQuery plugins
// that may expect `$` to be globally available.
environment.loaders.append('expose', {
  test: require.resolve('jquery'),
  use: [
    {
      loader: 'expose-loader',
      options: 'jQuery',
    },
    {
      loader: 'expose-loader',
      options: '$',
    },
  ],
});

// app/javascript/packs/application.js

import $ from 'jquery';
import 'bootstrap/dist/js/bootstrap';

$(document).on('turbolinks:load', function() {
  $('body').tooltip({
    selector: '[data-toggle="tooltip"]',
    container: 'body',
  });

  $('body').popover({
    selector: '[data-toggle="popover"]',
    container: 'body',
    html: true,
    trigger: 'hover',
  });
});

// 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' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
...
<body>
  <div class='container'>
    <%= yield %>
  </div>
</body>

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

I recently found this article that seems to do the same, but a bit more explanation. Worth reading!

Author

bazzel commented Nov 9, 2019 •

edited

Loading

@a-ta-ta You should put this line in app/javascript/packs/styles.scss, not in app/assets/stylesheets/application.scss.

renatopanda commented Dec 26, 2019

Not sure if it's the best solution but I was getting Uncaught ReferenceError: $ is not defined when trying to use $(...) in a view and ended up solving it by setting $ as global (together with jQuery right after importing:

# app/javascript/packs/application.js
import $ from 'jquery';
global.$ = $;
global.jQuery = $;
...

bb commented Jan 5, 2020 •

edited

Loading

@renatopanda: you may need to configure expose-loader for exposing globals automatically.

Author

bazzel commented Jan 6, 2020

@renatopanda: I realized I forgot the snippet to configure the expose-loader code needed to make jQuery globally available. I've updated the gist.

la-ruby commented Feb 1, 2020

I can script it with bash 👍

belgoros commented Feb 21, 2020 •

edited

Loading

Putting a stylesheet file in app/javascript/... folder looks a little bit weird for me... even if we consider that webpack is a JS library...

dodafish commented Mar 31, 2020

I think app/javascript/packs/application.js is missing the line import './styles';

I had to add this. Otherwise, there was no CSS added to the page.

Author

bazzel commented Mar 31, 2020

@FrischerHering For me it was sufficient to create app/javascript/packs/styles.scss and use it in the layout file by calling stylesheet_pack_tag 'styles'.

dennym commented Apr 1, 2020

Just out of curiosity... from where would you serve custom css with this setup? Also from app/javascript/packs?

Author

bazzel commented Apr 1, 2020 •

edited

Loading

(updated comment)

@dennym I have several SCSS-file in the packs folder (can be stored in subfolders of course). Given you have 1 'main' CSS file styles.scss you can import other files in here as you would normally do:

// app/javascript/packs/styles.scss
@import 'base'
@import 'modules'

// app/javascript/packs/_base.scss
body {
  ...
}

// app/javascript/packs/_modules.scss
@import 'modules/navbar'
@import 'modules/search'
...

Then in my layout file I can use stylesheet_pack_tag 'styles'.

dennym commented Apr 1, 2020

@bazzel Yeah thats what I thought. It just feels a bit off context when still having the app/assets/stylesheets of rails. Basically its decision between what is served with sprockets (which is still serving everything in app/assets I guess) and webpack. Where would anyone stop... images / fonts?

viktorianer commented Apr 26, 2020

What about Popper?

I found following guide really helpful and it also takes into account to import Popper for Bootstrap 4.
https://www.timdisab.com/installing-bootstrap-4-on-rails-6/

PS: thx for nice and short installation guide @bazzel

radubogdan commented Aug 25, 2020 •

edited

Loading

Thanks for sharing. I have few considerations @bazzel

looks like bootstrap is including jquery, I guess it will work only by installing it with yarn.
if expose must be used, they changed the API so new code should be something like:

environment.loaders.append('expose', {
  test: require.resolve('jquery'),
  loader: 'expose-loader',
  options: {
    exposes: ['$', 'jQuery'],
  },
});

Regards

bazzel/README.md

bazzel commented Nov 9, 2019 • edited Loading

renatopanda commented Dec 26, 2019

bb commented Jan 5, 2020 • edited Loading

bazzel commented Jan 6, 2020

la-ruby commented Feb 1, 2020

belgoros commented Feb 21, 2020 • edited Loading

dodafish commented Mar 31, 2020

bazzel commented Mar 31, 2020

dennym commented Apr 1, 2020

bazzel commented Apr 1, 2020 • edited Loading

dennym commented Apr 1, 2020

viktorianer commented Apr 26, 2020

radubogdan commented Aug 25, 2020 • edited Loading

bazzel commented Nov 9, 2019 •

edited

Loading

bb commented Jan 5, 2020 •

edited

Loading

belgoros commented Feb 21, 2020 •

edited

Loading

bazzel commented Apr 1, 2020 •

edited

Loading

radubogdan commented Aug 25, 2020 •

edited

Loading