I am working on a sample POC in Rails 6 and came across various articles that shows how can we use bootstrap with Webpacker and host all the js, css and images under /app/javascript folder (Whether we are using app like JS or not).

I am not using this Rails 6 PoC for any JS frameworks (like React) for now. This is my simple web application and I would like to have my javascripts remain at /app/javascript folder and my css and images to stay at /app/assets folder. To summarise, I would like to use both Webpacker (for JS compilation) and Asset Pipeline for CSS and images compilation.

I tried the first approach where Webpacker is handling all the JS, CSS and Images but somehow I dislike the idea and the folder naming convention where everything lies under /app/javascript. For e.g. all css files are under /app/javascript/stylesheets and images are under /app/javascript/images and most importantly I am not building app like javascript. Then I sat down and thought for a while and came up with below points:

1. If it’s my Web app, why can’t I handover the control (of CSS and images) to Asset Pipeline and let it handle everything like it was doing in earlier versions of Rails.
2. I am trying to mix the concepts of both Webpacker and Asset Pipeline to achieve what I want — which is incorrect.
3. How can I Integrate newly integrated Trix editor and add Bootstrap features like Modal/AutoComplete etc. with both?
4. Let’s say I have 3 types of Users in my PoC (i) User, (ii) Client and (iii) Admin. User and Admin will use the Web App (everything controlled by Asset Pipeline and Webpacker both) and for Client — there will be a React App (controlled only by Webpacker) — Is it possible?

Well enough theory for now. Let’s see some code in action:

1st Approach: Using Asset Pipeline for bootstrap + Using Webpacker for jQuery & Trix Editor + Using Bootstrap – Modal

---

# Gemfile
gem 'webpacker', '~> 4.0'
gem 'bootstrap', '~> 4.3.1'
gem 'jquery-rails'
gem 'trix-rails', require: 'trix'

# /app/assets/stylesheets/application.scss
@import 'bootstrap';
@import 'trix';
@import './_custom.scss' // this is my customise css

# from console
# $ yarn add bootstrap jquery popper.js trix
# then check package.json to verifiy the same

# /app/javascript/application.js
require("bootstrap/dist/js/bootstrap")
require("trix")
require("jquery")

# config/webpacker.yml
# Uncomment resolved_paths: ['app/assets']

# under config/webpack/environment.js
# replace everything with the content below:
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')

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

# Inside app/views/layouts/application.haml (or ERB whichever)
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'

---

With above settings in place you can use bootstrap CSS, bootstrap features like Modal, autocomplete, jQuery (defined in /app/javascript)

The only disadvantage I can see in this approach is – repetitive code. I am using bootstrap, trix and jQuery for Asset Pipeline (via Gemfile) as well as for Webpacker (via yarn)

I am all ears to know, if there a way to deal with this situation

Now what if, we have to add react to it? I will soon publish a second part of this article covering this case.

Happy Coding!