What I learnt from Firebase deployment

Recently I’m re-deploying a project which was written 1 year ago. Which means I lost most of the memories of what’s going on. There is only a very useful deployment script that I’m using. Inside it, the deployment looks like this:

firebase init firestore
firebase init storage 
firebase init functions
firebase deploy --only functions
npm install
npm run build 
firebase deploy

The stupid question comes, and I have to admit, I didn’t really look deep into firebase and what all these commands do. I just want to swallow it over and get over it. Which means, after some crazy trials, I started to realize I have to understand what do each of these commands do.

firebase init
firebase init hosting

Both will set up your project directory and set up your Firebase products. It’ll create two files at the root of your project directory.

• A firebase.json config file that lists your project config.
• A .firebaserc file that stores your project aliases

firebase.json

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  },
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint"
    ],
    "source": "functions"
  },
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "storage": {
    "rules": "storage.rules"
  }
}

Configure Firebase Hosting Directory

Specifically, the public attribute specifies which directory to deploy to Firebase Hosting.

Configure rewrites

You can use rewrite to show the same content for multiple URLs. It’s particularly useful with pattern matching, as you can accept any URL that matches the pattern and let the client-side code decide what to display.

It’s also useful when a browser attempts to open a URL path that matches the specified source or regex URL pattern, the browser will be given contents of the file at the destination URL instead.

The rewrites attribute can set up to serve a function from a Firebase Hosting URL. For example,

"hosting": {
  // ...

  // Directs all requests from the page `/bigben` to execute the `bigben` function
  "rewrites": [ {
    "source": "/bigben",
    "function": "bigben"
  } ]
}

Your function bigben will be reachable via the URL MY_PROJECT_ID.firebaseapp.com/bigben

"hosting": {
  // ...

  // Serves index.html for requests to files or directories that do not exist
  "rewrites": [ {
    "source": "**",
    "destination": "/index.html"
  } ]
}

The above rewrites rule serves index.html for requests to files or directories that don’t exist.

.firebaserc

• A .firebaserc file that stores your project aliases, which looks like this

{
  "projects": {
    "default": "MY_PROJECT_ID"
  }
}

firebase deploy

It’ll deploy everything including:

• new releases of your Firebase Hosting sites
• New, updated or existing Cloud Functions for Firebase
• Rules for Firebase Realtime Database
• Rules for Cloud Storage for Firebase
• Rules for Cloud Firestore
• Indexes for Cloud Firestore

You can also just specify which service you want to deploy.

--only hosting // Firebase hosting content
--only database // Firebase Realtime Database rules
--only firestore // Firestore rules and indexes
--only firestore:rules
--only firestore:indexes 
--only storage // Cloud storage rules
--only functions // Cloud Functions for Firebase
--only functions:function1,functions:function2 // 2 functions

Firebase hosting