Launching Rails/React App to Heroku: Part 1

I finally completed my personal portfolio page after much careful fine tuning to make it presentable enough for future employers. I had no trouble constructing the website with React, but since CSS is not my strongest suit it took some time to edit so my picture wasn’t invading my short bio and my project cards were evenly displayed instead of three on top of one. It was mostly a lot of flex boxes being inserted.

I was considering where to launch it, initially trying GitHubPages but since I wanted to be fancy and use a Ruby on Rails backend to render my projects which is not supported on GitHubPages, that didn’t seem a viable option. I then figured Heroku was a fine option when deployed my Shelf app, so I thought I would give that a try. This has been my experience and maybe some advice on how to prepare an app for its first deployment to Heroku, including converting from SQLite3 to PostGreSQL.

This was one of my first experiences using PostGreSQL, and I had to convert my database so it can be handled through the query language. Except when I ran the command to create a rails database, I was receiving an error that the database could not be created because the host could not be found. What I came to learn was that a PostGreSQL service must be started in order to create/convert a database (not a problem), which also included supplying a username and password in the database.yml page, where I had updated default adapter from sqlite3 to postgresql.

sudo service postgresql start
sudo service postgresql stop

default: &default
  adapter: postgresql
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  timeout: 5000
  username: your-username
  password: your-password

Did I remember my postgres password when I set it up who knows when? Of course not. And changing the password was a little more of a hassle than I bargained for. It involved making changes to the pg_hba.conf file through the terminal to solve an issue with grant peer authentication.

# Database administrative login by Unix domain socket 
local all postgres md5 
# TYPE DATABASE USER ADDRESS METHOD 
# "local" is for Unix domain socket connections only 
local all all peer 
#local all all md5

Once I was able to alter the default password, the rails was finally allowed to create a database with PostgreSQL.

Now my backend was prepared to be launched onto Heroku! At least that’s what I thought, until the push to Heroku resulted in it telling me my Ruby file was out of date. And trying to update through WSL/Ubuntu took a little bit longer than I wanted to spend on it. I thought I could download the installer manually onto my computer, but that wouldn’t update the version on WSL Luckily I had already installed the Ruby command line tool rvm which made it much easier to update Ruby.

sudo apt-get install libgdbm-dev libncurses5-dev automake libtool bison libffi-dev
gpg --keyserver hkp://keys.gnupg.net --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3 7D2BAF1CF37B13E2069D6956105BD0E739499BDB
curl -sSL https://get.rvm.io | bash -s stable
source ~/.rvm/scripts/rvm
rvm install 3.0.1
rvm use 3.0.1 --default
ruby -v

Finally, after multiple pushes to Heroku to no avail, the Backend of my portfolio had been accepted and created into its own website. I was so excited even if it was just data that I went to the website...and found nothing. Page did not exist on the web, even if it existed on my Heroku dashboard. I had been following along with this blog post on setting up a Ruby/React app on Heroku, and it stated that they had a similar issue, caused by no root being defined in routes.

root 'projects#index'

Once my route were properly formatted and pushed up to Heroku branch, the website had all the data I needed. JSON formatted data never looked so pretty before. All was left to do was to push my frontend React application to Heroku and sharing the link of my portfolio for all to see. Unfortunately that is easier said than done as my app still sits locally in my computer awaiting to be launched. It can't find the index.html file even though I can see it plain as day. Hopefully I will solve this issue by next week. Wish me luck!