MDB 5 Ruby on Rails Integration

MDB 5 Ruby on Rails integration

This article shows you how to integrate Ruby on Rails backend application with MDB Standard UI Kit.

This guide will walk you through steps necessary to include MDB package in your Ruby on Rails project and to add some basic setup for your project.


Prerequisites

Before starting the project make sure to install the following utilities:


Creating a new Ruby on Rails application

Let's create a fresh Ruby on Rails application so that we can go through all the steps together.

Step 1

To get started, we need to install Rails.

        
            
        gem install rails
      
        
    

Step 2

Start from navigating within terminal to directory where you want to create your application then run code from snippet below to create your app and change directory.

        
            
        rails new myapp -j esbuild
        cd myapp
      
        
    

Step 3

Run your server with a command from the snippet below.

        
            
        /bin/dev
      
        
    
        
            
        rails s
      
        
    

This will boot Puma that is default Ruby web server. To access your application via any browser visit http://localhost:3000/. There you should see the Rails default information page. When you want to stop the web server, press Ctrl+C in the terminal window where it's running.

Step 4

Open myapp folder in the code editor. Add a route to routes file config/routes.rb, at the top of the Rails.application.routes.draw block.

        
            
        Rails.application.routes.draw do
          get "/articles", to: "articles#index"

        end
      
        
    

Step 5

Inside terminal paste code from the snippet below to run controller generator. Rails will create several files for you.

        
            
        bin/rails generate controller Articles index --skip-routes
      
        
    
        
            
        ruby bin\rails generate controller Articles index --skip-routes
      
        
    

Step 6

Paste content of the snippet below to app/views/articles/index.html.erb as example content of your page.

        
            
      <head>
        <head>
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
          <meta http-equiv="x-ua-compatible" content="ie=edge" />
          <title>Material Design for Bootstrap</title>
        </head>

        <body>
          <!-- Start your project here-->
          <div class="container">
            <div class="d-flex justify-content-center align-items-center" style="height: 100vh">
              <div class="text-center">
                <img class="mb-4" src="https://mdbootstrap.com/img/logo/mdb-transparent-250px.png"
                  style="width: 250px; height: 90px" />
                <h5 class="mb-3">Thank you for using our product. We're glad you're with us.</h5>
                <p class="mb-3">MDB Team</p>
                <a class="btn btn-primary btn-lg" href="https://mdbootstrap.com/docs/standard/getting-started/"
                  target="_blank" role="button">Start MDB tutorial</a>
              </div>
            </div>
          </div>
          <script type="module"></script>
        </body>
      
        
    

If you previously stopped the web server to run the controller generator, restart it with. Now head over to http://localhost:3000/articles and you should see your example page in the browser.

Step 7

Let's open config/routes.rb, and add the following root route to the top of the Rails.application.routes.draw block, to set example page as home page.

        
            
    Rails.application.routes.draw do
      root "articles#index"

      get "/articles", to: "articles#index"
    end
    
        
    

Now we can see our example page when we visit http://localhost:3000/.


Install MDB

Here you need to decide which method of import you want to choose

CDN import is available only for free version of MDB.

To install the MDB UI KIT in your project type the following command in the terminal. If you have PRO package remember to swap the access token before starting the installation.

Token generation

If you don't have access token yet please follow the tutorial.

Install MDB via NPM

Open the terminal and paste the following command.

        
            
            npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-essential
          
        
    
        
            
            npm i mdb-ui-kit
          
        
    

Add node_modules to assets path in config/initializers/assets.rb file.

        
            
            Rails.application.config.assets.paths << Rails.root.join('node_modules')
          
        
    

In the application.css file import CSS files.

        
            
            @import "mdb-ui-kit/css/mdb.min.css"
          
        
    

In the application.js add those lines to import JS files.

        
            
            import * as mdb from "mdb-ui-kit/js/mdb.min.js"
            window.mdb = mdb;
          
        
    

Download the package. And place extracted files into directory vendor/mdb-ui-kit.

Add vendor to assets path in config/initializers/assets.rb file.

        
            
            Rails.application.config.assets.paths << Rails.root.join('vendor')
          
        
    

In the application.css file import CSS files.

        
            
            @import "mdb-ui-kit/css/mdb.min.css"
          
        
    

In the application.js add those lines to import JS files.

        
            
            import * as mdb from "../../vendor/mdb-ui-kit/js/mdb.min.js"
            window.mdb = mdb;
          
        
    

Installation via CDN is one of the easiest methods of integrating MDB UI KIT with your project. Just copy the latest compiled JS script tag and CSS link tag from cdnjs to the application.

Don't forget to add also Font Awesome and Roboto font if you need. Here's an example code:

Into the <head> tag in your HTML file copy:

        
            
              <!-- Font Awesome -->
              <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"/>
              <!-- Google Fonts -->
              <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet"/>
              <!-- MDB -->
              <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/5.0.0/mdb.min.css" rel="stylesheet"/>
            
        
    

At the end of <body> tag in your HTML file copy:

        
            
            <!-- MDB -->
            <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/5.0.0/mdb.min.js">
            </script>
            
        
    
Now you're done

With MDB's CSS and JS fully loaded, after restarting the server your example page should work and you should see MDB styles applied to its content.