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 <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 inmaster
branchgh-pages
branchmaster
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.
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