Setting Up Rails API for React

Aug 22, 2024

React with Rails Series: Introduction and Rails API Setup

Overview

  • Series on using React as front-end with Rails as API back-end.
  • Although Hotwire is popular with Rails, businesses hire for React and Rails skills.
  • Series will evolve with more episodes, focusing on practical use for interviews and tech stack familiarization.

Current Project: Post CRUD App

  • A simple CRUD application for posts.
  • Demonstrates communication between React front-end and Rails back-end.
  • Demonstrates creating, updating, and deleting posts through API calls.

Importance of React and Rails

  • Companies may choose React due to available React developers.
  • More overhead in setup and communication between React and Rails.
  • Uses API for interactions, similar to Rails scaffold structure.

Setting Up Rails API

  • Initialize Rails Project:
    • Command: rails new video --api
    • Sets up controllers and models without views.
  • Opening Project in VS Code:
    • Use cd video and code .

Configuring the Rails API

  • Gemfile Adjustments:
    • Uncomment rack-cors gem for cross-origin resource sharing.
    • Run bundle install.
  • Configuring CORS:
    • Edit config/initializers/cors.rb.
    • Specify origins for API requests (e.g., local dev server or public domain).

Creating Post Scaffold

  • Generate Scaffold:
    • Command: rails g scaffold Post title:string body:text
    • Generates models and migrations; no views.
  • Database Migration and Seeding:
    • Run rails db:migrate and rails db:seed to populate with dummy data.
  • Modify Post Order:
    • Update controller to order posts by created_at descending.

Testing Setup

  • Adding Tests:
    • Include tests for post order in controller.
    • Add rails-controller-testing gem for test support.

Version Control

  • Initialize Git Repository:
    • Perform git add . and git commit -m "init commit".
  • Create GitHub Repo:
    • Create a repository and push local commits.

Conclusion

  • Part 1 focuses on Rails API setup as the foundational step.
  • Future episodes will cover integrating React.
  • Aimed at helping prepare for interviews and understanding a common tech stack.

This introductory lecture outlines the process of setting up a Rails API to be used with a React front-end, detailing initial configurations, scaffold creation, and preparing for future React integration.