[How to] : Publish and Host your sassy front-end app for free
Tags: javascript, vue, webdev
Published: 2018-04-16 20:45:54

---
title: [How to] : Publish and Host your sassy front-end app for free
published: true
tags: javascript, vuejs, webdev
canonical_url: https://medium.com/@ritikesh/how-to-publish-and-host-your-sassy-front-end-app-for-free-556296e4b709
---

![](https://cdn-images-1.medium.com/max/400/1*zyNSb0UXhP8TfxYbj-GNWg.png)<figcaption>source: <a href="https://vuejs.org">https://vuejs.org</a></figcaption>

Just like everybody else in the dev community, I wanted to learn some of the "modern front-end Javascript libraries" to remain relevant in the ever-changing world of Web technologies.

After months of back and forth, reading various opinion pieces, [this article](https://medium.com/javascript-scene/top-javascript-libraries-tech-to-learn-in-2018-c38028e028e6) helped me decide to go ahead with Vue.js. For those uninformed, vuejs is one of the big 3(React, Angular and Vue) front-end frameworks of today's world and has been [one of the most popular](https://medium.com/javascript-scene/top-javascript-libraries-tech-to-learn-in-2018-c38028e028e6) for 2 consecutive years now. Since there are many posts covering vuejs and other Javascript trends, I will try to cover a not-so-familiar topic in this post.

I started playing around with [vue.js](https://vuejs.org) for a while, watched a couple of videos on [youtube](https://www.youtube.com/watch?v=Fa4cRMaTDUI&list=PLWKjhJtqVAbnadueQ-C5keMQQiQau_i0D), and had an idea for building a demo app(you guessed it right, a todo-list). While the official docs does contain a [simple todo list](https://vuejs.org/v2/examples/todomvc.html) in it's examples section, I wanted to try something more complex and something that I've been wanting to use for a while now — a repeatable checklist — in my terms, an Object Oriented to-do list. After a couple of days of hacking, I was able to complete the task and wanted to demo it to the world, cause Yay, I learnt a new front-end library!.

Being primarily a Back-end/Ops guy, my first obvious choice was to "host" the app. So I went to my [Heroku](https://heroku.com) console and spun up a new node.js app. A simple Google Search pointed me to this easy-to-follow [article](https://medium.com/netscape/deploying-a-vue-js-2-x-app-to-heroku-in-5-steps-tutorial-a69845ace489) on how to deploy a static, front-end only vuejs app on heroku. I followed the steps in the article and was able to successfully launch the site. Wohooo. But wait, there was a small problem. Heroku's free tier has a limitation. The allocated dynos(compute instances) would go to sleep if the app stops receiving requests. Of course, there were hacks to avoid these, but to avoid the unnecessary complexities of keeping my app awake all the time, building and deploying code for small small changes, I decided to take an easier route to success.

I had heard of github pages a while back and had hosted my [personal website](https://ritikesh.github.io) on it for quite a while now. Since this was going to be a static only site, I decided to go ahead with hosting it on github pages. For those unaware, github lets you create websites for your open source projects and host them for free. You can learn more [here](https://pages.github.com/).

To get started, you will need to create a repo by the name "<your_github_username>.github.io". An index.html file on this repo will then be served as root at the url "https://your_github_username.github.io". Individual project webpages can then be spun up by creating a 'gh-pages' branch on those repositories. These will then be accessible at "https://github_username.github.io/repo_name".

In my case, the gh-pages branch was a subset of the master branch itself. I first pruned whatever was not required(package.json, vue specific src files, webpack.config and other configuration files). I then copied the build.js file from dist/ and put it inside my public folder and modified the index.html file to lookup for the build.js file inside my public folder instead of dist. After committing the changes and syncing the branch to the remote repository, I was able to access my todolist within seconds. With these minimal changes/effort, I was able to host the app at 0 cost and no maintenance headaches.

For those interested, the app is hosted at [https://ritikesh.github.io/todoer](https://ritikesh.github.io/todoer) and the link to the repo is: [https://github.com/ritikesh/todoer](https://github.com/ritikesh/todoer).

Thank you for reading.