How to Setup a Rails API and React.js Client

#rails #react #github

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:

mkdir new-project
cd new-project

To create your React frontend run:

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:

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:

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.
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.
Next you will see a page that looks like this:
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:

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.

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.

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.

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:

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

# Use Rack CORS for handling Cross-Origin Resource Sharing (CORS), making cross-origin AJAX possible
gem 'rack-cors'

Then in your terminal run:

bundle install

Next you will need to navigate to config/initializers/cors.rb and comment in the rode for using the cors middleware.

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