🔗 Connecting Ruby on Rails and React: Building a Simple User List API

May 5, 2025

In my recent project, I built a basic full-stack integration using Ruby on Rails as an API backend and React for the frontend , both running in Docker containers. The goal was simple: list users fetched from a Rails API into a React component.

What surprised me the most? It turned out to be much easier than I expected. In the past, I imagined integrating two different technologies would require a lot of configuration—but with a clean API structure and proper setup, everything worked together smoothly.

Want to build a new Rails app with a React frontend? Or maybe you’re looking to improve your current application with a modern React interface?

Let’s connect! Reach out here:

Contact Me

Local Setup with Docker

For local development, I ran:

• React in a Docker container on port 3000
• Rails API in a Docker container on port 3001

This setup allowed me to clearly separate frontend and backend concerns and test cross-origin requests as they would work in a production-like environment.

To handle communication between them, I enabled CORS in Rails using the rack-cors gem:

# config/initializers/cors.rb
Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'http://localhost:3000'

    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

Rails API Endpoint

In the Rails app, I created a namespaced controller to return all users:

# app/controllers/api/v1/users_controller.rb
class Api::V1::UsersController < ApplicationController
  def index
    users = User.all
    render json: users
  end
end

React Frontend

On the frontend, I built a Users component to fetch and render the list:

// src/Users.js
import React, { useEffect, useState } from 'react';

function Users() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('http://localhost:3001/api/v1/users')
      .then(response => response.json())
      .then(data => {
        setUsers(data);
        setLoading(false);
      })
      .catch(error => {
        console.error('Error fetching users', error);
        setLoading(false);
      });
  }, []);

  if (loading) return <p>Loading...</p>;

  return (
    <div>
      <h1>User List</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default Users;

And rendered it in the main App :

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import Users from './Users';

function App() {
  return (
    <div className="App">
      <Users />
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

React Frontend

Add email to the list:

Update Users.js

The original line (to be replaced):

<li key={user.id}>{user.name}, {user.email}</li>

The new line (to insert instead):

<li key={user.id}>{user.name}, {user.email}</li>

Source Code (Frontend Only):

Check out the React code on GitHub: github.com/ggerman/frontend

Conclusion

This project was a great reminder that full-stack development doesn’t have to be overly complex. With Rails providing a solid API layer and React managing the frontend, it’s a smooth combination—especially when Docker helps keep things isolated and reproducible.

If you’re working on a similar setup, feel free to connect. I’d love to hear your experience!