Tips on Rails 6 with Webpacker and Semantic UI

Image by Andrew Martin from Pixabay

In our recent development of internal system for our clients, we are heavily using Fomantic UI, a community fork of Semantic-UI, to build our backend administration. In this article, I am going to show you the tips to integrate this UI framework to Rails 6 and hope you don’t have to go through the trouble I had.

If you want to know more about Semantic UI, you can refer to my previous introduction.

Plugins and Frameworks for your next Ruby on Rails project

Software Versions

• Ruby 2.7.3
• Rails 6.1

Let’s Start

Assuming you have your new or existing Rails application ready:

1. yarn add fomantic-ui
2. yarn --cwd node_modules/fomantic-ui run install. I have installed my semantic directory under app/javascript.
3. cd app/javascript/semantic and gulp build. The process will take a while.
4. Then add the following configuration to config/webpack/environment.js.

const path = require('path')
environment.config.merge({
  resolve: {
    alias: {
      './themes': path.resolve(__dirname, '../../app/javascript/semantic/dist/themes'),
      'semantic': path.resolve(__dirname, '../../app/javascript/semantic')
    }
  }
})

5. Add the following lines to app/javascript/packs/application.js

import 'semantic/dist/semantic.js'

6. Add the following lines to app/javascript/stylesheets/application.scss

@import "../semantic/dist/semantic.css";

7. Go to cd app/javascript/semantic and gulp watch.

8. Now you can change your app/javascript/semantic/src/theme.config and gulp will automatically compile the files. Once it’s done you have to force webpacker to rebuild (update any of the js file under app/javascript/packs ).

Final thoughts

Fomantic UI or Semantic UI do offer excellent UI components with structural and semantic naming convention. The state management and data source integration of UI components using their built-in API are particularly useful and make our code cleaner. If you want to know more about how this works, let me know in the comment below. I will write a new article about this next time.

Enjoy!