Ways to host single page application (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 <your-site>.github.io, <your-site>.bitbucket.io and <your-site>.gitlab.io respectively.

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.

GitHub Pages

For GitHub pages, you can go multiple ways.

• docs directory in master branch
• gh-pages branch
• master branch itself

If your main branch has a docs directory, you can go to the repository settings and build the pages on the docs directory.

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 <username>.gtihub.io/<repository-name>/

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.

GitHub Pages

Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live.

GitHub Pages

Bitbucket Pages

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.

Gitlab Pages

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

firebase init

Firebase 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 <your-app-name>.firebaseapp.com

firebase deploy

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

#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. 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/

#4 ngrok

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 80 port.

So you can easily demonstrate the project for a shorter time.

#5 Netlify

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

Conclusion

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