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
- Introduction
- Overview
- Early Steps
- Creating the Rails API(Backend) & Connecting to GitHub
- Creating the React frontend & Connecting to GitHub
- Conclusion
- 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.
- 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
- Change to the newly created folder with
cd <app_name>
- Run in your terminal:
rm -rf .git
git init
Create a new repository on GitHub by navigating to https://github.com/new
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.
- 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
- If you haven’t changed back to your project directory:
cd ..
- 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.
- Change to the newly created folder with:
cd <app_name>
- Run in your terminal:
rm -rf .git
git init
Create a new repository on GitHub by navigating to
https://github.com/newName 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.
- 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
Top comments (0)