🔥 Deploy a website with Firebase Hosting

🇫🇷 French version

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 is a pay-as-you-go 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.

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

⛔ 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

⬆️ Finally, place the firebase deploy

Firebase deploy command with CLI

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

See only fire

🤔  I had the idea to write this article after deploying my personal website, 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.

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

History of versions deployed on Firebase

📑  For more information, the Firebase Hosting documentation 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?