Host almost anything with firebase hosting

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):

1npm install -g firebase-tools

Step 2: Login to your account using the Firebase cli:

1firebase login

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:

1firebase init hosting

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.

1+ .firebaserc
2+ 404.html
3+ firebase.json

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:

1firebase deploy --only hosting

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 .firebaserc file.

1{
2  "projects": {
3    "default": "<project-id>"
4  }
5}

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

Create-React-App app

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:

1npm run build

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.

Remember the firebase.json file? We need to change the "public" key in that config file from whatever it is now to "build", like so:

1- "public": "public",
2+ "public": "build",

Step 5: Deploy

Now we are all set to deploy our CRA app to firebase.

1firebase deploy --only hosting

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 <project-id>.web.app .

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 app

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:

1# yarn
2yarn build && yarn export
3
4# npm
5npm run build && npm run export

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

1- "public": "public",
2+ "public": "out",

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 <project-id>.web.app.

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

Conclusion

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.