How to create a ReactJS and Rails Monorepos to GitHub

What is a Monorepos?
A monorepos is when you have multiple applications within the exact location. Many developers use monorepos to have a single place to have the front-end and back-end Apps together. There is another way to structure an application which is Polyrepo, but this article will teach you how to make a Monorepos only.

Step 1
Go to your Terminal on a Mac Computer and create an empty root folder. It can have whatever name you want. I name my root folder test3 and cd into the folder after.

Mac Terminal

Step 2

Let’s create the ReactJS by running the following command in your terminal

npx create-react-app fe-test3

Step 3
Create a new rails app. In this case, I’m installing the rails API with PostgreSQL, but you can install your rails whichever way you want.

rails new be-test3 --api --database=postgresql

Step 3
After both applications are installed, go to Github a create a new Repository from your GitHub Profile.

Profile Page

Create new Repository

Go to your application, and in your terminal, cd to each application directly and type:

Visual Studio Terminal

rm -rf .git

On the Quick Setup page in Github, copy everything in the yellow highlight and paste it into the terminal but make sure you are in the root directory of the application (Frontend and Backend)

Quick Setup

After pasting the code from Github and hitting enter, you will get a message like this.

Terminal after pasting code from GitHub

Now you should be Ready to upload everything to Github. Go ahead and do:

git add .
git commit -m 'first commit'
git push --set-upstream origin main

and Waalaa!!

Final result (Monorepos) Reactjs and Ruby on Rails API

I hope you find this content helpful. The first time, I spend over 5 hours trying to put ReactJS and Rails in one Repository. You probably won't have this issue with other apps like Reactjs and NodeJS.

Follow me for more content. GitHub Profile