How to use Metronic 8 theme from ThemeForest with Ruby on Rails 6 Application and Webpack

In this tutorial I will show you how to easy apply Metronic 8 admin dashboard theme from ThemeForest to Ruby on Rails 6 Application with Webpack.

For example I used Demo1 HTML version of template.

For the first I will show you how to prepare bundled css and js file with Webpack from Metronic template.

Second part is about how to integrate this files into Rails 6 application using Webpacker.

Finally third part shows how to put some css and js from Metronic 8 Demo 1 to your application to check if everything is working well.

PART 1 — Prepare bundled css and js file

1. Download theme from ThemeForest website or GitHub repository.
2. For the beginning you have to precompile Metronic Theme with webpacker to get bundled css and js files. Look at the next few steps to get it.
3. Open terminal window and change directory to downloaded theme directory:

cd [metronic8]/html_bootstrap5/theme/tools

4. Install the latest version of npm:

npm install --global npm@latest

5. Install yarn via the npm:

npm install —-global yarn

6. It is good to upgrade dependencies to latest versions, so run:

yarn upgrade

7. Config file is for default prepared for Gulp. We use WebPack, so you have to remove one line from package.json file:

nano package.json

and remove line

“type”: “module”

8. Install yarn dependencies:

yarn

9. Build your theme with:

npm run build --demo1

If you wan’t to use different template than demo1 change it at the end of build command.

At the end of bundling you should see:

10. Builded CSS (style.bundle.css) and JS (scripts.bundle.js) files are located in:

[metronic8]/html_bootstrap5/theme/demo1/dist/assets/css/
[metronic8]/html_bootstrap5/theme/demo1/dist/assets/js/

PART 2 — Integrate bundled css and js files from Part 1 into Rails Application

Now we are going to integrated bundled css and js files from metronic to our Rails 6 application.

1. Create a new application f.e. blog_app

rails new blog_app
cd blog_app
rails g scaffold Article title:string body:string counter:integer
rails db:migrate

2. Copy bundled css file to your rails app css assets directory:

[blog_app]/assets/stylesheets/style.bundle.css

3. Copy bundled js file to your rails app js directory:

[blog_app]/app/javascripts/packs/scripts.bundle.js

4. Open your application.css and add:

@import “style.bundle.css”

5. Open your application.js file and add:

import ‘./scripts.bundle.js’

6. In the terminal window precompile your js files using webpacker by running (in your app directory):

./bin/webpack-dev-server

7. Open another terminal tab or window and run rails server for your application:

rails s

8. Open the browser and go to http://localhost:3000/articles

9. Add some random data to Articles.

PART 3 — Use template css and js file to check theme is loaded perfectly.

We will use some components from Metronic template f.e cards, buttons, badges to check if it is look like as should.

I used slim-rails gem to simplify view files.

1. Add some components to show action render. Open and edit file:

[blog_app]/app/views/articles/show.html.slim

with

.container.py-10.w-600px.min-w-500px
  .card.shadow-sm
    .card-header
      h3.card-title
        = @article.title
      .card-toolbar
        = link_to 'Back', articles_path, class: 'btn btn-sm btn-primary'
    .card-body
      = @article.body
    .card-footer
      | Viewed  
      span.badge.badge-info
        = @article.counter
      |   times

2. Check result is the browser. Should look similar to:

3. That’s it :) Now you can build whole layout and add any class from Metronic template to build front-end of you Rails 6 Application.