Guide to Deploy Vanilla JS/ReactJS + Rails

Deploying website can be quite annoying, especially if you’re a first timer. Here’s a guide to walk you through the process.

Photo by Marvin Meyer on Unsplash

I successfully deployed my website for the first time a month ago, but it took me a whole week to figure out, as I encountered a lot of problems along the way. I would walk through all the steps depends on your need. I will also provide a content page, so you can guide yourself to respective guide.

Table of Content

• Preparation before Deploying to Heroku
• Deploy Ruby on Rails app to Heroku
• Deploy Vanilla JS to Github Pages
• Deploy ReactJS to Heroku

Preparation before Deploying to Heroku

Before we start:

• Please make sure your frontend and backend folders are in different repositories (at least for the purpose of this guide). I made the rookie mistake when I created my first full-stack website. Here’s a guide from Github on how to separate a subfolder from the repository. Also, name your frontend and backend repo differently. For example, your frontend repo name would be hello-world while your backend repo name would be hello-world-backend or hello-world-api .
• Migrate your database from SQLite to PostgreSQL, if you have your Rails API set up with something else.
• Install Heroku’s Command Line Interface (CLI) to create and manage your Heroku apps directly from your terminal. Here’s the guide from Heroku.

Preparation: Migrate your database from SQLite to PostgreSQL

If your Ruby on Rails database is set up as PostgreSQL when you first created, you can go to the content page and select the section you want to go.

For future reference, if you intend to deploy to Heroku, create your Rails app with the following:

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

Alright, let’s go!

1. Go to your Gemfile and put gem 'pg' . Then comment out gem 'sqlite3' . After that, run bundle install .

2. Go to config/database.yml and replace your SQLite3 database names to PostgreSQL.

From

With SQLite3

To

Copy this and change the “your-app-name” to the name of your app (actually it doesn’t matter, but it’s easier to read)

3. Create + Migrate + Seed

• run rake db:create
• run rake db:migrate
• run rake db:seed (only if you have a seed file)

Tada! You are done! (Top)

Step 1a: Setting up Rails API Backend 🎈

As Rails 6 no longer has a static index page in production by default, we need to manually create a welcome page as the root page when we’re creating a new app. Here’s a Heroku guide for reference.

1. We’ll create a welcome controller page

$ rails generate controller welcome

2. We’ll add an index page in the file app/views/welcome/index.html and write:

$ <h2>Welcome! </h2>

Honestly, anything would work, as long as you got something there.

3. Now, we need to make a Rails route to this action. We’ll edit config/routes.rb to set the index page. In file, on line 2 add:

$ root 'welcome#index'

According to the Heroku guide, you can run rails s to verify the page. But I assume since you have a (almost) finished web app, there’s no need to do this. At least I didn’t 👀.

(Top)

Step 1b: Deploying Rails API Backend 🔚

1. Make sure you are on the directory of your Rails backend by running cd whatever-you-name-your-rails-backend
2. If you have API key for your application, you can go to your app’s setting on heroku.com and scroll down to Config Vars.

You can also set in Heroku CLI

$ heroku config:set API_KEY=put-your-api-key-here

Confirm variable is set, by running:

heroku config
GITHUB_USERNAME: joesmith
API_KEY:   your-api-key-here

OR

heroku config:get API_KEY
your-api-key-here

I personally like to set it up on heroku.com, since it’s more straightforward.

(If you come from ReactJS setup, click here.)

3. Let’s create Heroku app!

$ heroku create your-backend-app-name

4. Initialize Heroku git remote.

Okay, normally you would do git init . But I always got something like ‘the git repository is already existed’. So I usually go straight to:

$ heroku git:remote -a your-backend-app-name

Also, I would suggest going to the Deploy page of your Heroku app. First, you can verify if you successfully created the Heroku app or not. Second, it would show you how to initialize a Heroku git remote.

5. Add, commit and push your application to Heroku git remote (I also copied the following from the Deploy page of the Heroku app)

$ git add .
$ git commit -am "whatever you want to write here"
$ git push heroku master (or main, see Note1)

6. Migrate your database (no need to run heroku run rake db:create ) and seed your database (only if you have)

$ heroku run rake db:migrate
$ heroku run rake db:seed

Note1: if you are using VS code, you can look at the bottom left corner to see if your default branch is named as master or main.

7. You can check the success of the deployment by entering heroku open . It would show you the page can't be found .

Don’t worry :)

Don’t panic! Simply enter one of the endpoints (name of the models you created) after the backslash.

Enter one of the endpoints and there you go!

I would suggest not to close the tab right away if it works. You would want the link later on for the frontend.

Note: If you updated something in your backend in the future and you wanted to update your heroku app, you need to git add . , git commit -m "whatever message" and make sure not only you push to your git repository, but also to your heroku remote repository with git push heroku master (or main) .

If you are deploying Vanilla JS, click here.

If you are deploying ReactJS, click here.

Note2: If you created this app probably at least a few months ago (as of Feb 2021), you may see the following:

What I did was that I deleted the original Heroku app from Heroku.com (Settings -> scroll to the bottom -> Delete App). Then I recreated the Heroku app with:

$ heroku create your-backend-app-name --stack heroku-18

Then you can start over from here.

(Top)

Step 2–1: Deploy Vanilla JS to Github Pages 🐈

(Deploy ReactJS here)

1. Remember I’ve mentioned earlier not to close the tabs after you check the success of your deployed backend? Since you’ve already deployed your backend to Heroku, make sure to change all the http://localhost:3000 to the URL of the deployed backend.

If you closed the tab (’cause you are too excited? I get it.), that’s okay. You can either enter heroku open in your backend terminal, or go to heroku.com, click open app on the main app page, and copy the link. It should look like:

https://your-app-name-here-api.herokuapp.com/...

something like that!

Quick Note: make sure be consistent with the backslash. Sometimes you may have a double backslash with the template literals that you don’t realize.

2. Setup Github.io pages

You can follow the instructions on Github pages and change from ‘User or organization site’ to ‘Project site’.

I’ll guide you regardless.

3. Go to your Github repository for your frontend and go to Settings.

4. Scroll down to Github Pages section and switch Branch from “none” to “main” (or “master”). Then, click “Save”.

As you can see from the screenshot, there is a link available once you hit the “Save” button. You can go to the website and check out your newly deployed website! Also a quick note, if you are having a hard time seeing your backend, it’s because it takes a while for Heroku to load the data (one of the cons of deploying to Heroku). Just give a bit patience.

If you updated your web app in the future, you can simply just add, push and commit. That would automatically update your website.

(Top)

Step 2–2: Deploy ReactJS to Heroku 🌴

(Deploy Vanilla JS here)

1. If using React Router, create file in the root directory named static.json and write:

$ { "root": "build/", "routes": { "/**": "index.html" } }

In case you are wondering why that’s the case, you can check out this Stack Overflow post.

2. If you have an API key, please refer here.

3. Remember I’ve mentioned earlier not to close the tabs after you check the success of your deployed backend? Since you’ve already deployed your backend to Heroku, make sure to change all the http://localhost:3000 to the URL of the deployed backend.

If you closed the tab (’cause you are too excited? I get it.), that’s okay. You can either enter heroku open in your backend terminal, or go to heroku.com, click open app on the main app page, and copy the link. It should look like:

https://your-app-name-here-api.herokuapp.com/...

something like that!

Quick Note: make sure be consistent with the backslash. Sometimes you may have a double backslash with the template literals that you don’t realize.

4. Since this is a React app, you will need to create the Heroku app with a buildpack. Otherwise, Heroku will deploy the deployment build, instead of the optimized production build.

$ heroku create your-app-name-here --buildpack https://github.com/mars/create-react-app-buildpack.git

5. Now that you have created the app, let’s initialize Heroku remote. Same as your backend app, I would suggest going to your app’s Deploy page and follow how to initialize the git.

$ heroku git:remote -a your-frontend-app-name

6. Last but not least, you can add, commit and push your app to Heroku. ✨EXCITING✨

$ git add .
$ git commit -am "whatever you want to name here"
$ git push heroku master (or main, already explained above)

Note: Same as your backend, if you updated something in your frontend in the future and you wanted to update your heroku app, you need to git add . , git commit -m "whatever message" and make sure not only you push to your git repository, but also to your heroku remote repository with git push heroku master (or main) .

Congratulations!!! 🎉

Yay, congrats! You have successfully deployed your website (both frontend and backend) to Heroku! Give yourself a pat on the back, or do the happy dance with Snoopy.

If you encountered any errors, make sure you read the errors carefully. That would guide you what went wrong. I remembered going through a few errors, like forgetting to create the app with the correct buildpack 🎒, etc.

If you are having a hard time understanding the errors, you know who to turn to… yep, our best friend, Google. You got this :)

(Top)

Resources:

Getting Started on Heroku with Ruby

Deploying React with Zero Configuration

Sqlite3 to PostgreSQL on Rails App

GitHub Pages

I followed these two amazing blogs as my guide when I deployed my websites:

Deploying Rails API Backend + React Frontend App to Heroku

How to deploy a Rails API with a Vanilla JS frontend using Heroku and Github Pages