Host almost anything with firebase hosting
Published: 2021-04-13 22:51:02

---
title: Host almost anything with firebase hosting
published: true
date: 2021-04-07 23:00:00 UTC
tags: 
canonical_url: 
---

_This was originally posted here: https://www.omarhoumz.com/blog/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](https://firebase.google.com/docs/hosting) 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](https://firebase.google.com/docs/cli) 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](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](http://wr-firebase-hosting.web.app).

Check the whole static HTML project here: [github.com/omarhoumz/wr-firebase-hosting/tree/main/static-html](https://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](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](http://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](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](https://firebase.google.com/docs/functions) and do some [fancy Hosting rewrites](https://firebase.google.com/docs/hosting/full-config#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](https://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](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](https://firebase.google.com/).

If you have any question don’t hesitate to email me or shoot me a DM @omarhoumz on twitter.