Get started with Ruby on Rails + React + Postgres

First thing that’s required to do when starting a website is to determine the technology you want to use.

In my case, I decided to go with Ruby on Rails – I think this language and framework is great for starting a website especially when trying to prove a concept.

Sure, the performance may be a bit lower than lets say, Java spring-boot application, however this would not be a problem for a while, and when you do have this problem, that means RoR has achieved its purpose.

So if you decided to go with RoR and want to use React and Postgres (I believe these are popular choices of mix right now) then let’s crack on.

Useful resources on setting up Ruby on Rails with Postgres: https://www.digitalocean.com/community/tutorials/how-to-set-up-ruby-on-rails-with-postgres

Useful resources on setting up Ruby on Rails with React and Webpacker: https://www.nopio.com/blog/rails-with-react-webpacker-gem/

Have a read through the resources, follow them along if you wish as they build on the foundation. We will use slightly different techniques here, or the combinations of the two to get started.

The main purpose will be to create your application by combining the ‘rails new’ approach, like so:

rails new myapp --database=postgresql --webpack=react

And change myapp to whatever app you’re creating.

This would be much easier than creating your app and then manually re-wiring things – it is possible, but it definitely takes some fiddling around with, so save yourself the hassle by getting off on the right foot.

Pre-requisites

There are many ways of getting your pre-requisites ready so do what works for you, for me, I installed bundler and created a ‘Gemfile’ (no ext) with content:

# frozen_string_literal: true

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.7.1'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.0.3'

For this, you will need to install bundler (https://bundler.io/) and have the specified version of Ruby (in the example above, 2.7.1 – feel free to change this to latest stable version).

To install ruby, I would suggest you use rvm – Ruby version manager (https://rvm.io/rvm/install). You may not need different versions now but it could save you a great deal of time later if you have this, and it’s easy to setup.

Once you have rvm installed, type rvm install 2.7.1

Change the version to one that you desire, and the same one that’s in the Gemfile if you’re using this method.

After it’s finished, ensure it ran successfully by checking ruby version:

ruby --version
ruby 2.7.1p83 (2020-03-31 revision a0c7c23c9c) [x86_64-darwin18]

Also check the bundler is installed as you will need it to continue:

bundle --version
Bundler version 2.1.4

Now all you have to do is type:

bundle install

This will install all the dependencies listed in your Gemfile, so in our case Rails.

Why install Rails with bundler?

There are several ways of installing Rails including sudo gem install rails

However by utilising the bundler, the Rails installation will become localised to this project – this will provide you useful advantages later by segregating your projects and workspaces. It will also offer more flexibility when you will want to test out different versions later.

Now if your bundler ran succesfully, you should be able to check your Rails version:

rails --version
Rails 6.0.3.2

With this, you’re ready to create your application, let’s execute the command mentioned earlier:

rails new myapp --database=postgresql --webpack=react

This is a really nifty command which should install all relevant dependencies for you.

I will name the app ‘railscruiter’ here as the example, and this is what I have after this command finished:

Gemfile		Gemfile.lock	railscruiter

You should have something similar. Now go inside the main application folder, and here you will need to run

rails webpacker:install

After this completes, you should be able to enter the command:

rails s

then open browser and navigate to http://localhost:3000/ and you should finally have things working

Note that in your application folder, you will have a new Gemfile controlling the Gems used in your application – these are ruby libraries used by Rails.

With installing Webpacker in the previous command, you would now have a yarn.lock file which will control the javascript libraries in your application.

In the next chapter, we will look to change this root page and create a single page application (SPA) react component.