Deploying Simple Game App to Heroku (Rails backend, jQuery Frontend)

I’ve written before about deploying an app to Heroku with a Rails backend and a React frontend.

Now I’m gonna do the same thing for an app with a jQuery frontend.

step 1: baseUrl for your API calls

On your frontend, if you haven’t already, get the base URL of your API calls in one variable.

For example, instead of the url line of your Ajax call (or Fetch line if you’re using Fetch) looking something like this:

url: 'http://localhost:3000/games/highscore',

and

url: 'http://localhost:3000/games/questions',

create a new variable:

const baseUrl = 'http://localhost:3000'

and change your API calls to look like this:

url: `${baseUrl}/games/highscore`,

and

url: `${baseUrl}/games/questions`,

This will come in handy later, when you’ll be pointing your URLs to Heroku, so you’ll only need to change one line.

step 2: change Rails db from SQLite3 to PostgreSQL

By default, Rails apps are build with SQLite3 databases.

To get your Rails app on Heroku, you’ve gotta use a PostgresSQL database.

I found this Medium post helpful for this process.

To recap some of those steps:

  • open you’re config/database.yml file and change it look like this:
development:
adapter: postgresql
database: trivia_boyz_api_development
pool: 5
timeout: 5000
test:
adapter: postgresql
database: trivia_boyz_api_test
pool: 5
timeout: 5000
production:
adapter: postgresql
database: trivia_boyz_api_production
pool: 5
timeout: 5000

The database lines above should use the name of your app, obviously.

  • in your Gemfile, comment out your gem ‘sqlite3’ and add the gem for ‘pg’
# gem 'sqlite3'
gem 'pg' #for postgres database
  • run bundle in Terminal, since you’ve made changes to your Gemfile
  • make sure you do gem bundle pg just to make sure you’ve got Postgres
  • since you now have a new database, run rake db:reset
  • make sure your new database is working by testing your app locally by running rails s and whatever you’ve gotta do on the frontend
  • if it’s not working, sorry :( hopefully you can debug it and get it working
  • if it is working, great! Commit and push to Github.

step 3. Heroku

  • now it’s time to login to Heroku, via the website.
  • create a personal app on Heroku for your project.

We’ll be treating the Rails backend and the jQuery frontend as two separate apps.

Let’s focus on the backend first.

Since my app is called Trivia Boyz (the name my teammates and I initially gave our app, which ended up having nothing to do with trivia, but the dumb name stuck), I named the backend app trivia-boyz-api on Heroku.

  • follow the Heroku ‘deploy using Git guidelines’
  • login to your Heroku account via Terminal, and follow the prompts to create a new SSH key
  • run heroku git:remote -a trivia-boyz-apito create a new git repo
  • deploy your app to Heroku by running git push heroku master
  • now create your database on Heroku by running heroku rake db:migrate
  • if you have a seed file, run rake db:seed

Hopefully, if you run your frontend server and check your app in the browser, it’s now working via it’s new API pointed at Heroku!

step 4: hosting your frontend on Heroku

Now that our locally hosted frontend app is working while pointed at our Heroku hosted backend API, let’s get our frontend hosted on Heroku as well.

Once again:

  • login to Heroku, via the website.
  • create a personal app on Heroku for your frontend.
  • follow the Heroku ‘deploy using Git guidelines’, same as we did for the backend app
  • if, like me, you get an error after running git push heroku master, it may be because your jQuery frontend doesn’t specify a buildback
  • i’m gonna go with Node.js since jQuery and Node are all Javascript
  • make sure you have Node and NPM installed locally by running:
node -v
npm -v

You should see some version numbers returned for each of those commands.

As stated on Heroku, we need a package.json file in our root directory. Run:

npm init — yes

to create that file.

Then install the dependencies by running:

npm install

Now set your buildback by running:

heroku buildpacks:set heroku/nodejs

And let’s specify in that package.json “scripts” section:

"start": "node server.js"

Also add the “engines” section to your package.json file:

"engines": {
"node": "7.8.0",
"npm": "4.2.0"
}

Use whatever versions you have installed locally.

Remember to add and commit your changes since you’ve created that package.json file, then try running git push heroku master again.

Hopefully you’ll see somewhere in all that text: “Build succeeded!”

That looked promising.

I also got the message: “https://trivia-boyz-client.herokuapp.com/ deployed to Heroku”

Sweet. But checking that URL gave me the message:

“Application error — An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details.”

Hmm. My logs told me lots of things.

My app still worked locally when I ran python -m SimpleHTTPServer but running npm start from Terminal gave me a bunch of errors about missing modules and whatnot.

Aside:

Maybe I didn’t need to use Node? I didn’t think Python was the answer, but maybe there was something else I could do to get my simple HTML / CSS / JS site up and running on Heroku.

I did some googling and came across this: https://medium.com/@topspinj/deploying-plain-html-and-js-onto-heroku-4e24023c1d08

However, I’d already gone this far with Node, so I stuck with it…

My node_modules folder kept getting created as an empty folder. I’d keep deleting it and reinstalling it, and it was empty every time, despite people on Stack Overflow saying sometimes that did the trick, as in here:

Removing the entire node_modules folder and re-installing worked for me:

rm -rf node_modules
npm install

But I kept seeing the error:

Failed at the trivia_boyz_client@1.0.0 start script ‘node server.js’.

I figured since I was using Node, I should be able to run npm start and see my app working locally, and if I had that working I should be able to get it working on Heroku too.

This Stack Overflow post got me half way there, as in I was able to run Node and see my app working locally.

To quote the most upvoted answer, I did the following steps:

https://stackoverflow.com/a/8427954/6893951

Which allowed me run node server.js then go to http://localhost:8080

and see my app running and working in my browser.

Which is exactly what I was able to do before, but now I was doing it with Node.

Note: running npm start worked locally as well. Before running that command kept giving me errors. Now it was working!

BUT: my app still wasn’t working on Heroku. Whhhhyyyyy????

In the console I was getting the following error:

GET https://trivia-boyz-client.herokuapp.com/ 503 (Service Unavailable)

Heroku’s error pages told me:

Heroku’s HTTP router serves unstyled HTML with HTTP status code 503 (Service Unavailable) when your app encounters a system-level error, or while maintenance mode is enabled.

Running heroku local also worked, but ran a server on 8080 instead of 5000. I wasn’t sure if that was part of the problem.

Since Heroku kept looking for a damn Procfile I gave my app a damn Profile in my app’s root directory with the following line:

web: node server.js

but that’s didn’t seem to change anything.

I hadn’t added a key so I ran:

heroku keys:add

And said yes to uploading my SSH public key, but that didn’t fix anything either. Whatever was a boy to do.

Running heroku ps kept telling me:

web.1: crashed

Likewise heroku logs kept telling me:

at=error code=H10 desc=”App crashed” method=GET path=”/” host=trivia-boyz-client.herokuapp.com request_id=bb078593–21ee-4658-ae42–14961faa6949 fwd=”66.65.52.11" dyno= connect= service= status=503 bytes= protocol=https

Oh boy.

Why the 503?

Why the crashing?

Next I tried heroku restart, and kept running heroku ps in Terminal while in the browser I waited for an error.

Terminal kept telling me it was restarting till it told me it crashed :(

Are you still here and still reading this? You deserve some kind of award.

The problem was with my server.js file.

I’m sure there’s a better clean way to do all this than my Frankenstein spaghetti code but how I finally got my app working is by changing this:

connect().use(serveStatic(__dirname)).listen(5000, function(){
console.log('Server running on 5000...');
});

to this:

connect().use(serveStatic(__dirname)).listen(process.env.PORT || 5000, function(){
console.log('Server running on 5000...');
});

That ‘or’ statement — process.env.PORT || 5000— was necessary, because Heroku sets a dynamically assigned port number to your app.

And it WORKS!

toasty!

step 5: Bask in the Glory of Your Hosted Web App

This is a fun, dumb project I worked on with some classmates a while ago, and it still needs some work, but I dig it.

Check it out here:

https://trivia-boyz-client.herokuapp.com

Click as many four letter words as you can in 15 seconds.

Enjoy!