Saving the Day: Setting Up a Firebase Project Development Environment with Docker

Introduction

On April 15, 2021, Docker for Mac with official support for Apple Silicon was released to the public, making it possible to build and share virtual environments using Docker even on Apple Silicon-based macOS.

In this article, we aim to use Docker for Mac to launch a Docker Container and build a development environment for a Firebase Project.

This article is a polished version of this scrap that I created the other day.

Table of Contents

- Introduction of Docker for Mac
- Creating configuration files for the virtual environment (Container)
- Generation of the virtual environment (Container)
- Creating Firebase Project configuration files inside the Container using Firebase CLI
- Setting up development environments for each service

Environment (As of 2022/07/18)

• Macbook Air (M1, 2020)
• macOS: Monterey (12.4)
• Docker for Mac: 4.10.1 (82475)
• Visual Studio Code: 1.69.1
  • Remote - Containers: v0.241.3

Introduction of Docker for Mac

First, install Docker for Mac on your macOS.

Here, I will introduce two methods: installing from a dmg file and installing using Homebrew-cask.

As of 2021/05/23, it was necessary to install Rosetta2 to use Docker for Mac, but as of 2024, the installation of Rosetta2 is no longer required.

If you use a version of Docker for Mac that requires Rosetta2, you can install it on macOS beforehand by using the $ softwareupdate --install-rosetta command.

Installing from a dmg file

1. Download the dmg file directly from the official website.
2. Open the dmg file and copy the Docker for Mac app from the driver to the /Applications folder.

Installing using Homebrew-cask

To install using Homebrew-cask:

1. (If Homebrew is not installed) Install Homebrew.
2. Install Docker for Mac using the Homebrew-cask plugin.

1. Installing Homebrew

Install Homebrew by referring to the official website.

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
$ export PATH=/opt/homebrew/bin:$PATH

2. Installing Docker for Mac

Next, install Docker for Mac using Homebrew-cask, which is a plugin for the Homebrew you just installed.

$ brew install --cask docker

This will install Docker for Mac in /Applications.

Creating Configuration Files for the Virtual Environment (Container)

Next, set up the environment for building the Container that will serve as the virtual environment in Docker.

Creating Dockerfile

First, create a Dockerfile to specify the steps for environment construction.

.devcontainer/firebase/Dockerfile

# ① Base Docker Image
FROM node:current-buster-slim

# Maintainer
LABEL maintainer="xxx <[e-mail]>"

# Workdir
WORKDIR /workspace

# Install Firebase CLI
RUN npm config set registry http://registry.npmjs.org && \
    npm install --production -g firebase-tools --verbose

The reason why I did not use Alpine, which is famous as a lightweight Docker Image, is because the VSCode extension Remote - Containers used as the editor during development did not support Alpine at the time of writing (2021/05/16).

Creating docker-compose.yml

Next, create docker-compose.yml to specify the files and Volumes to be used when building the Container.

.devcontainer/docker-compose.yml

version: '3.8'
services:
  <project_name>:
    # ① Specify the Dockerfile to be used when building the virtual environment
    build:
      context: .
      dockerfile: flutter/Dockerfile
    # ② Specify the files you want to mount to the Container
    volumes:
      - ../${YOUR_PROJECT_DIRECTORY}:/workspace/${YOUR_PROJECT_DIRECTORY}:cached
      # (Optional) VSCode settings
      - ../.vscode:/workspace/.vscode:cached
    command: /bin/sh -c "while sleep 1000; do :; done"
    # ③ Specify the environment variable definition file
    env_file:
      - firebase/.firebase.env

1. Specify the Dockerfile to be used when building the virtual environment (Container)

Specify the reference to the .devcontainer/firebase/Dockerfile created earlier when building the Container, which is the virtual environment.

2. Specify the files you want to mount to the Container

Specify the local files you want to mount to the Container.

When developing with VSCode, mount the .vscode file under the /workspace directory so that the Workspace settings are applied to the VSCode opened inside the Remote Container as well.

3. Specify the environment variable definition file

Define environment variables in .devcontainer/firebase/.firebase.env so that they can be referenced within the Container.

Generating the Virtual Environment (Container)

Build the Container based on the Dockerfile and docker-compose.yml created earlier, and connect into it.

Here, I will introduce two methods: using the docker command and using the VSCode Remote - Containers extension.

When using the docker command

When using the docker command, perform the build and connection to the virtual environment with the following commands:

$ docker compose build
$ docker compose up -d
$ docker exec -it <container_id> /bin/bash

When using the VSCode Remote - Containers extension

1. Install Remote - Containers in VSCode.
2. Click Remote - Containers > Reopen in Container > From docker-compose.yml.

With this, you have successfully created the Firebase development environment as a Container.

Creating Firebase Project Configuration Files inside the Container using Firebase CLI

Once you have connected to the Container, the next step is to create a Firebase Project using the Firebase CLI.

Logging in to Firebase

First, log in to Firebase using the following command:

$ firebase login:ci

When you use the command, you will be instructed to open a URL, so open it in your browser and log in with your Google account.

When the login is successful, a token for running Firebase via CLI is issued, so define it as an environment variable (FIREBASE_TOKEN=xxx) in your .env file.

With this, you will be able to perform operations on the Project without having to log in to Firebase every time you build the Container and reconstruct the environment.

Generating the Firebase Project Configuration Files

Next, generate the configuration files for the Firebase Project.

Before performing this operation, you need to have created a Project in the Firebase Console, but this step is omitted in this article.

Once you have confirmed that the Project is created in the Firebase Console, use the following command inside the Container to generate the set of configuration files linked to the Project.

$ firebase init

When you use the command, you can specify:

• Which project to link with
• Which Firebase services to use (can be configured later)
• Whether to use the emulator (Firebase Local Emulator Suite) for the specified services (can be configured later)

With the above, you have successfully built a development environment for Flutter within a Docker Container. Great job!

(Optional) Setting up Development Environments for Each Service

The following are additional configuration items required when you choose to use specific services.

Setting up Firestore to run in the Firebase Local Emulator Suite

If you selected Use Firestore and Use the Firestore emulator in firebase init, you will not be able to start the emulator in the virtual environment built above.

This is because Firestore uses Java for emulation, but Java is not installed in the virtual environment you built.

Therefore, to run the Firestore emulator, install Java in the virtual environment.

.devcontainer/firebase/Dockerfile

# Base image
FROM node:current-buster-slim

# Maintainer
LABEL maintainer="nagakuta <[e-mail]>"

# Workdir
WORKDIR /workspace

+# Install Java JRE
+RUN mkdir -p /usr/share/man/man1 && \
+    apt-get update && \
+    apt-get install -y default-jre --no-install-recommends && \
+    apt-get clean -y && \
+    apt-get autoremove -y && \
+    rm -rf /var/lib/apt/lists/*

# Install Firebase CLI
RUN npm config set registry http://registry.npmjs.org && \
    npm install --production -g firebase-tools --verbose

This will install Java JRE in the virtual environment when the Container is built, allowing you to start the Firestore emulator with the following command:

$ firebase emulators:start --only firestore

Setting up the coding environment for Cloud Functions for Firebase

When you select Cloud Functions for Firebase in firebase init, you can specify whether to develop in JavaScript or TypeScript and whether to use static analysis for the code.

Here, I will introduce a configuration example for when you choose Development in TypeScript and Using static analysis to perform the following:

• TypeScript configuration
• ESLint configuration
• Introduction of Prettier

TypeScript configuration

First, configure settings related to TypeScript. This time, we will modify a portion of the tsconfig.json automatically generated during firebase init.

The new addition this time is the configuration necessary when running tests with Jest, which is a JavaScript testing tool.

functions/tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "outDir": "lib",
    "sourceMap": true,
    "strict": true,
    "target": "es2017",
+   "esModuleInterop": true,
  },
  "compileOnSave": true,
- "include": ["src"]
+ "include": ["src", "__tests__"]
}

ESLint configuration

Next, configure settings related to ESLint. Similarly to the above, we have just converted the .eslintrc.js automatically generated during firebase init into JSON format.

functions/.eslintrc.json

{
  "env": {
    "es6": true,
    "node": true,
    "jest/globals": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript",
    "google"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": ["tsconfig.json", "tsconfig.dev.json"],
    "sourceType": "module"
  },
  "ignorePatterns": [
    "/lib/**/*" // Ignore built files.
  ],
  "plugins": ["@typescript-eslint", "import", "jest"],
  "rules": {
    "import/no-unresolved": "off"
  }
}

Introduction of Prettier

Finally, we will introduce Prettier, which is a formatter that supports TypeScript.

First, connect to the Container, move to the functions directory, and use the following command:

$ npm install --save-dev prettier eslint-config-prettier

Next, add the settings to use Prettier to the ESLint configuration file, .eslintrc.json.

functions/.eslintrc.json

{
  ...
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript",
    "google",
+   "prettier",
+   "prettier/@typescript-eslint"
  ],
  ...
}

(Optional) Using Prettier in VSCode

To use Prettier in VSCode, install the Prettier - Code formatter extension and add the settings to use Prettier to the VSCode configuration.

.vscode/settings.json

{
  ...
+ "editor.codeActionsOnSave": {
+   "source.fixAll.eslint": true
+ },
+ "javascript.format.enable": false,
+ "typescript.format.enable": false,
+ "json.format.enable": false,
+ "eslint.alwaysShowStatus": true,
+ "eslint.format.enable": true,
+ "eslint.debug": true,
+ "prettier.prettierPath": "/workspace/functions/node_modules/prettier",
+ "[typescript]": {
+   "editor.defaultFormatter": "esbenp.prettier-vscode"
+ },
+ "[json]": {
+   "editor.defaultFormatter": "esbenp.prettier-vscode"
+ },
+ "[jsonc]": {
+   "editor.defaultFormatter": "esbenp.prettier-vscode"
+ }
  ...
}

With this, code formatting with Prettier will be available in VSCode.

Conclusion

In this article, I introduced how to launch a Docker Container on Apple Silicon-based macOS and build a development environment for a Firebase Project.

I hope you all create highly reusable development environments by building and sharing them using Docker Containers!

If you have any questions or feedback about this article, please feel free to leave a comment!