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.
Top comments (0)