Foreman for Rails and React
Tags: ruby, rails
Published: 2019-08-23 21:27:35

---
description: setting up a rails and react project with the ruby foreman gem to subsequently run two servers.
---

<h1><center>Rails + React + Redux - Pt 1 </center></h1>
*********************************************************

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](https://rupaulsdragrace.fandom.com). 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. 

*********************************************************
<h1><center> Let's get started! </center></h1>
*********************************************************

*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.*

{% gist https://gist.github.com/JaredHarbison/0a89d4d73ea49b0061e7da76c98666d0 %}

*********************************************************

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

{% gist https://gist.github.com/JaredHarbison/3ae8a14c812ba615bc2790f4ef73ffd4 %}

```bundle install```

*********************************************************

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

{% gist https://gist.github.com/JaredHarbison/34aa76270de69607189d1fdb45ac00eb %}

*********************************************************

*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](https://www.rubydoc.info/gems/foreman/0.82.0), 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```

{% gist https://gist.github.com/JaredHarbison/e2d89d9c0f1f5e8da665d3b609bf66cd %}

*********************************************************

*I ran [create-react-app](https://create-react-app.dev/docs/getting-started) from within the root directory.*

```npx create-react-app frontend ```

*********************************************************

*I needed to enable [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/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.*

{% gist https://gist.github.com/JaredHarbison/91595d8a1cd73ff4fe46a813cba5504a %}

*********************************************************

*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```

*********************************************************
<h1><center> That's all folks! </center></h1>