Setup Firebase Hosting and Functions (Node)

npm install -g firebase-tools

Setup Firebase CLI

firebase login

Setup Firebase Project

Create project directory.

mkdir PROJECTcd PROJECT

Setup Firebase Hosting and Cloud Functions

firebase init

There are 6 types of setup available, which you can select one or more: I choose Functions, Hosting and Emulators.

You can select existing Firebase project or create new ones.

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  /projects/PROJECT

Before we get started, keep in mind:

  * You are currently outside your home directory

? Which Firebase CLI features do you want to set up for this folder? Press Space
 to select features, then Enter to confirm your choices.
 ◯ Database: Deploy Firebase Realtime Database Rules
 ◯ Firestore: Deploy rules and create indexes for Firestore
 ◉ Functions: Configure and deploy Cloud Functions
 ◉ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules
❯◉ Emulators: Set up local emulators for Firebase features

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

? Please select an option: Use an existing project
? Select a default Firebase project for this directory: PROJECT
i  Using project PROJECT

=== Functions Setup

A functions directory will be created in your project with a Node.js
package pre-configured. Functions can be deployed with firebase deploy.

? What language would you like to use to write Cloud Functions? JavaScript
? Do you want to use ESLint to catch probable bugs and enforce style? No
✔  Wrote functions/package.json
✔  Wrote functions/index.js
✔  Wrote functions/.gitignore
? Do you want to install dependencies with npm now? Yes

> [email protected] postinstall /projects/PROJECT/functions/node_modules/protobufjs
> node scripts/postinstall

npm notice created a lockfile as package-lock.json. You should commit this file.
added 252 packages from 190 contributors and audited 806 packages in 8.293s

25 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities


=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
✔  Wrote public/index.html

=== Emulators Setup
? Which Firebase emulators do you want to set up? Press Space to select emulator
s, then Enter to confirm your choices. Functions, Hosting
? Which port do you want to use for the functions emulator? 5001
? Which port do you want to use for the hosting emulator? 5000
? Would you like to download the emulators now? Yes

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...
i  Writing gitignore file to .gitignore...

✔  Firebase initialization complete!

Local Development

Launch Firebase Hoting and Functions

firebase serve

Hosting only

firebase serve --only hosting

Functions only

firebase serve --only functions

Selectively

firebase serve --only functions,hosting

Create Cloud Functions

Edit functions/index.js

const functions = require('firebase-functions');exports.hello = functions.https.onRequest(async (request, response) => {  const name = request.query.name;  response.send(`Hello ${name}`)})

Test: http://localhost:5000/PROJECT/us-central1/hello?name=Desmond

You can map the cloud functions to http://localhost:5000/hello.

Edit firebase.json

{  "hosting": {    "public": "public",    "ignore": [      "firebase.json",      "**/.*",      "**/node_modules/**"    ],    "rewrites": [      {        "source": "/hello",        "function": "hello"      }    ]  }}

Create Static HTML/CSS/JS

Edit public/index.html to create main hosting page. You can put CSS/JS files within the public directory as well.

Handle Main via cloud functions

You can create a cloud function to handle the / request instead of using a html.

NOTE: You must delete public/index.html else the cloud functions mapping won't work.

Edit functions/index.js

const functions = require('firebase-functions');exports.main = functions.https.onRequest(async (request, response) => {  response.send(`Home`)})

Edit firebase.json

{  "hosting": {    "public": "public",    "ignore": [      "firebase.json",      "**/.*",      "**/node_modules/**"    ],    "rewrites": [      {        "source": "/",        "function": "main"      }    ]  }}

Deployment

Deploy Hosting and Functions

firebase deploy

Deploy Hosting only

firebase deploy --only hosting

Deploy Functions only

firebase deploy --only functions

Deploy Specific Functions only

firebase deploy --only functions:hello

References: