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
develop, obviously. I used
master branch for automatic deploys. So every time I was finishing something, all I've needed is to merge
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
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
gulp build(will generate the
/publicfolder 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
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
js files using
http-server. This results in a nicely synchronised development and deployment flow.