Upload Ruby on Rails App to Github Pages

How to Deploy a JavaScript-Rail App on Heroku and GitHub Pages

For a codenewbie like myself, sometimes the seemingly-simple procedural tasks like setting up environments and deploying apps can seem way more complicated than creating amazing applications from scratch. After a lot of trial and mistake and reading multiple articles with complicated configurations, I wanted to share this unproblematic process for deploying a JavaScript app with a Rails API backend.

Disclaimer: The intended purpose of deploying this detail app is just to share and test my projection on the web for free. If yous are deploying an app for true production, I would recommend a more comprehensive hosting solution.

The Claiming

I created Watershed Monitor a few months back, and initially tried to deploy it using Heroku equally I had for my Rails app. I immediately ran into a number of bug. I quickly realized my application was actually Ii stand up-lonely applications, including a Rails API backend with a Postgres Database, and a simple JavaScript frontend (unmarried-page awarding built upon an index.html file).

File Structure

Unfortunately, I had congenital and saved them in a single repository, which was structured like this:

I had created the backend folder using the rail new command, and had manually created the frontend folder with frontend files including the index.html file, a styles.css file, and an src folder including three javascript files. Earlier doing anything related to deployment, I branched the repo so that I could hands revert to a previous version in instance something went wrong.

Deploying the Backend Folder to Heroku

To deploy the Rails app, I used the following commands from the control line, in the root directory of the application.

1. Log into Heroku from the command line, and follow the prompts:
   heroku login

2. Initiate the new repository for Heroku deployment:
   git init

3. Create and name the Heroku repository. I recommend tagging "-api" to the name so you know it is an api.
   heroku create NAME_OF_APP_API

4. Add together and commit your changes:
   git add .
git commit -yard "first commit"

5. Push your commit to Heroku master. This will be washed in different means depending on your file construction:

If your Rails API is in its own standalone repository:
git push heroku master

If your Runway API is in a folder within the root directory (as mine is):
git push --force heroku 'git subtree split --prefix NAME_OF_BACKEND_FOLDER HEAD':main

This command splits the Runway API backend directory from the residuum of the repository, and pushes but that sub-tree to Heroku for deployment.

Next, open your API using the command line, or navigate to the Heroku url that is provided to you:
heroku open

Resetting the Postgres Database

At this signal, you technically have a Heroku app up and running, but y'all likely will non run into whatever data if you navigate to the site. You will offset need to reset your database.

1. Create the Database:
   heroku rake db:schema:load (Notation: yous may be able to use heroku rake db:create, but this acquired errors for me)

2. Run the Migrations and Re-seed the Database (if applicative)
   heroku rake db:migrate
heroku rake db:seed

Commit and Re-button the Changes to Heroku

Anytime you make changes after the initial deployment, the following commands volition save and push button the new updates to your deployed app.

git add .
git commit -m "new commit bulletin"

Apply the same git push button control yous originally used:
git push heroku master
OR
git push --force heroku 'git subtree divide --prefix NAME_OF_BACKEND_FOLDER Caput':master

Cheque the Browser

Employ 'heroku open' to check that your json data is appearing correctly in the browser. Mine looked like this:

Important Note: If you did not fix a root road in your config/routes.rb file, you may meet this fault message, and that is fine! You could fix this by setting a dummy root route in config/routes.rb. However, if yous navigate to an alphabetize or show folio that is divers in your routes, yous should be able to see your information, and the application will still piece of work.

Deploying the Frontend Using GitHub Pages

Beginning, give yourself a pat on the back, considering you only finished the hardest part! To deploy the front, after a pocket-sized amount of setup, you can only enable GitHub Pages to display your alphabetize.html file.

Revise the Fetch URLs in the Frontend Files

You likely take a number of functions in your application that fetch data from your API, and all of those volition need to be changed to match the Heroku URLs. In my case, I had already defined a constant for my backend URL, then I just needed to update one URL, changing information technology from localhost:3000 to my new URL below:

                          // ******************VARIABLES***********************     // const BACKEND_URL = "http://localhost:3000"     const BACKEND_URL = "https://watershed-monitor-api.herokuapp.com/"                      

If y'all did not set your URL as a constant, y'all would need to search for and change every instance of the URL (then retrieve to set up a abiding in your next app). Now is a great fourth dimension to test the app and make sure everything is even so working before y'all commit changes to your GitHub repository.

Enabling Github Pages

Finally, the magic happens! At this point, all you need to exercise is update the settings in your GitHub repository to display your site. The process is described in the documentation, and you tin can skip alee to their Step four since y'all already take your app created.

1. Click on the Settings tab and scroll to GitHub Pages (at the bottom).

2. Choose a co-operative that you want to deploy (most likely Main).

3. Navigate to the URL following this pattern:
   http://username.github.io/repository

Important Note: If your frontend and backend are saved in the same repository, you will need to change the URL accordingly to admission your index.html site.

When I navigated to https://jessesbyers.github.io/watershed-monitor, all I saw was my readme file. But after drilling down into my frontend folder, the site displayed and functioned just as I had hoped:
https://jessesbyers.github.io/watershed-monitor/watershed-monitor-frontend/

I hope this helps you get your JavaScript-Track applications up and running with minimal frustration...only if something isn't working, or you've found other approaches that work well for you, drop a note in the comments!

funkbeas1989.blogspot.com

Source: https://dev.to/jessesbyers/how-to-deploy-a-javascript-rails-app-on-heroku-and-github-pages-523l

Share this post