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 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 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 for a while, watched a couple of videos on youtube, 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 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 console and spun up a new node.js app. A simple Google Search pointed me to this easy-to-follow article 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 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.
To get started, you will need to create a repo by the name ".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 and the link to the repo is: https://github.com/ritikesh/todoer.
Thank you for reading.
Top comments (0)