A WebGL Node Server with Synchronised GitHub and Heroku Repos

Yesterday, I discussed a proof of concept for a simple desktop driven 3D geometry WebGL viewer.

I want to enhance it in a number of ways:

Let's start at the top of the list and host the 3D WebGL viewer as a web server on Heroku, just like the recently discussed Heroku hosted 2D SVG server, later also desktop driven.

While doing so, I unexpectedly encountered a completely different important issue to tackle as well, the synchronisation of a GitHub repository with Heroku:

Creating a Heroku Hosted Node.js WebGL Server

For the sake of completeness and my own future reference, seeing that I am repeating them on a pretty regular basis now, here are the commands I step through to generate a new skeleton node server:

heroku login
git clone https://github.com/heroku/node-js-getting-started.git
cd node-js-getting-started
heroku create
git push heroku master
heroku ps:scale web=1
heroku open
heroku logs --tail

The auto-generated node.js app name is nameless-harbor-7576.

In the new skeleton node.js server, I performed the following steps to integrate the previous incarnation of the 3D geometry WebGL viewer code into its new environment:

At this point, the WebGL viewer is already up and running, working just as it did before, when it was just a simple HTML page with some JavaScript in it.

It can be tested at nameless-harbor-7576.herokuapp.com.

I can clone it from the inaccessible Heroku repository to one of my own using

heroku git:clone -a nameless-harbor-7576

In other words, the first step listed above is complete.

That was easy.

Synchronising a Heroku Repository with GitHub

I would like to use Heroku to deploy my app and manage its code in GitHub as usual.

In other words, use GitHub for source code management, releases, change tracking, etc., as usual, and additionally push to the Heroku git repository to deploy it.

The Stack Overflow discussion on heroku and github at the same time explains the issue and suggests various illuminating approaches towards solving it.

After struggling for a while and repeatedly receiving the git error message saying fatal: remote origin already exists, I discovered the useful git remote command:

$ git remote -v
heroku	https://git.heroku.com/nameless-harbor-7576.git (fetch)
heroku	https://git.heroku.com/nameless-harbor-7576.git (push)
origin	https://github.com/heroku/node-js-getting-started.git (fetch)
origin	https://github.com/heroku/node-js-getting-started.git (push)

Aha, the origin is already defined. Of course! That is the Heroku sample folder that I got the code from to start with.

I set up an own new GitHub repo nodewebgl01 and tried to add it:

git remote set-url origin --push --add git@github.com:jeremytammik/nodewebgl01.git

Now git push causes an error:

Permission denied (publickey).
fatal: Could not read from remote repository.
Please make sure you have the correct access rights
and the repository exists.

The setup is interestingly mixed:

$ git remote -v
heroku	https://git.heroku.com/nameless-harbor-7576.git (fetch)
heroku	https://git.heroku.com/nameless-harbor-7576.git (push)
origin	https://github.com/heroku/node-js-getting-started.git (fetch)
origin	git@github.com:jeremytammik/nodewebgl01.git (push)

This works better, defining a new remote location named git – or any other name of my choosing – for my own GitHub repo:

git remote add git git@github.com:jeremytammik/nodewebgl01.git

The result is the following list of remotes:

$ git remote -v
git	git@github.com:jeremytammik/nodewebgl01.git (fetch)
git	git@github.com:jeremytammik/nodewebgl01.git (push)
heroku	https://git.heroku.com/nameless-harbor-7576.git (fetch)
heroku	https://git.heroku.com/nameless-harbor-7576.git (push)
origin	https://github.com/heroku/node-js-getting-started.git (fetch)
origin	git@github.com:jeremytammik/nodewebgl01.git (push)

I can now push to my GitHub repository using this:

git push git master

Now that I understand what is going on and how to fix it, I cleaned it up all the settings like this and restarted from scratch with another new personal GitHub repo named NodeWebGL:

$ git remote -v
git	https://github.com/jeremytammik/nodewebgl01.git (fetch)
git	https://github.com/jeremytammik/nodewebgl01.git (push)
heroku	https://git.heroku.com/nameless-harbor-7576.git (fetch)
heroku	https://git.heroku.com/nameless-harbor-7576.git (push)
origin	https://github.com/heroku/node-js-getting-started.git (fetch)
origin	git@github.com:jeremytammik/nodewebgl01.git (push)
$ git remote remove git
$ git remote remove origin
$ git remote -v
heroku	https://git.heroku.com/nameless-harbor-7576.git (fetch)
heroku	https://git.heroku.com/nameless-harbor-7576.git (push)
$  git remote add git https://github.com/jeremytammik/NodeWebGL.git
$ git remote -v
git	https://github.com/jeremytammik/NodeWebGL.git (fetch)
git	https://github.com/jeremytammik/NodeWebGL.git (push)
heroku	https://git.heroku.com/nameless-harbor-7576.git (fetch)
heroku	https://git.heroku.com/nameless-harbor-7576.git (push)
$ git push git master
Counting objects: 394, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (311/311), done.
Writing objects: 100% (394/394), 252.43 KiB | 0 bytes/s, done.
Total 394 (delta 56), reused 381 (delta 52)
To https://github.com/jeremytammik/NodeWebGL.git
 * [new branch]      master -> master

Et voila, I have the complete copy of the Heroku server code in my NodeWebGL repository.

Whenever I update anything, I can push it to the two repositories like this:

git add app.json
git commit -m "updated name and description"
git push git master
git push heroku master

Come to think of it, I could just have left origin as it was, since it does no harm. I could also have chosen a more illuminating name for my own remote...

This actually takes me back to the beginning of this discussion: now that the code is properly tracked in GitHub, I can start creating releases and stuff, so updates will not interfere with previous versions, and there much less need to create new samples from scratch on a regular basis. Ha!

Up and Running Now

As mentioned, you can see the Heroku app running live at nameless-harbor-7576.herokuapp.com, and the complete updated source code is now available from the NodeWebGL GitHub repository.

The version discussed here is release 1.0.0.1.

Actually, come to think of it, I can also embed the Heroku app right here:

The same instructions and explanations as before apply here as well.

Next: implement an API to drive the viewer directly online from outside, instead of using hardcoded geometry data.