Deploying To Heroku Rails API back end and React front end

Intro

In this blog, we will go over the ways to deploy to Heroku both rails API and React front end.

Rails API

First, we need to create a react app to skip the steps below I recommend installing it with postgresql. Starting off type

rails new your-app-name-here --api --database=postgresql

In the terminal or if you have normal rails that's okay too.

--Steps you can skip if you have the line above--

Step 1

You want to delete anything that has to do with sqlite3, head over to your gem file and install

gem 'pg'

Make sure you deleted

gem 'sqlite3', '~> 1.4'

Step 2

In the config/database.yml Change the default adapter to
postgresql, and the development database, test, and production and delete everything that has to do with sqlite3 and replace it with

app_name_development, app_name_test, and app_name_production

To their specific category.

Step 3

Delete your Gemfile.lock then bundle install. this will help reduce errors in having any SQLite data in your Gemfile.lock.

Continue from here if you launched rails with --database=postgresql.

Step 4

In your terminal type Heroku login this will enable you to log into the Heroku server. after, go ahead and create an app in Heroku or you can do Heroku create <your app name> in your terminal.

Step 5

Run rails db:create to create your new database.

Step 6

Run

git add .

git commit -m "your message"

heroku git:remote -a <your App name>

git push Heroku master

Step 7

Run rails db:migrate and as well as Heroku rake db:migrate you can do the same if you have seeded data.

--And that's the deployment steps for Rails API--

Deplying React Front End

Step 1

This part is pretty simple create your react app as so


npx create-react-app <your app name>


Step 2

In this step log into Heroku and do.

heroku login

this will log you into the Heroku server.

Step 3

Heroku create <your app name>

this will create your app.

Step 4

run

git add .

git commit -m "your message"

heroku git:remote -a <your App name>

git push Heroku master

this will go and push your app to Heroku and deploy it.

Finally

Enjoy your deployed app! for your front end to connect to your back end make sure you copy the restful route Heroku gives you for you app link.