Deployment - Ruby on Rails Backend and React Frontend

Heroku — Ruby on Rails Backend && Firebase — React Frontend

Photo by Andrew Neel on Unsplash

Deploying Ruby on Rails Backend on Heroku

1. Create a ruby on rails backend database

gem install rails
rails new <your_project_name> --api -T --database=postgresql

2. Go to heroku.com and create a free account.

3. In the upper right hand corner click on the new tab and select “Create a new app”

4. Give your app a name and select your region. Click the Create app

5. In Deployment Method — Select Heroku Git

6. Install the Heroku CLI

https://devcenter.heroku.com/articles/heroku-cli

brew tap heroku/brew && brew install heroku

7. In your terminal

heroku login

8. Confirm your login

https://devcenter.heroku.com/articles/git

9.1 Alternate. Create app using CLI inside the project folder. It will generate a random app name.

heroku create

9.2 Rename the app name

heroku apps:rename <newAppName>

9.3 If using the heroku create in CLI, skip step 10, heroku remote is automatically created.

10. If your project folder already had git init with Github, run to connect the project folder to heroku. New/update remote app name.

heroku git:remote -a <your_app_name>

else

git init
heroku git:remote -a <your_app_name>

To check if the project folder have a git linked, run

git remote -v
//Display, if connected with Github and Heroku.
origin git@github.com filename.git(fetch)
origin git@github.com filename.git(push)
heroku https://git.heroku.com/proxy-server-aka.git (fetch)
heroku https://git.heroku.com/proxy-server-aka.git (push)

11. Run the following commends

git add .
git commit -am "first commit"
git push heroku main

12. Create and seed the database.

To create the database:

heroku run rake db:migrate

To seed the database:

heroku run rake db:seed

***Extra***

To drop the database:

heroku pg:reset DATABASE_URL --confirm NAME_OF_THE_APP

Combine migrate and seed into one step

heroku run rake db:setup

If needed

heroku restart

Clone heroku repo

heroku git:clone -a <your_app_name>

13. It now done. On your new heroku app URL, you will see something like this. Perfectly normal since this is a database API.

Deploying React Frontend on Firebase

1. Create a React Frontend project

npm install -g create-react-app
create-react-app <your_project_name>

2. Create a free account at firebase.google.com

3. Click Get Start and Add Project

4. Create your project app name. Enable Google Analytic. Default Account for Firebase. Create project

5. Install Firebase CLI

npm install firebase-tools -g

6. Login to Firebase

firebase login

7. After login confirmation, cd into your project folder and run

npm run build

8. After the build folder in created inside your react project, run

firebase init

9. Select hosting. Press SPACE to select and ENTER to confirm.

10. Select the firebase project your wish to connect. Select the new project that you just created in Step 4.

11. For the next couple of questions type in build, yes, no

As for the Github Question, you can type yes or no. As for now type no

11.5 (Optional) Run firebase emulators:start to emulate Hosting and your backend project resources at a locally hosted URL.

12. Run the deployment

firebase deploy

13. Now you are done. It might take a few seconds to a couple of hours to be fully be deployed on firebase.

Firebase Hosting

https://devcenter.heroku.com/articles/git