How to Host a FREE Website with Google Firebase

I’m going to show you how to host a free static website with Google Firebase so let’s go ahead and do that now a lot of people they hear the word free they’re like what what’s the catch and there are a couple catches here let’s go to firebase.google.com click on pricing up here and we’re going to look at the no cost version see what kind of limitations it has so it’s called the spark plan it says generous limits to get started what we’re specifically interested in are the limits for the hosting so what you get for free is 10 gigabytes of storage data transfer 360 megabytes per day so let’s just assume that your web page.

Hosting on Firebase You Get a Custom Domain

is one megabyte you have a lot of pictures on it that means 360 people can go to your website every day um I’m not saying that this should be a website for your business or something but it’s a great website to just get started with web hosting on Firebase you get a custom domain in SSL for free and you can have multiple sites per project so that’s great we’re going to start by configuring our our project within the user interface and then we’re going to finish up on the command line because that’s where the power of Firebase really comes through on the command line so let’s start that and create our project in here so.

we’ll click create a project and the project name for me is going to be called let’s just call it fire Tony okay so uh we’ll accept the terms and conditions for both of these and click continue and I’m not going to enable Google analytics for this project you can if you want to but I’ll go ahead and create the project and let that do its thing all right at this point your project is ready so we’ll go ahead and click on continue which takes you to your Firebase console dashboard and at this point we’re going to switch over to the command line so let’s minimize this and if you’re on a Mac you can open.

up a terminal window if you’re on Windows you can open up a command prompt and what you’re going to need in either case is something called node package manager or npm so I’ll have a link here we can download install that from nodejs.org I already have that command installed as you can see here so once you do have it installed we can get Firebase tools we can install Firebase tools on our system with npm install Dash G fire base Dash tools so execute that that’ll go ahead and download those packages onto your system and we’ll let that do this thing and catch up with you when it finishes okay and that finished up pretty quickly.

Use the Firebase Command to Log Into Our

so now we’re going to use the Firebase command to log into our Google account with Firebase login so execute that and what that’s going to ask to care if it collects usage and error reporting information so you can choose yes or no and what that’s going to do on my other window it opens up a tab where I can log in to whatever account I want to associate this Firebase with so I’m going to pick this account right here and then scroll down click on allow and it says you’re logged into the Firebase command line interface so we can close that up here and back here we see success logged in as my email all.

right at this point with all that set up out of the way we can actually start hosting a website so I’m going to go to my desktop which is where I’m going to choose to host my website out of you can pick any direct Tree on your system that makes sense and what we’re going to do to start that is Type in Firebase and knit hosting so this is going to ask you basically to associate with a project project which we only have one project at this point so you you can create a new project but I’m going to use an existing project just using my arrow keys and the enter key to move around.

here and there is the fire Tony project so we’ll associate our hosting with that and now where do you want your project to live on your local machine I went to my desktop and it’s going to create a public folder in here or you can tell it the name of a folder that you want I’ll just say public in here and that’ll still create that public directory so let’s do that configure as a single page app no set up automatic builds and deploys we won’t do that and now you can see when that has finished we have this public folder that was created in this other Json file that we won’t look at too much.

Locally with Firebase Serve and What That’s Going

let’s see what’s in here inside the public folder we have an index.html file in a 404 error page both of them HTML files so let’s see what that looks like how do we serve this well before deploying this to a public website let’s test it locally and we can test it locally with Firebase serve and what that’s going to do is run a local server on your computer whoops serve not server Firebase serve I’m sorry what that’s going to do is run a local server where just I can access it on my local computer and the way I can access that is that HTTP colon localhost5002 so I’m going to open up a web browser.

and go to localhost colon 5002 and that’s loading the HTML page that we saw so let’s actually prove that that’s the case let’s modify the HTML page in our public directory here to say something else so let’s open that with a text editor and that does open up over here I’m going to get rid of everything in here and I think yep I have some boilerplate HTML code some basic uh just inside of my HTML body I have one header one element that says hello world so I’m going to save that to the index.html file I’ll get out of here and we’ll get out of here for now I’ll um I don’t even have to.

stop the server it’s still serving out of this directory we’ll open up our web browser again refresh the page and now we see our modifications which prints out hello world as a header one element so if we look at the page Source here that matches up with exactly what we told it to serve which is just those few lines of HTML okay that’s awesome let’s go ahead and deploy our website to the public now so we’ll get out of here we’ll minimize this we’ll do Ctrl C to shut down our server and now instead of doing what we were doing before with Firebase serve we can do Firebase deploy and that’s going to deploy it.

Here Https Firebase or Firetony Dot Web Dot

to the public so we’ll execute that and that’s uploading our files to the server and now you can see that our hosting URL is this one right here https Firebase or firetony dot web dot app so I’m going to copy that open a new tab paste it in and as expected we see the same exact thing but this time instead of being a local website on our computer at localhost this is publicly available anybody can go to this website the one thing that I did want to point out here is that Firebase automatically installs an SSL certificate so that’s why you see this lock icon up here whereas my local website does not have that.

so what that means is that the connection between anybody who visits your website and your website is automatically secure and encrypted so that’s a really cool thing a lot of other web hosts you have to take an extra step to do that but because we are using Firebase that comes with it for free the next thing I want to show you how to do is to take this pretty drab looking website and spice it up a bit with an HTML template so as long as it’s a static website you can do pretty much anything with it so let’s go ahead and do that in our public directory I’m going to get rid of everything in.

here since that was just for testing purposes I have on my desktop this HTML template which has an index.html file some images some assets and that’s all linked up and ready to go so I’m going to take the contents of that and simply drag it into my public directory and close out of everything and just as easy as we did before with the Firebase deploy command we’ll execute that again what Firebase is going to do is release a new version of our website to the server and you can see that happening here it’s uploading all those new files this time there’s 66 files and now we can go back to the website in a web.

I Was Going to Say We Can Do

browser and see the new changes to our website and actually yeah we’ll do that we’ll do that I was going to say we can do it locally first to test our changes which is a good practice but we just went right to the public that’s okay so we’ll load that up and we don’t actually see those changes happen right away but now we refresh the page it took a little bit maybe some caching now we do see those changes being applied to our website so just a simple website with a couple links over here you can scroll down see a whole bunch of stuff I just grabbed this template off the internet and you can.

do the same thing for whatever you have in mind for this website that you’re building with Firebase so I also want to show you a quick overview of the Firebase dashboard because there’s some good stuff over here so go to your Firebase console and what you can do when you expand the build menu item over here you can go to the hosting section and kind of see what we were working on line so here is our URL that we are accessing there’s also this other URL they both point to the same thing one of them is a web.app domain and one of them is a firebase.app or firebase.com domain so let’s open that one and.

Between Google Firebase and the Google Cloud Platform

that does indeed load the same exact website as the web.app so think of them as copies of each other you can add a custom domain name to these so you don’t have to use the domain names that they provide I’m not going to go into that but it is a pretty straightforward process also down here you can see all of our release history so the initial deployment that we made and then the one that we the second one that we did with the HTML template is right here one last thing I want to explain to you is the relationship between Google Firebase and the Google Cloud platform so Google Firebase actually runs on top of.

the Google Cloud platform you can think of Firebase as a wrapper around the Google Cloud platform where you can actually host a website yourself but it’s a lot more technical Firebase makes it a lot easier for people to get started with hosting on top of the Google Cloud platform and just to show you that that’s the case I’m going to open a new tab here and go to console.cloud.google.com you can do this too and up here you can see your different projects I have another project in here on Google Cloud but you also can see your Firebase project which is fire Tony for me so like I said there is the option to host directly.

Away Website on the Google

away website on the Google Cloud platform there is free tiers as well they’re less restrictive there’s a more generous limitations to them and I actually have a about that if you want to set up a WordPress website with a database a dynamic website on the Google Cloud platform you can check that out over here next [Music].