Thumb mislav Mislav Kvesic Tuesday, January 2, 2018

A few months ago, I started learning Japanese for fun. I started with Duolingo app, but my smartphone had just died and I had to continue learning from my laptop. Unfortunately, it wasn’t possible to learn Japanese on the Duolingo web at the time when I was writing this blog post so I tried to find a better way. Google brought me to this simple page on the topic of learning Japanese and I started to read and learn. My practice is always 'learning by doing' so I figured that the best way to learn Japanese characters is to write them down. 

I had to take my drawing pad, connected it to the laptop, opened Gimp, made a new layer…and then I thought: "No way I will do this each time!". There must be a better way! I would like to have an app with a drawing surface and next to the drawing surface I would like to get the solution. I don’t want to have the app only locally, on my laptop and I think it should be like a game, maybe some co-op mode… I had to build an app and, by the way, I could learn a bit more about Rails 5.1 and ReactJS because these two frameworks are great tools that help people build complex user interfaces. :)

What I needed to do was the following:

  • Setup a Rails 5.1 app
  • Add ReactJS to this app
  • Make components
  • Add some styles so it looks nice
  • Add Devise gem to the app and enable registrations
  • Organize users in some learning groups
  • Enable Active Cables and make some small chat
  • Make the co-op mode for team learning

Well...this escalated quickly! :) Let’s first set up Rails and ReactJS. My first goal was to see a “Hello World from ReactJS”.
Setup Rails

So, let's start! Before we do it, make sure that you are using RVM and have installed Ruby 2.3.1. If you haven’t, you can easily follow this rvm install guide and then you’re ready to start the project. First we need to create the app:

$ rails new hiragana 

I choose this name becouse Hiragana is one of the three character sets that is used to write.

When the app is created, we must open the app folder and edit the Gemfile. In the Gemfile I like to:

  • Define the ruby version
  • Replace SQL with PG and
  • Remove coffee script and turbolinks 

After this we can run:

$ bundle install

My Gemfile looks like this. In this phase, we don’t need Redis gem, but later we will. You can leave it commented.

Few things from the list above can be tricky. Replacing SQL with PG can lead to problems, but if you have done this already for some earlier projects, you won’t have any trouble. If this is your first time with PG, you can follow this link on to make it work. Don’t forget to change your config/database.yml! You can test your database by creating and dropping it.

$ rails db:drop


$ rails db:create

For now, the database will not have any function so just leave it as it is.

The next thing that's always a challenge are turbolinks, so we should remove it from the Gemfile, from views/layouts/application.html.erb and from the assets.
In views/layouts/application.html.erb replace:

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>


 <%= stylesheet_link_tag 'application' %>
<%= javascript_include_tag 'application' %>

And remove them from app/assets/javascripts/application.js.

To check if everything works, we should add a root to the config/routes.rb.

Rails.application.routes.draw do
  root "pages#home"

Create a controller with the name pages_controller.rb in app/controllers/ folder

class PagesController < ApplicationController
  def home

And in app/views/ add the folder pages/ that includes home.html.erb file

<h1> Hello world! </h1>
<h3> But where is ReactJS? </h3>


$ rails s

And go to browser on the url: http://localhost:3000/ if we see the “Hello world” message, the Rails part is working. Now, we have to enable ReactJS in this project. Before adding React, we would firstly install Yarn because it’s maybe the best solution for handling npm. So we should run:

$ sudo apt-get update && sudo apt-get install yarn

You can type yarn in the console and if you don’t see any errors everything should be fine and yarn is installed. After installing yarn we should install Webpack and ReactJS. There are some good tutorials for doing this and the best two I have found are these two:

If you have time, I recommend you to read them.

For the purpose of this subject, I will add a new gem to my Gemfile.

gem 'webpacker', github: 'rails/webpacker'

You can learn more about it on 

And run:

$ bundle install
$ rails webpacker:install
$ rails webpacker:install:react

This could take a few seconds, but in the end, the new framework should be installed. I will add a new gem to my Gemfile, which will handle defined tasks.

gem 'foreman'

You can learn more about this gem on 

And run

$ bundle install

After this, we will add two prockfiles where we define the tasks that foreman should handle. You should make the files in the root folder of the app. The first one is called Procfile with no extension and with the content:

web: bundle exec puma -p $PORT

and the second with the content:

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

After the prockfiles are created we can make an executable file that will run the server. In the bin/ folder you should add a new file called server with the content:

#!/bin/bash -i
bundle exec foreman start -f

One of the tutorials that I have mentioned above recommend you to include bundle install command in the new bin/server file before bundle exec foremen start, but I won’t do that. The next step is to make this server file executable so we should run:

$ chmod 777 bin/server

Now we can run:

$ bin/server

Open the browser with the url http://localhost:5000/ and in the best case you will again see the same message as before, so you may ask yourself how do we know that the Webpack and React are working correctly? Firstly, we should test if app loads the javascript files. In app/javascript/packs/ folder (be careful, not in app/assets/javascripts/) open the file application.js and there is a line that will “console.log()” some message, but the message will not appear in the browser until we load these file to the app. Replace the line:

<%= javascript_include_tag 'application' %>


<%= javascript_pack_tag 'application' %>

In the <head> tag of the views/layouts/application.html.erb , you should restart the server, refresh the page in the browser and the “console.log()” message will appear. You can find the necessary information commented in app/javascript/application.js. Looks like the Webpack is working and in the future we can include javascript files from other folders to this application.js file.
Next, we should create some ReactJS components. For this purpose, we can make a new file in app/javascript/packs/ with the name hiragana.jsx and a new folder called components/. This hiragana.jsx will be the main js file and we should include it in the pages where we want to see it. We can do this by adding:

<%= javascript_pack_tag 'hiragana' %>

to the bottom of views/pages/home.html.erb.

Now, this file will be loaded only on this page. In this case, views/pages/home.html.erb is the root and for now there is no need for more pages. But imagine that this app becomes really large and we decide to make some new pages, for example user profile page or pages that are running apps for learning different languages. We certainly do not want to load each time this hiragana.jsx file, when the user tries to edit his profile or tries to learn some different language.

Let’s add some content to this hiragama.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import Main from './components/main.jsx'
document.addEventListener("DOMContentLoaded", function(event) { //when the DOM is ready IE 9 will make problems
  var application = document.getElementById('hiragana');
  const hiragana = ReactDOM.render(<Main />, application);

What does this file do? Firstly it imports React and ReactDOM ( ) that are somewhere in node_modules/ folder. Then, it imports Main component from the folder components/ that we have created. The event listener will wait until the dom is loaded and then find the <div> tag with the id “hiragama” and add the component named “Main” to this <div> tag. We are missing few things! Firstly we must add one <div> element to views/pages/home.html.erb that looks like so:

<div id="hiragana"> </div>

Secondly, we don’t have a “Main” component, so we will create one. In the folder components/ make a new file with the content:

import React from 'react';
import ReactDOM from 'react-dom';
class Main extends React.Component {
return (
<h1>Here is ReactJS </h1>
export default Main;

Again, we import React and ReactDOM, but we won’t load these frameworks twice. When the components are done and we open the browser, the React will be loaded only once. And the component will render “Here is ReactJS” under our old messages that come from views/pages/home.html.erb <h1> and <h2> elements.

When we open the browser we could get an error saying that hiragana.js could not be found in manifest.json. Because of this we should run:

$ bundle exec rails webpacker:compile

And hiragana should now be present in public/packs/manifest.json. Furthermore, when we open http://localhost:5000/ in the browser, we can see that ReactJS components are working and I the next blog post we can start to build the actual app.


Cookies help us deliver our services. By using our services, you agree to our use of cookies.