DEV Community

Cover image for Foreman for Rails and React
JaredHarbison
JaredHarbison

Posted on • Edited on

4 1

Foreman for Rails and React

Rails + React + Redux - Pt 1


For my final project with Flatiron School I was prompted to use Ruby on Rails with React. This post is going to focus on setting the basic structure of the Rails and React combo for subsequent posts.

DRAGnet is ultimately a Ru Paul's Drag Race CRUD app for which I'm going to initially scrape data from Fandom. I'll cover the data scraping in later posts within this series.

I pieced together documentation snippets and several dated tutorials in order to get Rails and React working together. I'm going to recreate that aspect of the project in this first post in hopes of making life a little easier for someone in the future.


Let's get started!


The --api tag will tell Rails to cut some of the unnecessary MVC architecture.

rails new DRAGnet --api


The --api tag will also eliminate the respond_to method. I needed to add that back in.

class ApplicationController < ActionController::API
include ActionController::MimeResponds
end

I added 'rack-cors' and 'active_model_serializers' to gemfile.rb for later use.

# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.1.0', require: false
# Use Rack CORS for handling Cross-Origin Resource Sharing (CORS), making cross-origin AJAX possible
gem 'rack-cors'
gem 'active_model_serializers'
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
view raw gemfile.rb hosted with ❤ by GitHub

bundle install


I uncommented the cors info in config/initializers.rb and updated the origin.

# Be sure to restart your server when you modify this file.
# Avoid CORS issues when API is called from the frontend app.
# Handle Cross-Origin Resource Sharing (CORS) in order to accept cross-origin AJAX requests.
# Read more: https://github.com/cyu/rack-cors
Rails.application.config.middleware.insert_before 0, Rack::Cors do
allow do
origins 'http://localhost:5100'
resource '*',
headers: :any,
methods: [:get, :post, :put, :patch, :delete, :options, :head]
end
end
view raw cors.rb hosted with ❤ by GitHub

I'll later run create-react-app from within the root directory rather than creating two separate applications. To run the two servers together with one command I'll use Foreman. Per Foreman, the gem must not be added to gemfile.rb.

gem install foreman


I created the Procfile for Foreman to use when I'm ready to run both servers

touch Procfile

api: rails s
web: cd frontend && npm start
view raw Procfile hosted with ❤ by GitHub

I ran create-react-app from within the root directory.

npx create-react-app frontend


I needed to enable CORS through the package.json file create-react-app created in the frontend directory. I'm accounting for name-spacing API and V1 when we work with the Rails routes.

{
"name": "frontend",
"version": "0.1.0",
"proxy": "http://localhost:5000/api/v1",
"private": true,
"dependencies": {
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-scripts": "3.1.1"
},
view raw package.json hosted with ❤ by GitHub

I added the preliminary packages needed for Redux and Semantic UI

npm install --save redux react-redux redux-thunk redux-devtools-extension semantic-ui-react


To be sure everything is ready...

cd.. && rails db:create && foreman start


That's all folks!

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs