Almost anytime you want to share a new trick or showcase something, you will need a way to host your web pages or app. Firebase Hosting can help you.
What is Firebase Hosting?
As the Firebase Hosting docs mention:
Firebase Hosting provides fast and secure hosting for your web app, static and dynamic content, and microservices.
So, whether you have some static HTML/CSS, a reactjs, vuejs, or svelte app, you can use Firebase Hosting to deploy your code to a global CDN.
How to get started?
Step 1: Install the Firebase cli, here I'm using npm (check the docs for other methods):
Step 2: Login to your account using the Firebase cli:
This should redirect you to a web page to login into your account (create one if you don't have it already). Once logged in, you should see a "Login successful" message in your terminal.
Step 3: Init a firebase project
This step involves linking your project (the code you want to deploy) to a firebase project. You can use an existing project or create a new one.
To do this, let's run:
The CLI will prompt us to "Use an existing project" or to "Create a new project", among other options. For me, I'll create a new project.
After following the steps, we should have some new files.
.firebaserc contains the project id. The
firebase.json file has the hosting config; public folder location and other things. You will also notice a
404.html page that is created by default by Firebase (if you don't already have one in your project).
These first three steps are identical regardless of your project type; Static HTML, reactjs, nextjs, vuejs, or svelte app, etc ...
Deploying static HTML
In the case of a static HTML project, I created a project with only one
index.html file here: https://github.com/omarhoumz/wr-firebase-hosting/blob/main/static-html/index.html.
You can clone it to follow along.
Step 4: Deploy
Now, we can deploy our website (our index.html in this case) to Firebase Hosting using this command:
If the deployment is successful, you should see the URL to your newly deployed website in your terminal. It should be in this format:
<project-id>.web.app. You can get your
project-id in the
For me, this is the URL I ended up with wr-firebase-hosting.web.app.
Check the whole static HTML project here: github.com/omarhoumz/wr-firebase-hosting/tree/main/static-html
I created a CRA sample app here: https://github.com/omarhoumz/wr-firebase-hosting/tree/main/firebase-is-fire-cra
Step 4: build our project
We can build our CRA app using:
This is will create a
build folder. And this is the folder we should deploy to Firebase. But how to tell Firebase about it? Good question.
firebase.json file? We need to change the
"public" key in that config file from whatever it is now to
"build", like so:
Step 5: Deploy
Now we are all set to deploy our CRA app to firebase.
And again, if the deployment is successful, you should see the URL to your newly deployed website in your terminal. It should be in this format
For me, this is the URL I ended up with wr-firebase-hosting-cra.web.app.
You'll the whole project here: https://github.com/omarhoumz/wr-firebase-hosting/tree/main/firebase-is-fire-cra
NextJs handles hybrid static & server rendering. And many more features. Firebase Hosting allows only to host static files. However, we can go around it by using Firebase Cloud Function and do some fancy Hosting rewrites.
SSG content step 4: build our project
We'll need to build and "export" our next app, using the command:
This will create an
out folder. And this is the folder we need to deploy. We need to change the
"public" key in the
firebase.json file from whatever it is now to
"out", like so
SSG content step 5: Deploy
After a successful deployment, you should see the URL to your newly deployed website in your terminal. It should be in this format
For me, this is the URL I ended up with wr-firebase-hosting-next.web.app.
You'll the whole project here: https://github.com/omarhoumz/wr-firebase-hosting/tree/main/firebase-is-fire-next
The steps to host anything in Firebase hosting is pretty easy once you know the basics. Fundamentally, you identify the folder where your static files are. You tell Firebase about it (using the "public" key). And then use the command to deploy your code.
From here, you can setup your CI/CD pipeline to automate this process.
Firebase Hosting has more to it than what I showed here. And even more products by Firebase. You can check them all at firebase.google.com.
If you have any question don't hesitate to email me or shoot me a DM @omarhoumz on twitter.