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.
I added 'rack-cors' and 'active_model_serializers' to gemfile.rb for later use.
bundle install
I uncommented the cors info in config/initializers.rb and updated the origin.
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
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.
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
Top comments (0)