Firebase Functions: getting started with Typescript

To start a Firebase Functions project with full TypeScript support, follow these steps:

1. Install the Firebase CLI: If you haven't already, install the Firebase CLI globally by running the following command in your terminal:

npm install -g firebase-tools

2. Log in to Firebase: Run the following command to log in to Firebase using your Google account:

firebase login

3. Create a new project folder: Create a new folder for your Firebase Functions project and navigate to it in your terminal:

mkdir my-firebase-functions cd my-firebase-functions

4. Initialize your Firebase Functions project: Run the following command to initialize your project:

firebase init functions

The Firebase CLI will prompt you to select a Firebase project. Choose an existing project or create a new one.

1. Choose TypeScript: When the CLI asks you which language you would like to use, choose "TypeScript".
2. Install dependencies: After initialization is complete, navigate to the "functions" folder and install the required dependencies:

cd functions
npm install

5. Set up your TypeScript configuration: The Firebase CLI automatically generates a tsconfig.json file with the recommended settings for Firebase Functions. You can modify this file to fit your needs. Here's a sample tsconfig.json file for reference:

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

6. Write your Firebase Functions: Create a new TypeScript file in the src folder (e.g., src/index.ts). Here's an example of a basic Firebase Cloud Function written in TypeScript:

import * as functions from "firebase-functions";

// // Start writing functions
// // https://firebase.google.com/docs/functions/typescript
//
export const helloWorld = functions.https.onRequest((request, response) => {
    functions.logger.info("Hello logs!", { structuredData: true });
    response.send("Hello from Firebase!");
});

This will give some eslint errors regarding file import and formatting. Change the .eslintjrc file as follows

module.exports = {
  root: true,
  env: {
    es6: true,
    node: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript",
    "google",
    "plugin:@typescript-eslint/recommended",
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    project: ["tsconfig.json", "tsconfig.dev.json"],
    sourceType: "module",
    tsconfigRootDir: __dirname,
  },
  ignorePatterns: [
    "/lib/**/*", // Ignore built files.
  ],
  plugins: [
    "@typescript-eslint",
    "import",
  ],
  rules: {
    "quotes": ["error", "double"],
    "import/no-unresolved": 0,
    "indent": "off",
    "object-curly-spacing": [2, "always"],
  },
};

7. Build and deploy your functions: Run the following command in the functions folder to compile your TypeScript code into JavaScript:

cd functions
npm run build

After compilation, deploy your functions to Firebase using the following command:

Now, you have a Firebase Functions project set up with full TypeScript support. You can continue developing your functions in TypeScript and deploy them to Firebase by running the npm run build and firebase deploy --only functions commands.