Creating a Full Stack Application: Ruby on Rails as Backend and React as Frontend

Want to put your skills to the test by building out your own application? Here are the steps on how to create and connect to GitHub a Rails API and React app!

Table of Contents

1. Introduction
2. Overview
3. Early Steps
4. Creating the Rails API(Backend) & Connecting to GitHub
5. Creating the React frontend & Connecting to GitHub
6. Conclusion
7. Resources

Introduction

For my latest project, I built a full-stack application with a Rails API backend and a React/Redux frontend. In addition to being my latest project, it is also my last project with the Flatiron School because I have now graduated! I truly enjoy being a full stack developer and plan on building out more side projects; graduating isn’t the end but the beginning for me.
Since I’m planning on working with React for the frontend and Rails API for the backend, I took out my handy-dandy notebook to document what I’m doing. When I tried to write down the steps on how to create the backend and frontend repositories locally and have them be connected on GitHub, I started to mix them up. So to keep track of the steps and for anyone else who needs a reminder, I’m leaving this step-by-step guide here!

Overview

The following guide will be written with deployment in mind. To make an app easier to deploy, it’s better to have the backend and frontend live on two separate repositories (repos) on Github. That being said, though they will live on two separate repos remotely, locally you can have them live in the same folder. Therefore, as you work keep two code editors and terminals open, one to work on for the frontend and one for the backend. This means that you will be pushing your code to both repos.
Tip: Since you will have two terminals open, keep in mind which GitHub repo you will be making your commits to; when I’ve pushed my code sometimes I forget which terminal I’m in so I’ve written commit messages to my backend with my frontend in mind and vice versa (oops! 😅)

Early Steps

Before we create the frontend and backend, let’s create a directory to hold them locally.

1. Create a new project directory (folder) on your local computer where you want your project to be.

mkdir <new-project-name>

Tip: I suggest using “backend” as the app name since this is in the project directory.

Note: the --database=postgresql creates the database with Postgres

1. Change to the newly created folder with

cd <app_name>

1. Run in your terminal:

rm -rf .git
git init

1. Create a new repository on GitHub by navigating to https://github.com/new

2. Name and create the repository on GitHub

Tip: I suggest using “app-name-backend” as the repo name; the name you give it here does not need to be the same as what it is locally.

Note: Do NOT Check the “initialize with readme” button.

1. Go back to your terminal and run the following:

git add .
git commit -m "first commit"
git remote add origin … (your SSH)
git branch -M main
git push -u origin main

Creating the React frontend & Connecting to GitHub

Before we do anything we’ll first need to install the create-react-app on your computer with npm. If you already have it installed you can skip this, however, if you’re not sure you can still run the following command:

npm i -g create-react-app

Fun Fact: The "i" flag means to install and the “-g” means to install globally

1. If you haven’t changed back to your project directory:

cd ..

1. Create a new React app with:

create-react-app <app_name>

Tip: I suggest using “frontend” as the app name since this is in the project directory.

1. Change to the newly created folder with:

cd <app_name>

1. Run in your terminal:

rm -rf .git
git init

1. Create a new repository on GitHub by navigating to
   https://github.com/new

2. Name and create the repository on GitHub

Tip: I suggest using “app-name-backend” as the repo name; the name you give it here does not need to be the same as what it is locally.

Note: Do NOT Check the “initialize with readme” button.

1. Go back to your terminal and run the following:

git add .
git commit -m "first commit"
git remote add origin … (your SSH)
git branch -M main
git push -u origin main

Conclusion

Yay, you’ve created your Rails API and React frontend and connected them to GitHub!

These may be simple steps we do everyday but sometimes you need to be reminded of the basics. Now that you created your project!! Yay!!

Resources

📖 https://kbroman.org/github_tutorial/pages/init.html
📖 https://docs.github.com/en/free-pro-team@latest/github/importing-your-projects-to-github/adding-an-existing-project-to-github-using-the-command-line