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 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:
And the Github repo is here:
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! 🙂