Note: I will not go into the installation of the Firebase CLI here. How this is installed on the computer is well described in Full-Stack Firebase and in the Google documentation.

Overview

Before I start a firebase project, I first think of a suitable name for the project and create one project for development (Firebase Project Dev) and another different one for production (Firebase Project Prod) in the Firebase Console. As a result, 2 projects with the following names are created in the Firebase Console (see the Browser side chapter below).

• myproject-Dev
• myproject-Prod
  

In addition, 2 directories must be created on the computer. One directory as Directory Dev and another as Directory Prod. Ideally, these directories have the same names as the projects in the Firebase Console (see the Command line side chapter below).

• myproject-Dev
• myproject-Prod
  

As shown in the figure above, the directories on the computer and the Firebase projects logically each represent a system. So in my example I have a Dev System and a Prod System. The two systems Prod and Dev are completely separated from each other.

The system development takes place on the computer. The files and directories for development are located on the computer directly in the myproject-Dev directory. The public subdirectory in the myproject-Dev directory contains all the files and directories relevant to the dev depolyment. The Dev deploy process copies these relevant files and directories for dev deployment there (see the Dev deployment chapter below).

Note: The system development is not part of this tutorial.

The files and directories for production are in the public subdirectory in the myproject-Prod directory. The process Prod deploy copies these relevant files and directories for the Prod deployment there (see the chapter Prod deployment below).

The directories and files for Firebase hosting are copied from the relevant public directory and are performed by the Firebase CLI function firebase deploy. In our example here we have hosting of the Dev System and hosting of the Prod System. The Dev System is used for testing under production conditions. The Prod System represents the actual live system on the web.

Browser side

The following activities are carried out in the browser.

How a Firebase project is created in the firebase console can be read in detail very well on Full-Stack Firebase. I will only go into the basic steps of creating a project here.

First we go to the Firebase Console in the browser. When initially creating a firebase project in the Firebase Console, the following steps are carried out. With this procedure we create the two projects myproject-Dev and myproject-Prod in the Firebase Console.

1. Click Add Project
2. Assign a project name
3. Switch on Google Analytics (default) and configure Analytics account
   

After the initial creation of the project in the Firebase Console, you go directly to the project overview in the project console of the newly created project. Here a Firebase app must be added to the project. In order to fully understand this tutorial, a web app is added to the project to create a website (iOS or Android mobile apps can also be added here later).

1. Click Add Web-App
2. Register the Alias name for the Web-App myproject-Dev-WebApp
3. Firebase hosting is to be set up for this web app
4. Then follow 3 steps for information that are simply noted (add Firebase SDK, install Firebase CLI, provide Firebase hosting)
5. Then go back to the project console project overview
   

In the project overview, click on the settings of the web app myproject-Dev-WebApp in the top left of the main window. The following configurations must be made here in the General area:

1. Google Cloud Platform (GCP) resource location
2. Support Email Address
   

When setting the default location for the cloud resources, it is important to know that this can only be done once here at this point. I choose here as the location of the cloud resources europe-west3. At this point, of course, any other location can be selected depending on which is meaningful or necessary for the developer.

This process must also be repeated for myproject-Prod.

Command line side

The following activities are carried out in the terminal or on the command line of the computer. The computer I use is a Mac. As mentioned above these steps require the installation of the Firebase CLI.

First you log on to the Firebase Console. To do this, the firebase login command must be entered in the command line. Then all other commands can be entered in the command line.

With the command firebase projects:list in the command line the projects created in the firebase console can now be listed.

|Project Display Name |Project ID |Resource Location ID |

|———————–|———————-|———————|

|myproject-Prod | myproject-prod-19842 | europe-west3 |
|myproject-Dev | myproject-dev-ace74 | europe-west3 |

Then I create two folders locally on my computer, one for development and one for production and initialize firebase in each of the folders.

Later in this article I’ll go into how depolyment from development to production takes place.

In order to initialize the Firebase project on the computer the following steps have to be followed.

Step 0: Create Folders on the computer

In the initial situation, I have already created 2 folders on my computer: One for development and a different one for production. These folders are:

• myproject-Dev
• myproject-Prod
  

Patricks-MBP:firebase-test patrick$ ls -l
total 0
drwxr-xr-x  2 patrick  staff  64 17 Dez 17:26 myproject-Dev
drwxr-xr-x  2 patrick  staff  64 17 Dez 17:25 myproject-Prod
Patricks-MBP:firebase-test patrick$

First I initialize firebase for myproject-Dev. The Steps 1 to the final step must be repeated in the same way for myproject-Prod.

To do this, I change to the myproject-Dev directory on my computer and enter the command firebase init on the command line of my computer.

Patricks-MBP:firebase-test patrick$ cd myproject-Dev
Patricks-MBP:myproject-Dev patrick$ firebase init

firebase init: The command firebase-init links the development project previously created in the Firebase Console to the myproject-Dev directory. After entering the command, the developer has to complete different stepts to setup the project. Once the process has been completed, various files are created in myproject-Dev, which I will explain in parts below.

The first step to be completed by the developer relates to the Firebase services to be used. I will use firestore, hosting and storage in this example.

Step 1: Initialize a Firebase project

Patricks-MBP:myproject-Dev patrick$ firebase init

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

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

  /Users/patrick/Sites/dev/tutorials/firebase-test/myproject-Dev

? 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

Firestore: Modern json database. This database can be accessed via the JavaScript SDK offered by Google in the JavaScript of the application. Access rights to the database are controlled via security rules that can be configured locally and loaded into the project using the deployment process.

Hosting: Self-explanatory. The project can be hosted on a Google webserver.

Storage: File server that can also be accessed via the JavaScript SDK in the application’s JavaScript. Access rights to the cloud storage are controlled via security rules that can be configured locally and loaded into the project using the deployment process.

After step 1 has been completed, the project is connected to the current folder on the computer (the directory myproject-Dev we are in).

After the first step has been completed with Enter, the second step is to connect the project directory we are in on the computer myproject-Dev to the Firebase Project myproject-Dev, which was previously created in the Firebase Console.

Step 2: Project Setup

=== 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:  
❯ myproject-dev-ace74 (myproject-Dev)
  myproject-prod-19842 (myproject-Prod)

Steps 3 to 5 configure the services previously selected in Step 1.

Step 3: Firestore Setup

=== Firestore Setup

Firestore Security Rules allow you to define how and when to allow
requests. You can keep these rules in your project directory
and publish them with firebase deploy.

? What file should be used for Firestore Rules? firestore.rules

Firestore indexes allow you to perform complex queries while
maintaining performance that scales with the size of the result
set. You can keep index definitions in your project directory
and publish them with firebase deploy.

? What file should be used for Firestore indexes? firestore.indexes.json

Step 4 Hosting Setup

=== 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

Step 5: Storage Setup

=== Storage Setup

Firebase Storage Security Rules allow you to define how and when to allow
uploads and downloads. You can keep these rules in your project directory
and publish them with firebase deploy.

? What file should be used for Storage Rules? storage.rules

Final Step: Writing Files

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

✔  Firebase initialization complete!

The directory myproject-Dev now has the following content.

Patricks-MBP:myproject-Dev patrick$ ls -l
total 32
-rw-r--r--  1 patrick  staff  379 18 Dez 07:30 firebase.json
-rw-r--r--  1 patrick  staff  563 18 Dez 07:27 firestore.indexes.json
-rw-r--r--  1 patrick  staff  132 18 Dez 07:27 firestore.rules
drwxr-xr-x  3 patrick  staff   96 18 Dez 07:29 public
-rw-r--r--  1 patrick  staff  138 18 Dez 07:30 storage.rules

Here you can see that the files for controlling access and indexes to the firestore and the files for controlling access to storage were created. Rules and indexes are transferred with the firebase deploy command. It is therefore important to enter any changes to the rules that may have been made during development in the Firebase Console here.

In addition, the public directory was created. The application is deployed from this directory with the firebase deploy command.

Note: I use a local apache web server for development on my Mac. This web server is configured so that websites in a local directory within my user directory are displayed as private websites (localhost). The directory myproject-Dev is created under localhost. In this respect, html files, css and Javascript files etc. can be created in myproject-Dev directory and displayed from there via the local web server in the browser by entering the url localhost/~user/myproject-Dev. This helps the developer to see his results and to do some debugging where necessary. A very good description of how to set up a local web server on a Mac can be found at Website Beaver.

As an example for a typical web application, the following directories and files must be created in the myproject-Dev directory.

• css Directory
  
  • mystyles.css File
• script Directotry
  
  • main.js File
• images Directory
  
  • .png or jpg. Files
• dev-versions Directory
• index.html File
• deploy-dev File
• deploy-prod File
  

The directories css, script and images and their files are created for web application development. The dev-versions directory is is used for versioning the web application development results.

The files deploy-dev and deploy-prod each contain a script for performing the respective deployment either in the Dev or Prod.

A typical directory structure in myproject-Dev looks like this.

Patricks-MBP:myproject-Dev patrick$ ls -l
total 48
drwxr-xr-x  3 patrick  staff   96 18 Dez 11:09 css
-rwxr--r--  1 patrick  staff  251 18 Dez 15:00 deploy-dev
-rwxr--r--  1 patrick  staff  240 18 Dez 14:54 deploy-prod
drwxr-xr-x  3 patrick  staff   96 18 Dez 15:01 dev-versions
-rw-r--r--  1 patrick  staff  379 18 Dez 07:30 firebase.json
-rw-r--r--  1 patrick  staff   10 18 Dez 12:31 firestore.indexes.json
-rw-r--r--  1 patrick  staff   31 18 Dez 11:05 firestore.rules
drwxr-xr-x  4 patrick  staff  128 18 Dez 12:32 images
-rw-r--r--  1 patrick  staff  386 18 Dez 11:31 index.html
drwxr-xr-x  8 patrick  staff  256 18 Dez 15:01 public
drwxr-xr-x  3 patrick  staff   96 18 Dez 11:10 script
-rw-r--r--  1 patrick  staff   31 18 Dez 11:05 storage.rules

The Firebase initialization for the development system is then completed.

As already mentioned above, this process must be repeated for myproject-Prod from step 1 in order to also initialize the production system accordingly. After initialization, only the prod-versions directory has to be created as subdirectory of the myproject-Prod directory. This directory is is used for versioning the web application.

A typical directory structure in myproject-Prod looks like this.

Patricks-MBP:myproject-Prod patrick$ ls -l
total 32
-rw-r--r--  1 patrick  staff  27 18 Dez 18:45 firebase.json
-rw-r--r--  1 patrick  staff  28 18 Dez 18:45 firestore.indexes.json
-rw-r--r--  1 patrick  staff  21 18 Dez 18:46 firestore.rules
drwxr-xr-x  2 patrick  staff  64 18 Dez 15:15 prod-versions
drwxr-xr-x  2 patrick  staff  64 18 Dez 18:35 public
-rw-r--r--  1 patrick  staff  19 18 Dez 18:46 storage.rules

Dev-Deployment

To deploy the application to the Dev-System in Firebase, all the necessary files must be copied to the public directory under myproject-Dev. The bash script deploy-dev does this.

Patricks-MBP:myproject-Dev patrick$ cat deploy-dev
#!/bin/bash

date=$(date +"%Y.%m.%d_%H.%M.%S")

mkdir dev-versions/dev-ver_$date

cp -Rip public dev-versions/dev-ver_$date

rm -R public/*

cp -ip index.html public
cp -Rip css public
cp -Rip script public
cp -Rip images public

deploy-dev stores the current date and time in the variable date. Then a subdirectory named like dev-ver_$date is created under the directory dev-versions and the entire public directory is copied there. The public directory is then emptied and the new application files are copied to the public directory.

Then the command firestore deploy must be called on the command line and the deployment from the current public directory to the dev system is started.

Note: The command firestore deploy could also be added to the deploy-dev script. I prefer to run this command separately afterwards.

After the Firebase Deployment is complete, you get a project url in the command line with which you can access via the web the Dev-System that has just been published. Now the tests can be performed using the Dev-System url.

Prod-Deployment

After the tests have all been successfully completed, the application can be published in the Prod system.

We are still in the myproject-Dev directory.

The goal is to copy all files from the public directory in myproject-Dev into the public directory of myproject-Prod. The bash script deploy-prod does this.

Patricks-MBP:myproject-Dev patrick$ cat deploy-prod
#!/bin/bash

date=$(date +"%Y.%m.%d_%H.%M.%S")

mkdir ../myproject-Prod/prod-versions/prod-ver_$date

cp -Rip ../myproject-Prod/public ../myproject-Prod/prod-versions/prod-ver_$date

rm -R ../myproject-Prod/public/*

cp -Rip public/* ../myproject-Prod/public

deploy-prod stores the current date and time in the variable date. Then on myproject-Prod a subdirectory named like prod-ver_$date is created under the directory prod-versions and the entire directory public is copied there. The public directory on myproject-Prod is then emptied.

The new application files are copied from the publicdirectory in myproject-Devto the public directory of myproject-Prod.

Then the command firestore deploy must be called on the command line and the deployment from the public directory to the prod system is started.

Note: The command firestore deploy could also be added to the deploy-prod script. I prefer to run this command separately afterwards.