🔥 Deploy a website with Firebase Hosting
Tags: firebase, hosting, github, cicd
Published: 2022-10-15 09:19:53

[🇫🇷 French version](https://aymeric-le-feyer.notion.site/D-ployer-un-site-internet-avec-Firebase-f64c619eec034f6a912c7d876492bb40)

## Green light for deployment

🌐 Whether for a showcase site, a portfolio or even for a web application, the final step for a developer is to put it into production on an internet address available to everyone.

🔥 Today I offer you Firebase, which with its Hosting tool allows you to deploy a site quickly and **for free**.


![Firebase logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gojwf24x78tv2ytzsij3.png)

💸  Firebase is a [pay-as-you-go] (https://firebase.google.com/pricing) tool, you spend what you use. In the case of Hosting, it is possible to take advantage of 10GB of storage and a transfer of 360MB per day in the free offer (no credit card to enter). The link with the domain name and the SSL are also included in the offer.

Note, however, that to use a domain name, you must first have one!

To start the deployment, it is necessary to have `npm` as well as the firebase-tools CLI.

```bash
npm install -g firebase-tools
```

Depending on the composition of your project, the installation procedure differs. I invite you to follow the official documentation for more completeness.

💪  Once the CLI is installed, connect to your Firebase account with `firebase login` then in your project folder, launch a `firebase init` in order to admire the beautiful Firebase CLI.

You can use an existing firebase project, or create it from the CLI.

![Example of firebase init command](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wd9kt1dhgs1e1z0ftvpm.gif)

> Example of firebase init command

⛔ If you already have files in the public folder, be sure to answer `N` when the CLI asks to override the directory.

Once done, new files have been created in your project, the firebase project configuration (you need to commit them).

![File tree after create project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6koftya0n8fw9icusif4.png)

> File tree after create project

⬆️ Finally, place the `firebase deploy`

![Firebase deploy command with CLI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kjq0j1yuu70ukhn2c5gp.gif)

> Firebase deploy command with CLI

![Overview of the website just deployed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e4r9j370w3fjz2whs5g7.png)

> Overview of the website just deployed

*Et voilà*, your site is deployed !

You will find information on the Firebase project page, such as history or configuration for the domain name.

![History of versions deployed on Firebase](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lkvan3a0k0ip0oybaxip.png)

> History of versions deployed on Firebase 

## See only fire

🤔  I had the idea to write this article after deploying my [personal website](https://aymeric.lefeyer.fr/), and since this is the kind of site that we modify once every 6 months, it is always difficult to find the commands to use to update it.

😁 Surely you come to me, the goal now is to automate the `firebase deploy` in a CI/CD process, so that you don't have to worry about deployment anymore and see only fire in it (yes, there is a link to the title of the section).
During the init, the CLI offered to configure automatic builds, you had to answer `Y`.


You can change the options with a little `firebase init hosting:github`.

🤫  The CLI will automatically create *Github Secrets* and the *.yaml* file.

I propose a *yaml* file very similar to the one generated, but which triggers at each push on the master branch, and which will deploy in “production” (finally, it is the perfect configuration for a personal project or a POC) .

⚠️ I added a build step because my project was in VueJS, you can adapt the line `npm install && npm run build` with your needs.

```yaml
name: Deploy to Firebase Hosting on push
on:
  push:
    branches: [master]

jobs:
  build_and_live:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      - name: ⬇️ Install dependencies and build
        run: npm install && npm run build

      - name: 🔥 Deploy to Firebase Hosting
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: "${{ secrets.GITHUB_TOKEN }}"
          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_project }}"
          projectId: projectId
          channelId: "live"
```

⚠️ Remember to modify the `projectId` at the end, and also the `service_account`. 🙂

➡️ Now with each push, a Github Actions will launch and a build will occur in Firebase.

![Github Actions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iuolbyiy5cgwahm4t5hv.png)

> Github Actions

![History of versions deployed on Firebase](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3o555pdywqyvvzol378n.png)

> History of versions deployed on Firebase

📑  For more information, the Firebase Hosting [documentation](https://firebase.google.com/docs/hosting) is really effective !

**And now ? All that remains is to test the power of the tool on your side, and perhaps you will use it in your next projects?**