DEV Community

Cover image for Deploying To Heroku Rails API back end and React front end
Bryanjazo
Bryanjazo

Posted on • Edited on

3 1

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay