Initialization and Deployment of a firebase project
The use of Firebase Services requires the global installation of the Firebase Command Line Tools (Firebase CLI) on your computer.
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.
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).
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).
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.
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-Prod in the Firebase Console.
- Click Add Project
- Assign a project name
- 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).
- Click Add Web-App
- Register the Alias name for the Web-App
- Firebase hosting is to be set up for this web app
- Then follow 3 steps for information that are simply noted (add Firebase SDK, install Firebase CLI, provide Firebase hosting)
- 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:
- Google Cloud Platform (GCP) resource location
- 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
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:
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
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
Hosting: Self-explanatory. The project can be hosted on a Google webserver.
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!
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-Devdirectory 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
- 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
images and their files are created for web application development. The
dev-versions directory is is used for versioning the web application development results.
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
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
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 deploycould 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.
After the tests have all been successfully completed, the application can be published in the Prod system.
We are still in the
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
public directory of
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 deploycould also be added to the deploy-prod script. I prefer to run this command separately afterwards.