How to Setup a Rails API and React.js Client
Tags: rails, react, github
Published: 2021-01-16 16:44:15

Sometimes you want to quickly spin up a Rails API and a React.js frontend, whether it's to get those reps in for making projects from scratch or maybe an upcoming coding challenge. I often will get most of the steps right but then forget a piece and have to scour Stack Overflow to see where I went wrong. So here's a piece to help my future self and others on all you need to start up a project!

Note: this assumes you already have node, npm, yarn, rails, etc installed locally and have a Github account. 


**Making the React Client**
- Using your terminal navigate to where you want your project to live and make a directory to hold your backend and frontend and run the commands:
```ruby
mkdir new-project
cd new-project
```
- To create your React frontend run:
```ruby
npx create-react-app new-project-client
```
- You can then open your folder that is holding the project then cd into the new React app: 
```ruby
code .
cd new-project-client
```
- Next let's get our code connected to Github.
- The command create-react-app should have initialised a git repository for you, but if not you can in terminal manually add it:
```ruby
git init
```
- Now go ahead and navigate to your Github account and click on New Repository in the upper right hand corner next to the notifications bell.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/j29idykbc9c8w6zftfps.png)
- Once on the Create a Repository page go ahead and name your project (new-project-client). Do not initilize the repository with any of the options since you have already made one. Click create repository. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xecak61fmb9fv92y1vcp.png)
- Next you will see a page that looks like this:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/p3ti619w7fsce1fxgxnf.png)
- When using create-react-app it makes the initial commit message (Initialize project using Create React App), so you can skip down to running the following commands in your terminal:
```ruby
git remote add origin git@github.com:MMcClure11/new-project-client.git
git push
```
- Then you can navigate to new-project-client and see the initial commit on Github.

**Making the Rails API**
- Now you will want to cd out of the client directory so you are in the folder that will hold both projects.
```ruby
cd ..
```
- To create the rails app, make sure to add the api flag and specify the database as postgresql if you plan to deploy to some place like Heroku.
```ruby
rails new new-project-api --api --database=postgresql
```
*Note: 'new-project-api' is whatever you want to call the rails piece of your project.
- Next we need to run git init and add an initial commit.
```ruby 
git init
git add .
git commit -m "Initial commit."
```
- Follow the steps above for creating a Github repository. Once you have created it go ahead and run:
```ruby 
git remote add origin git@github.com:MMcClure11/new-project-api.git
git push
```
- Then check to see that your new Rails API is in fact on Github. 
- Next let's go ahead and add the Active Model Serializer or serializer of your choice.
```
bundle add active_model_serializers
```
- We will also need to uncomment out the rack-cors gem to allow our frontend to make requests to the backend. (If you plan to add user authentication, you can also go ahead and comment back in the bcrpyt gem for password protection.)
```ruby
# Use Rack CORS for handling Cross-Origin Resource Sharing (CORS), making cross-origin AJAX possible
gem 'rack-cors'
```
- Then in your terminal run:
```ruby
bundle install
```
- Next you will need to navigate to config/initializers/cors.rb and comment in the rode for using the cors middleware.
```ruby
Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'http://localhost:3000', 'http://localhost:3001', 'http://localhost:3002'

    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end
```
- For your origins you can use a '*' which is the wildcard and will allow for any url to send requests, or you can specify which local ports you might use while in development and also later add the deployed url.

All right, now you are all set to start building your API and your client! The blog listed below is a really great resource for further details about building out the API including your models and serializers. Hope this is helpful!

Happy coding!


**Resources**
[Spinning up a Rails API](https://medium.com/better-programming/how-to-fire-up-a-rails-api-for-your-new-project-6fad595caf07)