🚀 How to deploy and build a static website to Heroku

It's not a trivial tutorial, but rather a story how I was able to build & deploy my static website to Heroku.

Recently I was working on a side project, it was a landing page for an online hackathon platform called Hacker Hype. This time I wanted to switch from DigitalOcean and give Heroku a try. I have previously been using Heroku to deploy my open source stuff, so I had a feeling that it should not be that hard to deploy a simple static page. Okay, maybe I spoke too soon, but it took me some time before I accomplished it.

First of all, I hosted the source code on my private repository on a GitHub. In case you haven't used Heroku, it has a dead simple feature which allows you to orchestrate a deployment directly every time you push something to the repository.

In the repository I have 2 branches master and develop, obviously. I used master branch for automatic deploys. So every time I was finishing something, all I've needed is to merge develop to master. Okay, at this stage I have setup everything I needed to have my development workflow going.

Next step was to actually be able to build the scss and js files into the production-ready project using Gulp. From there I would need to configure http-server in Heroku's Procfile to serve my static files. This part took me a bit of the time to figure out. Configuring Procfile was the actual challenge. I even posted a question on StackOverflow as I was confused how I can run multiple commands in a Procfile for Heroku.

So in order to build the project, I've required next commands to be executed

• npm install
• gulp build (will generate the /public folder)
• http-server (will serve /public folder by default)

I've tried several ways of configuring Procfile, yet nothing worked for me.

• web: npm install; gulp build; http-server
• web: npm install & gulp build & http-server

I've spent a bit of time researching and came up with the answer. By default, Heroku is installing all packages from the package.json, so npm install is no longer required. Then I needed to run gulp build and http-server. For that I've added "postinstall" : "gulp build" to package.json so my Procfile was a one line file with just one command - web: http-server. Simplifying things have solved the problem! Now I was able to deploy and build my static website on Heroku! 🎉🎉🎉

Let's summarise the process. I have a static website and its files are compiled via gulp. Then Heroku’s Procfile is configured in order to serve static html/css/js files using http-server. This results in a nicely synchronised development and deployment flow.

Originally posted on my blog.