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 sites for free?
These days, the front and back end of any application are entirely separate. The front end is a single-page application, and the back end is API-centric.
This allows the front end to be Completely Static, and the API is just Data.
So, where to host this static Front End? Here are some ways:
#1 GitHub/Bitbucket/Gitlab Pages
Hosting on the page's features of GitHub, Bitbucket Cloud, or Gitlab is very simple. Just create a repository on these respective sites, and generally, the main branch is ready to be published as the Site with domains ending with
The main benefit of hosting a Static Site or SPA on these Pages-like services is the highest availability; 99.99% uptime.
And in a few cases, you can configure to use custom domains.
For GitHub pages, you can go multiple ways.
If your main branch has a
docs directory, you can go to the repository settings and build the pages on the
In another case, you can push your SPA or Static Site related code to the
gh-pages branch, and that will be published to the
In the case of publishing
master branch, the site structure is plain; you need to have has
index.html on the root level of your branch.
A 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 the Bitbucket cloud is similar to the 3rd case of GitHub pages.
The benefit of choosing Bitbucket is that your repository can be a private white site being public and accessible to the internet.
The Gitlab page is a whole new level of static sites. You can host and tweak your site generation process like in the local machine with Jekyll.
Here is a complete way to harness the full potential of Gitlab pages: https://docs.gitlab.com/ee/user/project/pages/.
#2 Firebase Hosting
Firebase has proved itself to be a very versatile platform, and it has hosting too. All you need to do is create an account/signup at Firebase and create a project.
Now download the Firebase CLI on your machine.
npm i -g firebase-tools
Initialize the project
init will create a firebase.json file for your project, which will have the 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
When you run the Firebase CLI tool for the first time on your system, you will be asked to log in; as that process finishes, you can choose the project on which you want to 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
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. The rest of the details are part of this command which you enter interactively.
Surge also works with
Grunt pipelines, 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/
Well, ngrok is not any cloud-based hosting but a tunnelling 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 the following command in CLI:
ngrok http 80
The above command creates a ngrok subdomain and starts tunnelling
http from that URL to your system's
So you can easily demonstrate the project for a shorter time.
Netlify is also a great platform to host your Site for free. Even with free features, you can host small-sized sites 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 requirements, this is a great option.
#6 Vercel (formerly known as now.sh)
Vercel (formerly known as Now.sh or Now) from Zeit is a fast tool for hosting your Site. The sites are not just static but the Node powered as well. Which means you can trigger custom builds for your Site.
Setting up is easy:
- Install the app from https://zeit.co/download
- Drag and Drop your Project into the tool
- The project is ready for deployment
Or you can follow https://zeit.co/now#get-started for a detailed getting-started guide for your Node (
package.json) enabled FrontEnd/Site
Let me know through comments ? or on Twitter at @heypankaj_ and @time2hack.
If you find this article helpful, please share it with others ?
Subscribe to the blog to receive new posts right in your inbox.
This post is sponsored by PluralSight