How to Deploy Your Full Stack Web Application (Rails Backend & JavaScript Frontend)

Recently, I finished building my first full stack web application, an educational game for learning the US states. Aptly named, GeograBee, I was very excited to show it off to my friends and family. However, there was a problem that needed addressing in order to get my application hosted, how do I host and connect the frontend and the backend?

From here forward, I am going to assume that readers of this blog have already built out a Rails backend and a fully functional single-page JavaScript frontend. Additionally, this blog will assume that your database has been set up with PostgreSQL.

Setting up the backend (Heroku)

With a full stack application, it is important to understand that the frontend and backend will be hosted separately. To begin the process, we will start by getting the backend hosted. If you are like me and you set up your backend as a subdirectory, be sure to navigate into that directory, as we will only be pushing up the backend functionality to Heroku.

For the hosting of the backend, we will be using Heroku, a freemium cloud hosting service. We will be using the CLI for his process. Additionally, I will be using the mac OS.

The first step that you will need to take is to install the Heroku CLI in your terminal. You can do so by entering:

curl https://cli-assets.heroku.com/install.sh | sh

Some potential issues that you can run into could be with what you are using to set up your database. If you are using SQLite in your development, be sure to install the PostgreSQL gem and switch over to it for production. Additionally, I had some issues with the version of Ruby that I was using in development, if this happens for you, simply update your Ruby to a more recent version or use an older version of Heroku.

Next, take a look at your config/environments/production.rb file. It is essential that it includes the following lines:

config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?
// 
if ENV["RAILS_LOG_TO_STDOUT"].present?
    logger           = ActiveSupport::Logger.new(STDOUT)
    logger.formatter = config.log_formatter
    config.logger    = ActiveSupport::TaggedLogging.new(logger)
  end

If you generated your application using Rails, this functionality should already be included in the file, if not, be sure to add the above lines.

Most likely, you will have already completed the next step, but if not, be sure to set up and commit to a git repository. If you have any issues setting up the repository, here is a link to a basic git tutorial.

git init
git add .
git commit -m “first commit”

Now we can finally get into the fun stuff, setting up Heroku. Type the following into your CLI:

heroku create
git push heroku master
heroku run rake db:migrate
// optional -- run heroku rake db:seed

The above creates a new remote master branch with Heroku, pushes your backend to the said remote branch, and then migrates the database.

Obviously, if we were still hosting the backend locally, you would need to run the rails server in order to use your application, since that won’t be an option, we will accomplish this task by creating a Heroku Dyno. You can run the dyno by typing the below into the CLI:

heroku ps:scale web=1

Fantastic! Now that you have your API running, you can check that everything is working properly by entering into the CLI:

heroku open

If you haven’t set up a root route for your rails application, you will need to type in one of your pathways in order to make sure that your API is working properly. If successful, you should be able to view either the application’s empty JSON object arrays or the information that is included in your seed file.

Setting up your Frontend (GitHub Pages)

You’ve officially set up your backend on Heroku, and now it is time to get into setting up your frontend! First, navigate back to your root directory.

Your frontend will be hosted by GitHub Pages. In your browser navigate to GitHub and create a new repository, you will be using this repository for the hosting of your app and it will be directly responsible for connecting your frontend and backend. After creating this new empty repository you can push your code up to it by entering the following:

git remote add origin {https link to your new github repo}
git push -u origin master
// Note, it is important to use the https github link instead of the ssh link.

After you have pushed your code up to the new Github repository navigate to the settings page on Github. This is where you will be setting up GitHub Pages, which will be used to deploy the frontend of your application. Scroll down on the main settings page and change the source for your GitHub pages to either your main or master branch.

Note, some tutorials recommend setting up a new branch called ‘gh-pages’ (this name is mandatory) and using that branch as your source file. Depending on how your application was developed, that may be the best option for you. Given that my original repository was set up as a project for my personal portfolio, I chose to use the master (main) branch as my source. If you do choose to set up your GitHub pages this way, be aware that any changes you push to the master branch will make changes to your active web app.

Additionally, I had originally put my index.html file in a separate frontend subdirectory. If you happened to do that as well, the easiest way to fix the issue is to move the index.html file into your root directory and change the relevant file paths for your JavaScript and CSS.

Connecting your Frontend and Backend

For your final step of the day, let’s tie everything together. Make your way over to the file that you are using to fetch from your server. Now, in the place of the URLs that you are currently grabbing from localhost, change the pathways to your Heroku app backend! An example is included in the photo below:

Congratulations! You have officially deployed your first full stack web application! Given that everything is working properly, you should be able to visit the path provided by GitHub Pages and view your working application!