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:
- Reimplement it as a Heroku-hosted node.js web server
- Provide the geometrical data to display through query string input arguments
- Remove the scaling to the -1 to 1 2-unit box
- Support integer arguments for the geometry definition
- Add support to define rendering colours
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
- Synchronising a Heroku Repository with GitHub
- Up and running now
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:
- Added index.html and twgl-full.min.js to the public subfolder
- Renamed index.js to server.js
- Updated Procfile and package.json
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 [email protected]: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 [email protected]: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 [email protected]:jeremytammik/nodewebgl01.git
The result is the following list of remotes:
$ git remote -v git [email protected]:jeremytammik/nodewebgl01.git (fetch) git [email protected]: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 [email protected]: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 [email protected]: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.
Subscribe