We build most of our websites on WordPress’ robust content management system (CMS), but there are always projects that require the extra heft of a different system—Ruby on Rails.

Rails is a back-end framework that includes everything needed to create a database-backed web application, with capabilities to create an API (application programming interface). Combined with React—a Javascript framework created by the development team at Facebook—you can easily create complex web applications for database heavy projects.

We’ve had fun expanding our development services and skills in this area. Since we’ve built several Rails projects now, we wanted to provide a tutorial on how to create a database project—and hope that it is helpful to any Rails newbies!

If you have a basic programming background and a simple understanding of React and Ruby on Rails, you should have no issues following along with this series of tutorials.

Project Setup

We will be building a basic IMDB style database app using React on the front-end and a Rails API on the back end, and hosting the project on Heroku. This tutorial series is inspired by this article on Heroku but we will be adding on additional features, such as Email submission via SendGrid, Pagination, Search functionality, Image Upload and more.

Rails API will include.

• People
• Movies
• Categories

Run the following in your console.

rails new imdb --api
cd imdb

Add /public to your .gitignore file.

# See https://help.github.com/articles/ignoring-files for more about ignoring files.
#
# If you find yourself ignoring temporary files generated by your text editor
# or operating system, you probably want to add a global ignore instead:
# git config --global core.excludesfile '~/.gitignore_global'

# Ignore bundler config.
/.bundle

# Ignore the default SQLite database.
/db/*.sqlite3
/db/*.sqlite3-journal
/db/*.sqlite3-*

# Ignore all logfiles and tempfiles.
/log/*
/tmp/*
!/log/.keep
!/tmp/.keep

# Ignore pidfiles, but keep the directory.
/tmp/pids/*
!/tmp/pids/
!/tmp/pids/.keep

# Ignore uploaded files in development.
/storage/*
!/storage/.keep
.byebug_history

# Ignore master key for decrypting credentials and more.
/config/master.key
/public

Add Active Admin & Devise Gems

First, we’ll replace the sqlit3 with pg to handle our database. We’ll be updating to pg in order to match the Heroku environment. Next we’ll add the activeadmin and devise gems to your Gemfile – I have also included a Material theme from Viget Labs to give the admin a slightly more modern look. A list of themes are available here.

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

ruby '2.6.3'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.0.3', '>= 6.0.3.4'
gem 'pg'
# Use Puma as the app server
gem 'puma', '~> 4.1'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
# gem 'jbuilder', '~> 2.7'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use Active Model has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Active Storage variant
# gem 'image_processing', '~> 1.2'

# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.4.2', require: false

# Use Rack CORS for handling Cross-Origin Resource Sharing (CORS), making cross-origin AJAX possible
# gem 'rack-cors'

group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
gem 'listen', '~> 3.2'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring'
gem 'spring-watcher-listen', '~> 2.0.0'
end

# ActiveAdmin
gem 'devise'
gem 'activeadmin'
gem "active_material", github: "vigetlabs/active_material"

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

Next, in the console run bundle for the newly added gems – then run the Active Admin installation.

bundle
rails g active_admin:install

If you’re using a newer version of Rails, you may get an error for a missing manifest file.

railtie.rb:105:in `block in <class:Railtie>': Expected to find a manifest file in `app/assets/config/manifest.js`
But did not, please create this file and use it to link any assets that need to be rendered by your app

To create this file, in the console run:

mkdir -p app/assets/config && echo '{}' > app/assets/config/manifest.js

Now you can run

rake db:migrate db:seed
rails s -p 3001

Visit http://localhost:3001/admin and you should the ActiveAdmin login page. You can log in using the username admin@example.com and the password password. These can be updated in the Admin Users section of ActiveAdmin.

Create React App

Next we’ll create a React app, using – you guessed it – create-react-app.

npx create-react-app client

Next, we’ll go into the client/src/index.js and for now we’ll be commenting out the reportWebVitals() function, your file should now look like this:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
// import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
// reportWebVitals();

Next, in our client/src/App.js we’ll remove the boilerplate code from React, and add a placeholder Our IMDB App header:

import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Our IMDB App</h1>
    </div>
  );
}

export default App;

In Part 2, we’ll go over creating models in the Rails API, adding relationships between models and organizing the API response with Rails Serializers.

React & Rails API series:

1. Project Setup (this post)
2. Relationships
3. Router
4. Image Upload via S3
5. Send Emails (coming soon!)
6. Search Functionality (coming soon!)
7. Pagination (coming soon!)