Develop and Deploy a static-app with Firebase

Firebase from Google is a convenient development platform which provides free hosting for javascript static applications. In this tutorial we we will show how to create and deploy a simple app and explain the prerequisite and the to way to develop an Express app.

The concept is pretty simple:

1. Develop your app

2. Deploy your app

3. Your app is available on Internet

Sign-in and Firebase configuration

In this chapter we will show you how to sign-in and configure your project on Firebase web-site. To sign-in you simply need a Google account, but keep in mind:

1. The "No-cost Spark Plan" is sufficient for hosting a static app with the so-called service"Hosting".

2. Furthermore if you need to serve dynamic content, you may need the "Pay as you go Blaze Plan" which provides additionally the service "Functions". (Moderate traffic remains free of charge but you will have to enter your credit card).

Step-by-step:

• Click "Get started" to navigate in your project list

• Create an initial project (later it will be referenced by its name)

• For the moment the "Project Overview" is empty:

Create a "Hello world" static site

To create you first site and deploy it, we install the firebase CLI called "firebase-tools". Prerequisites: you need node 14 or node 16

• Install the firebase tools with npm:

npm install -g firebase-tools

• Login with your Google account (using the email address):

firebase login

• Create a folder with your new project, change to this folder

• Initialize the project structure with the following command:

firebase init hosting

A wizard starts you will be asked for...

1. Select the project previously created in Firebase with "Use an existing project"

2. What do you want to use as your public directory? Answer: "public" (it will create a sub-folder named "public")

3. Configure as a single-page app (rewrite all urls to /index.html)? Answer: "yes"

4. Set up automatic builds and deploys with GitHub? For the beginning the answer will be "no"

The initialization is completed! The project structure is as follows: the main folder contains the configuration files for Firebase, the subfolder "public" contains your app. You can edit the file "index.html".

• Finally deploy your app to Firebase:

firebase deploy --only hosting

After this you can see your app on your browser:

Dynamic app using Express

As mentioned before, it is not possible to use the service "Functions" with the No-cost Spark Plan. Nevertheless here is an illustration how it would work (it is based on this YouTube tutorial):

• After having created a project from firebase website and having logged with the CLI, create a local folder for your project and navigate within it (let's take the name "firebase-node"). Then initializes a new "npm" package with:

mkdir firebase-node
cd firebase-node
npm init -y

• Create a file .gitignore with the following content:

node_modules
.DS_Store

• Initialize the service "functions" of firebase with the CLI:

firebase init functions

1. First select your firebase project

2. Choose "JavaScript" as language to write "Cloud Functions"

3. Choose "Yes" to use ESLint to catch probable bugs and enforce style

4. Choose "Yes" to install dependencies with npm

The dependencies get installed, following message is displayed "Firebase initialization complete!"

• Navigate into the folder "functions" and install express:

npm i express

• Update the content of "index.js" to use express:

const functions = require("firebase-functions");
const express = require("express");
const app = express();

app.get("/", (req, res) => {
  res.status(200).send({data: "wordly hello"});
});

exports.app = functions.https.onRequest(app);

// // Create and deploy your first functions
// // https://firebase.google.com/docs/functions/get-started
//
// exports.helloWorld = functions.https.onRequest((request, response) => {
//   functions.logger.info("Hello logs!", {structuredData: true});
//   response.send("Hello from Firebase!");
// });

• Finally deploy your app:

npm run deploy

The procedure ends with the following error message if you do not have a "Blaze" plan:

Error: Your project fir-node-b3db9 must be on the Blaze (pay-as-you-go) plan to complete this command. Required API artifactregistry.googleapis.com can't be enabled until the upgrade is complete. To upgrade, visit the following URL:

Some hints to work with firebase

• If "npm" does not manage installing Firebase, proxy settings may have to be changed

• Regularly update the "firebase-tools" with:

npm install firebase-functions@latest firebase-admin@latest --save