Skip to content

README-functions.md

Latest commit

 

History

History
158 lines (114 loc) · 4.48 KB

README-functions.md

File metadata and controls

158 lines (114 loc) · 4.48 KB

Firebase Cloud Functions Setup Guide

Language Recommendation: TypeScript

Based on the analysis of your project, TypeScript is the recommended language for implementing Firebase Cloud Functions for the following reasons:

  1. Consistency with existing codebase: Your project is already using TypeScript for the frontend (Next.js application), so using TypeScript for Cloud Functions will maintain consistency across your codebase.

  2. Type safety: TypeScript provides static type checking, which helps catch errors during development rather than at runtime.

  3. Code sharing: You can share types, interfaces, and utility functions between your frontend and Cloud Functions.

  4. Better developer experience: TypeScript offers better IDE support, code completion, and documentation.

  5. Scalability: As your project grows, TypeScript's type system will help maintain code quality and make refactoring easier.

Setting Up Firebase Cloud Functions with TypeScript

Follow these steps to set up Firebase Cloud Functions with TypeScript:

1. Complete the Firebase initialization

Continue the Firebase initialization process that was started and select TypeScript when prompted:

firebase init

When asked "What language would you like to use to write Cloud Functions?", select TypeScript.

2. Project Structure

After initialization, you'll have a new functions directory with the following structure:

functions/
├── src/
│   ├── index.ts       # Main entry point for your functions
│   └── [other .ts files]
├── package.json
├── tsconfig.json
├── .eslintrc.js
└── node_modules/

3. Writing Cloud Functions

In the functions/src/index.ts file, you can write your Cloud Functions:

import * as functions from 'firebase-functions';

// HTTP function example
export const helloWorld = functions.https.onRequest((request, response) => {
  response.send("Hello from Firebase!");
});

// Firestore trigger example
export const onUserCreate = functions.firestore
  .document('users/{userId}')
  .onCreate((snapshot, context) => {
    const userData = snapshot.data();
    console.log(`New user created: ${context.params.userId}`, userData);
    return null;
  });

4. Organizing Functions

For better organization, you can split your functions into multiple files:

functions/
├── src/
│   ├── index.ts           # Main entry point that exports all functions
│   ├── auth/              # Authentication-related functions
│   │   └── index.ts
│   ├── users/             # User-related functions
│   │   └── index.ts
│   └── api/               # API endpoints
│       └── index.ts

In each subdirectory's index.ts, define and export your functions:

// functions/src/users/index.ts
import * as functions from 'firebase-functions';
import * as admin from 'firebase-admin';

export const onUserCreate = functions.firestore
  .document('users/{userId}')
  .onCreate((snapshot, context) => {
    // Function implementation
    return null;
  });

Then in the main index.ts, re-export all functions:

// functions/src/index.ts
export * from './auth';
export * from './users';
export * from './api';

5. Deploying Functions

To deploy your functions, run:

firebase deploy --only functions

Or to deploy specific functions:

firebase deploy --only functions:functionName1,functions:functionName2

6. Local Testing

You can test your functions locally before deploying:

cd functions
npm run serve

Integration with Next.js Frontend

To call your Cloud Functions from your Next.js frontend:

// src/lib/firebase.ts (add to existing file)
import { getFunctions, httpsCallable } from 'firebase/functions';

const functions = getFunctions(app);

// Example of calling an HTTPS callable function
export const callMyFunction = async (data: any) => {
  try {
    const myFunction = httpsCallable(functions, 'myFunctionName');
    const result = await myFunction(data);
    return result.data;
  } catch (error) {
    console.error("Error calling function:", error);
    throw error;
  }
};

Additional Resources