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/publicfolder) -
http-server(will serve/publicfolder by default)
I've tried several ways of configuring Procfile, yet nothing worked for me.
web: npm install; gulp build; http-serverweb: 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.
Top comments (2)
Dude! I can't thank you enough. I was stuck trying to get this to work for HOURS!! The Procfile usage of http-server was the key for me. Many, many thanks, good sir!
You are welcome :)