Deploying my first app to Heroku

I recently checked off a couple of goals for myself in learning web development, deploying an app to Heroku and building an app that uses the Smartsheet API. I was able to do it with one project, a Smartsheet based quiz game. It has a familiar style and game play to a certain well known and trademarked game show. I originally made this game as a simple HTML page using JQuery to hide and show the questions and answers. It worked for its purpose, but was difficult to maintain since the questions and answers were in the markup. If you wanted to edit the game you had to go into the HTML. I also didn’t have it hosted anywhere so to use it you had to share a folder and open the index.html file.

I started to think how it would be a great project for an app hosted somewhere that could have some kind of database of questions and answers to create a new game board each time you played it. Naturally, I thought it would be great if that collection of questions could be stored in a sheet in Smartsheet. At the time there wasn’t a method to use the Smartsheet API with JavaScript, but I found out that a JavaScript SDK was being built using NodeJS. So, I patiently waited and once it was available started working out ideas for how the app could work.

I took some time to get to know the Smartsheet API and how to work with it in Node. Once I felt comfortable I began working on the app. During this time I also worked on learning how to build apps in Express which I used in the project. It is an Express app built on top of Node with Jade, or I guess I should say Pug now, for the view templates. As I’ve been working on my learning to write code I have come to really enjoy working on back end development work over front end. The more I learn about HTTP requests and piping data into streams the less I am interested in writing click events or the hex values of colors. The process to pull the data from Smartsheet and randomly build the object for the game board was a really fun logic problem to solve.

But, I guess you can’t call yourself a full stack developer if you can’t write some CSS to go along with your POST requests. Once I had the project done and functioning it was time for the fun part of deployment. I chose to put my app up on Heroku. I had a little experience with deploying apps there before, but nothing I built myself, only apps from tutorials. It is really simple to deploy to Heroku as they make it really easy. I published the app and visited the url to see the dreaded “Application Error.” I should note that I attempted to do this deployment on a morning before work. I finished up the functionality and layout of the app the night before. I thought about publishing it then, but in the interest of getting a good night of sleep I chose to not do it. I woke up the next morning with it still on my mind and had the great idea of deploying the app over breakfast. I started troubleshooting the errors and almost forgot to go to work as I got so involved in research. I ended up bringing my laptop to work to finish it up in my free time.

Looking at the app I realized I hadn’t updated my port to the environment variable so that it loads to the assigned port. Instead it was still going to port 3000, which I was using for testing. I adjusted my app.js file and updated the app on Heroku, but still got the error. Looking at some support docs I found some mention of supported versions of Node and since 6.0.0 had just come out my version of 5.x didn’t look to be supported anymore. I updated my version of Node and the app still worked locally, so I pushed that change to Heroku. This allowed me to load the first page, but the game board failed with the same error.

Looking at the app logs I saw it wasn’t finding needed environment variables. I remembered that I am using dotenv to set some environment variables so that I can connect to the Smartsheet API, but keep them out of the files I am pushing up to Github. Call me crazy, but publicly displaying my API access tokens seems like a bad idea. Next, I looked up how to set the environment variables for the server for my access token and everything started working! Once the server could connect to Smartsheet for the data it was able to do everything it needed.

Now the game is up and running. It is awesome to think about how an application I built and designed end to end is on the internet. I definitely learned a lot in regards to Node, Express, and especially Pug (Jade?) since it was my first time using a template language to build out a front end. It also gives me a great idea of where I want to go next in my learning. Now that I’ve got a good understanding of Node and Express I’m looking to start learning Mongo and Angular to complete the rest of the MEAN stack. I’ve joked around with the idea of making apps that work with Smartsheet are like SEAN apps(Smartsheet-Express-Angular-Node). It would be awesome if that became a thing.

If you want to check out the Smartsheet quiz game app you can find it here:

https://smartsheet-quiz-game.herokuapp.com/

And the Github repo is here:

https://github.com/daveskull81/smartsheetQuizGame

I’d totally be interested in any feedback or ideas. I have a list of a few things to add for a next version, but it would be cool to hear what others have to say. Let me know in the comments! 🙂

Something I built is on the internets!

Something I built is live on the internets for all to see, OMG! It isn’t much, but dagnabit it’s true. What I am gleefully kermit flailing over is the website I built, awesomebandname.com. It is a simple site where you can click or tap on a button to be given a random selection from my personally curated list of awesome band names. For the longest time I would hear something and think how it would make a great band name. I started collecting these together into a comprehensive list of awesomeness. At one point I was posting them in a series on an old blog of mine. These posts were always the most enjoyed by my few readers. That blog is no longer with us, but I still kept up the list.

After coming to work at Smartsheet I started keeping them in a sheet as my repository of awesomeness. It is three columns for names, source, and notes. The source column is for if I heard it said by someone else and it wasn’t thought of by me directly. As of this writing there are 183 entries.

I have been teaching myself web development for a couple of years now and I am at that not a beginner, but not quite advanced point where the only advice anyone gives to continue learning is to “just build stuff.” So, this seemed like a great idea for a project. It is really just a simple website rather than a fully fledged app, but it does the thing I built it to do.

Everything is laid out on the page with Bootstrap. The well gets a randomly selected band name placed within it on page load and there is a simple JQuery click event on the button that empties the well, chooses another randomly selected band name, and places that within the well. The random selection is done via a random number selection function that I got from MDN.

The JQuery looks like this:

$(document).ready(function() {
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
$('.nameDisplay').append(bandNames[getRandomInt(0,bandNames.length)]);
$('.nameButton').click(function() {
$('.nameDisplay').empty().append(bandNames[getRandomInt(0,bandNames.length)]);
});
});

The entire thing is two documents, one HTML file and a JS file that is the collection of band names in an array called bandNames. Bootstrap and JQuery are brought in by CDNs. I thought about having all of the band names in the html file to make it all work in a single document, but that didn’t seem worth it and I figure it would only clutter things up. I added a tweet button to make sharing easier and a Google ad, just in case this gets tweeted by Wil Wheaton or some other viral internet craziness type event happens. I figure it couldn’t hurt to get a few ad impressions while I’m at it. I did try to install a Facebook share button as well, but that wouldn’t show up on the page. To be honest, I didn’t spend much time troubleshooting why. I will be leaving that for v2 of the project.

My favorite part of the project is how I create the JS file with the array of band names. In the interest of dogfooding I keep all of the band names in a sheet in my Smartsheet account. Originally I was going to copy and paste the names into a JS file and manually make the array, which would have worked, but would have been boring and tedious. Updating it later on would have bothersome too with the possibility that I could miss one or have double entries. To keep this from happening I employed the Smartsheet API. Recently, the Smartsheet API has been given a JavaScript SDK that is written in NodeJS which just so happens to be the thing I am teaching myself and prefer to work within.

I have already been working with the Smartsheet API for fun so that part was pretty straight forward. I ended up writing a script that pulls down the content of the sheet, stringifies all of the entries, and then concatenates all of that into a file called bandnames.js. I was especially happy when I thought of making it write out the “var bandnames = [“ at the front and ending the file with “];” to finish off the array. Now, when I update my sheet I can run this script and I get a new JS file to put up on my server for the website. No worrying about if I missed one or entered one more than once, just a nice brand new JS file.

I wouldn’t say this project is done yet, but I am proud to say it is a good v1. Next, I need to fix the Facebook share button problem and also figure out why my Google ad isn’t displaying on mobile devices. I may also play around with the layout and overall design. My original intent was to use a Bootstrap theme that makes sites look like they were built in Geocities, but I changed my mind. I may still go back to a sillier design approach to go with the humorous intent of the site.

If you feel like checking it out go to awesomebandname.com. Note, that some of the names may contain some adult language and may be a little NSFW. Enjoy!

UPDATED
This project has been moved to Github! The links in the post have been updated. If you want you can find the project here:
http://daveskull81.github.io/awesome-band-names/

Find out more about the move in the post here.