How to Use jQuery and Semantic UI with Rails 5.1 Asset Pipeline

Environment

macOS Mojave 10.14.1
Rails 5.1.6
Ruby 2.5.0

Install jQuery and Semantic UI using yarn add command

First, install jQuery:

$ yarn add jquery

Next, install Semantic UI:

$ yarn add semantic-ui

The installed Node modules are located in the node_modules directory:

node_modules/
├─────semantic-ui
      ├─────dist
            ├──semantic.css
            ├──semantic.js
├─────jquery
      ├────dist
           ├──jquery.js

Configure jQuery and Semantic UI

app/assets/javascript/application.js

//= require jquery/dist/jquery.js
//= require rails-ujs
//= require turbolinks
//= require semantic-ui/dist/semantic.js
//= require_tree .

CSS configuration:

app/assets/stylesheets/application.css
 *= require semantic-ui/dist/semantic.css
 *= require_tree .
 *= require_self

That’s it!