Ways to host single page application (SPA) and Static Site for FREE
As single page applications are in high Demand, here are some ways to host single page applications (SPA) and static site for free.
As Single page applications are in high Demand. And on the new Frameworks allow you to create single page applications, so what are the ways to host single page applications (SPA) and static site for free.
These days the front end and the backend of any application are completely separate. Front-end being Single page application and back-end being completely API centric.
This allows front-end to be Completely Static and API being just Data.
So where to host this static Front End? Here are some ways:
#1 GitHub/Bitbucket/Gitlab Pages
Hosting on the pages features of GitHub or Bitbucket Cloud or Gitlab is very simple. Just create a repository on these respective sites and generally the master branch is ready to be published as the site with domains ending with <your-site>.github.io, <your-site>.bitbucket.io and <your-site>.gitlab.io respectively.
The main benefit of having hosting Static Site or SPA on these Pages like service is the highest availability; 99.99% uptime.
And in few cases, you can configure to use custom domains.
GitHub Pages
For GitHub pages, you can go multiple ways.
docsdirectory inmasterbranchgh-pagesbranchmasterbranch itself
If your master branch has a docs directory, you can go to the repository settings and build the pages on the docs directory.
In other case you can push your SPA or Static Site related code to the gh-pages branch and that will be published to the <username>.gtihub.io/<repository-name>/
In case of publishing master branch, the site structure is plain; you need to have has index.html on the root level of your branch.
Bitbucket Pages
Simple guide to setup the pages on the Bitbucket Cloud is available here: https://confluence.atlassian.com/bitbucket/publishing-a-website-on-bitbucket-cloud-221449776.html
The way to publish the site on Bitbucket cloud is similar to the 3rd case of GitHub pages.
Benefit of choosing Bitbucket is that your repository can be private white site being public and accessible to the internet.
Gitlab Pages
Gitlab pages is a whole new level of having static sites. You can host and tweak your site generation process just like you might do in local machine with jakyll.
Complete ways to harness full potential of Gitlab pages can be seen here: https://docs.gitlab.com/ee/user/project/pages/
#2 Firebase Hosting
Firebase has proved itself to be very versatile platform and it has hosting too. All you need to do is to create-account/signup at Firebase and create a project.
Now download the Firebase CLI on your machine.
npm i -g firebase-tools
Initialize the project
firebase init
Firebase init will create firebase.json file for your project which will have necessary config like public directory, routes, 404s etc. More info at https://firebase.google.com/docs/hosting/url-redirects-rewrites.
Once done, publish the project on firebase; and it will be available as <your-app-name>.firebaseapp.com
firebase deploy
When you run Firebase CLI tool for first time on your system, you will be asked to login; as that process finishes, you can choose the project on which you wanna publish the project and you are done.
You can also connect your custom domain for your firebase hosting project. Read about it here: https://firebase.google.com/docs/hosting/custom-domain
#3 surge.sh
Surge is the easiest and simplest tool to host your site for free, without leaving your CLI.
Just install surge globally
npm i -g surge
And from your project directory, just run surge to deploy. Rest of the details are part of this command which you enter interactively.
surge also works with Grunt pipeline, so you can leave the build process to surge itself.
It comes with basic SSL for the free account as well.
More info at https://surge.sh/
#4 Heroku
Heroku is very popular as free PaaS (Platform as a Service) and can be made to host static site or SPA as well.
You can use https://github.com/heroku/heroku-buildpack-static buildpack to create the project in heroku and specifiy configuration related to project in the static.json and you are done.
More details info can be seen at Getting Started with Single Page Apps on Heroku.
You can also create your static site project add bare minimum server code to make it serve those files as well; for example by using heroku/php buildpack, you will get apache by default and hence you can serve your static site or SPA very easily.
#5 ngrok
Well ngrok is not any cloud based hosting but a tunneling service which tunnels traffic between the ngrok provided url and your specified address.
For this, you need to download the ngrok binary.
Now you can create a site, start your local server and launch following command in CLI:
ngrok http 80
The above command create a ngrok subdomain and start tunneling http from that URL to you system's 80 port.
So you can easily demonstrate the project for shorter time.
#6 Netlify
Netlify is also a great platform to host your site for free. Even with free features, you can host small size site easily.
You can choose more from what is offered here: https://www.netlify.com/
The process to do so is simple and similar to Heroku.
All you need is to connect to your Public Repositories and from there you can launch your builds and host the site for free.
For medium size requirement, this is a great option.
#7 Vercel 9formerly known as now.sh)
Vercel (formerly known as Now.sh or Now) from Zeit is a fast tool to get going in terms of hosting your Site. The sites not just static, but the Node powered as well. Which means you can trigger custom builds for your site.
Setting up is easy:
- Install app from https://zeit.co/download
- Drag and Drop your Project to the tool
- Project is ready for deployment
Or you can follow https://zeit.co/now#get-started for detailed getting started guide for your Node (package.json) enabled FrontEnd/Site
Please provide your valuable feedback/suggestions in the comments below.