After discussions with Jon, we finally decided to buy the feedbaker.com domain. It wasn’t my first time getting a domain, so that process was a fairly straightforward one. After paying for the domain, I went on to deploy a new DigitalOcean droplet and configured the nameservers and DNS to point to the new instance.
The next hour was spent provisioning the server. These were some things I had to install before getting started with the test deployment:
- compass (used by build scripts to compile sass into css)
Once I got those ready, I proceeded to clone the repo, run the build script and start the server. Everything worked pretty fine, except that the OpenID return url was still hard coded to localhost on my development machine. In order to fix that, I added base_url as a new item in the config files so I can have different values for development and production. After that was done, everything worked well, and I was pretty happy with the results so far.
Spent some time cleaning up the code, fixing several warnings jshint was returning. While doing that, I noticed that jshint was throwing errors that the method confirm() was an undefined global. After reading up more on jshint, I found that I could suppress that error by adding devel: true to .jshintrc (the config file for jshint). However, after some discussion with Jon, we decided that removing the confirm() prompt would provide a better user experience.
In order to further enhance the UX, I also added a loading state when users click to activate or deactivate a poll. Prior to that, clicking on the button would make a PUT request to the API and update the UI with the expected result immediately. However, errors and failures might cause the user to think the action was successfully applied.
To end off the day, I went back to exploring how the app should be deployed. I read about placing a reverse proxies in front of NodeJS and decided to try running the app behind nginx. Also came across node-http-proxy, and might decide to give it a try some time down the road to see which is more suitable.
After spending another hour or so configuring nginx as a reverse proxy (got help from the nginx docs and wiki), I was able to get everything working. Made some changes to the app’s config file to listen only on 127.0.0.1:8080 so users cannot access the NodeJS server directly via feedbacker.com:8080.
Tried running the site through Google’s PageSpeed Insights. After seeing the results, I was advised to cache static content to make pages load faster. I went back and tried to configure nginx to cache static content.
While doing that, I found that the page was loading a non-existent vendor.css. Apparently, the build script added that file in although I did not have any vendor css files. After some investigation, this was a bug caused by grunt-usemin, which was fixed in a later version. After updating the package to a later version, I was able to resolve this issue.
Apart from all these, I also came across and made use of Fiddler — a free web debugging proxy. With that, I was able to introduce a certain amount of latency to the app to simulate real-life use. I found out that the My Polls page shows, for a brief instance, that I currently have no polls, until the APIs are loaded and the page is updated. With this tool, I made some changes to further improve the user experience. I was also able to make use of Fiddler to set breakpoints and manipulate HTTP traffic in real-time.