Adding MD React Bootstrap into Rails 6 app.

It’s like the Roman philosopher Seneca said, “Men learn while they teach”. Well, it’s not just because he said it, its also because I have realized it many times.

Recently I was assigned the task of implementing React with Rails app. To be more specific, the task was about using MD Bootstrap React components in a Rails app. I have been following the React news since the introduction of Webpacker in Rails 5. I was just curious, so I just picked it up a year ago. In the beginning, it was very disappointing because it was hard finding a tutorial that was not using a gem to implement react with rails. I just don’t like the idea of using gem for certain things. Maybe it’s just me.

Now that Rails 6 has been released, I could see a handful of articles suddenly surfaced on the internet. Using MD Bootstrap react components on an existing Rails app was a bit of a challenge for me, because there just isn’t one way of implementing things in React, there are many. So here we go.

Ruby version: 2.6.3p62
Rails version: 6.0.0.2
Node version: v10.16.2
Yarn version: 1.21.1

Let us create a rails app with Postgresql as the database.

rails new rails-mdb-react --database=postgresql --skip-turbolinks --webpack=react

This will create the basic Rails app with Webpacker required for React. In this article, we wont be adding any model. This is primarily focused on getting the React components up and running in rails app. I might consider taking this further and adding models in follow up articles. Let me know.

Onward. Created the db:

rake db:create

Lets add the main route of the application this one is going to handle the path /. Go to config/routes.rb to define it and inside of the block Rails.application.routes.draw, add:

root to: "home#index"

Now, let’s create the home_controller.rb file in app/controllers folder. Inside, add an emptyindex action:

class HomeController < ApplicationController
  def index
  end
end

Now we need to create the corresponding view in app/views/home folder and name it index.html.erb. In this file, we have to render the script to load our React app. Add the Javascript pack tag in the index view.

<%= javascript_pack_tag 'profiles' %>

Javascript pack tag was introduced in rails along with Webpacker to make it easier to serve the JS front end views. This is precisely what connects the Rails actions with JS views. Please go through the official rails guides for further detailed section on javascript pack tag.

The above script tag will load the pack profiles.jsx. We have to create that pack in the app/javascript/packs folder:

import React from "react";
import ReactDOM from "react-dom";
import App from "components/App";
document.addEventListener("DOMContentLoaded", () => {
  ReactDOM.render(
    <App />,
    document.body.appendChild(document.createElement("div"))
  );
});

Like I said there are many ways of doing things in React. For handling routes in a React app we will be using react-router-dom package. So let's go ahead and install it in our app. Just run the following in the app directory:

$ yarn add react-router-dom

This will install the Router package and if you check the package.json file you can see the react-router-dom added.

I come from RoR community. And out here we like to get things tidy up a little. So we are gonna create a Routes.js file and we will be adding all of our react app routes in this file. This file will be inside the components directory. Lets go ahead and create the directory and the file:

app/javascript/components/Routes.js

Now lets add the routes for the ‘/profile’

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import ProfilePage from "./ProfilePage";class Routes extends React.Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route path='/' exact component={ProfilePage} />
          <Route path='/profile' exact component={ProfilePage} />
        </Switch>
      </Router>
    );
  }
}export default Routes;

We need to call this Routes file from App.js.

javascripts/components/App.js

import React from "react";
// import { Router } from "@reach/router";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Routes from './Routes';function App() {
  return (
    <div className="flexible-content">
      <main id="content" className="p-5">
        <Router>
          <div>
            <Routes />
          </div>
        </Router>
      </main>
    </div>
  );
}export default App;

If you see the third line in Routes.js, we are importing a component called ProfilePage. In this project I will taking this ProfilePage component from the MD React Bootstrap. So before we go any further let’s go ahead install md-react bootstrap package in our app.

$ yarn add mdbreact

Import style files into the packs/profiles.jsx before the App.js file import:

import ‘@fortawesome/fontawesome-free/css/all.min.css’;
import ‘bootstrap-css-only/css/bootstrap.min.css’;
import ‘mdbreact/dist/css/mdb.css’;
import App from “components/App”;

Lets add something in our component to display: In /javascripts/components/ProfilePage.js

import React from “react”;function ProfilePage() {
 return <div>Welcome to my Profile. Built in React App inside my Rails App!</div>;
}export default ProfilePage;

Get it running:

We will be using Foreman to run both rails app and react app at the same time.

$ gem install foreman

Create a Procfile.dev in the root directory of the app.

Procfile.dev and add the following:

web: bundle exec rails s
webpacker: ./bin/webpack-dev-server

Now if you run:

foreman start -f Procfile.dev

And go to localhost:5000(depends on your local ports) you can see the React app rendering.

Now let’s replace the code in the ProfilePage.js with MDBootstrap component. Go to this github gist:

and copy the Js component and replace your existing component in ProfilePage.js with this code.

• *Important: Make sure you have an image in your app/assets/images path or this would throw an error.

Now if you go back to the localhost:5000 page you can see a ProfilePage. And that my friend is coming from the React app which is running inside your Rails app.

That’s it. This tutorial might turn into a series in the future. If you think this helped you or you if got something to say well then