Rails API From Scratch

New API from the CLI

In this particular case, we will be creating a UI in React.

Creating a new API:

rails new <api-name> --api
copy

Setting up the gems

Afterwards, you will want to add some CORS control for Rack and some other gems to prep for Heroku:

gem 'rack-cors', :require => 'rack/cors'

group :development, :test do
  # Moe sqlite3 to here
  gem 'sqlite3'
end
group :production do
  gem 'pg'
end
copy

Creating your models

The following code is an example of creating some Todos.

# rails g model <EntitySingular> [...attribute:type]
rails generate model Todo title:string done:boolean
# rails g controller <EntityPlural> [...crud methods]
rails generate controller Todos index create update destroy
rails db:migrate
copy

Setting up your controller

Update the controller values:

class TodosController < ApplicationController
  def index
    todos = Todo.order("created_at DESC")
    render json: todos
  end

  def create
    todo = Todo.create(todo_param)
    render json: todo
  end

  def update
    todo = Todo.find(params[:id])
    todo.update(todo_param)
    render json: todo
  end

  def destroy
    todo = Todo.find(params[:id])
    todo.destroy
    head :no_content, status: :ok
  end

  private

  def todo_param
    params.require(:todo).permit(:title, :done)
  end
end
copy

Rescopeing the routes

We want to change our resources to be available from

Rails.application.routes.draw do
  # get 'todos/index'
  # get 'todos/create'
  # get 'todos/update'
  # get 'todos/destroy'
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
  scope "/api/v1" do
    resources :todos
  end
end
copy

UI with Create React App

npm install create-react-app
create-react-app <app-name> --template=typescript
copy

Set a proxy value in package.json so that we know where the localhost calls will go to:

"proxy": "http://localhost:3000"
copy

Running locally

You can use heroku local -f Procfile.dev with the Procfile.dev looking like the following:

web: cd todo-ui && PORT=4000 npm start
api: cd todo-api && PORT=3000 bin/rails s
copy

Run and begin calling the routes like so /api/v1/todos and you will start getting some results! Hooray!