How to Host Your Site for Free
For front-end developers, historically one of the most difficult things to get right was web hosting. The hassle of figuring out the best way to deploy your code, securing it with an SSL certificate, accidentally deploying bugs, and plenty of other issues.
Fortunately, over the last few years, there has been an explosion of hosting solutions that take most of the work out of web hosting. Today we’re going to be looking at Firebase hosting. If you guys have never heard of Firebase, I strongly suggest you check it out.
A little history
Before we get into the weeds, I wanted to point out a little history to give you some background on Firebase. Firebase evolved from a startup called Envolve which provided an API for developers to build real-time chat applications. Although it was intended for syncing chat applications they started to notice that developers were doing a lot more with it. Developers realized that they could easily synchronize the state of a game or other application across a whole host of devices. After launching they then added Hosting and Authentication.
Firebase was soon acquired by Google in 2014 and the services got bigger, better, and cheaper. Today Firebase is an extension of the Google Cloud platform and does a whole lot more. Firebase has services spanning from web hosting, serverless compute, serverless NoSQL databases (Firestore and Real-Time Database), Machine Learning, and even Analytics.
Why Firebase Hosting is Awesome
Now that we know a little history about the Firebase platform, let’s get into the main topic, hosting. I have personally been using Firebase Hosting for years and I have yet to find a better solution. So what makes Firebase Hosting better than its competitors?
Easy Peasy CLI
Firebase has a really easy to use CLI tool for deployments. To install the CLI all you have to do is run npm i -g firebase-tools on your system. Once it is installed you log in to your Google account with firebase login which will open your browser and use Google OAuth. Once you are logged in, you can initialize your project with the firebase init command. You choose your Firebase project, select what you want to set up, and choose a few options for your hosting environment (single page setup or not).
Once the setup is complete, a new folder will be created in the path you specified for deployment. All you have to do from there is run the firebase deploy command and off your site goes. Once the deployment is complete, you can immediately see your website! All of these steps take about 10 minutes to complete and bam, hosting complete.
Free SSL Certificate
Securing your website with SSL is increasingly important today. However, if you wanted to host a hobby site, personal website, or something else an SSL can be kind of expensive. A Comodo SSL can run you anywhere from $60–$100 depending on if you need a wild card or not. Once you have an SSL certificate it can be a little bit of a pain in the butt to get it set up. What’s more, if your site does not have an SSL certificate Google has announced that your site may not show up in search results. This is in an effort to promote people to secure their websites.
Firebase takes 100% of the hassle and costs out of your hands. All sites hosted on Firebase get a free SSL certificate. The best part about it is that it happens automatically. There are no settings or configurations you have to fiddle with. To be honest, SSL certs are one of the largest hassles I have had to deal with when I used to work as a freelance web developer. Since getting on the Firebase platform I have never had to worry about it.
Free Custom Domain
Right off the bat, Firebase gives you 2 different domain names
- {MY PROJECT NAME}.web.app
- {MY PROJECT NAME}.firebaseapp.com
If you’re making a website, it’s likely that you have purchased a domain name for it. Free web hosting and a free SSL certificate are fantastic, but we also need to brand the site with our custom domain name. Don’t worry, Firebase has you covered. You can set up a custom domain name absolutely free with your hosting. All you have to do is add an entry to the DNS on your domain name provider and allow a few hours for Firebase to verify the entry has been added. Once that is done your website is now available at the custom domain name you want. Oh, one more thing, your custom domain name also gets a free SSL certificate.
Deployment History with One Click Rollback
Firebase keeps a history of all deployments to the hosting environment. Let’s say we accidentally deploy a version of the site that has a bug in it. This can be a massive headache trying to scramble to figure out where the bug is and how to fix it. Like most things, Firebase makes this an easy fix. You can just view the deployment history and rollback to a previous version with a single click. Disaster averted and we can fix the bug without having to scramble.
Hosting Multiple Sites in a Single Project
Sometimes when we create a project we need to host multiple sites. For example, let’s say we have a customer-facing app and an admin app. We could start a new Firebase project to host the admin app, but that doesn’t sound like a great solution. Fortunately, in 2018 Firebase created multi-site hosting.
When you click on the hosting tab and scroll to the bottom you will see the card above. The great thing about this is that the Firebase CLI allows you to easily configure your local hosting environment with a simple command.
firebase target:apply hosting <target-name> <resource-name>
So if we have our customer app and our admin app we would do the following.
firebase target:apply hosting customer {MY PROJECT NAME}
firebase target:apply hosting admin admin-{MY PROJECT NAME}
This will automatically update your local hosting configuration so you don’t have to worry about it. Then you can deploy both sites simultaneously or one at a time.
firebase deploy --only hosting // deploy all sites
firebase deploy --only hosting:customer // deploy customer site
firebase deploy --only hosting:admin // deploy admin site
Just like magic both of your sites are hosting on the same project, with their custom domain names, and free SSL certificates.
Local Testing
We love to test our code and Firebase makes it easy. Once your code is built into the deployment directory you can simply run firebase serve or firebase serve --only hosting and firebase will serve your site locally. This can help you test your built code and make sure that everything will function properly once hosted on Firebase.
Easy CI/CD Integration
CI/CD pipelines help us effortlessly test and deploy our code when we do certain actions on our repository. We need to be able to deploy code from our CI/CD pipeline, and like always, Firebase makes it easy. We can grab a Firebase CI token using the firebase login:ci and go through the same Google OAuth flow. Then we will get a token in our terminal that we can copy and paste into our CI/CD platform. Since the firebase-tools package is installable via npm we can easily install that as a dev-dependency in our project to use in our CI/CD pipeline.
Easy Integration with Other Firebase Services
Firebase comes with a ton of useful services that we can use to make a whole app. One of those services is Firebase Functions which are serverless functions. We can host an API from those functions which will appear as something like https://us-central1-{MY PROJECT NAME}.cloudfunctions.net/API. If we wanted to have this API use our custom domain name, well that’s entirely possible. The Firebase Hosting configuration file gives us an array for rewrites
"hosting": {
// ...
// Add the "rewrites" attribute within "hosting"
"rewrites": [ {
"source": "/api",
"function": "api"
} ]
}Now this function will be callable from https://{MY CUSTOM DOMAIN NAME}.com/api.
Firebase Functions have some limitations in that you can only use NodeJS, Python, or Golang. However, Google announced Cloud Run a while ago that is its newest serverless offering. Cloud Run effortlessly manages any Docker container you give it so you can deploy any code you want. We can also make use of the rewrites to give our Cloud Run container a custom URL as well. There is a whole lot more you can do and read about here, but these are my personal favorite integrations with other Firebase offerings.
Wrapping Up
If you are looking for a service to host your website look no further. Firebase has been able to add so many useful features and make them easy to use. In short, Firebase abstracts away a lot of stuff that would normally be a headache allowing us to focus on what really matters. In the next Firebase article, I will be going over another awesome Firebase offering, Authentication. I hope you guys have been inspired to go out and give Firebase hosting a try for your next project.
If you’ve enjoyed this article I’d love for you to join my mailing list where I send out additional tips & tricks!
If you found this article helpful, interesting, or entertaining buy me a coffee to help me continue to put out content!
