Project Setup Guide

Backend Setup (NestJS with Firebase Cloud Functions)

Step 1 - Initialize Firebase Cloud Functions

Ensure you have Firebase CLI installed and initialize Cloud Functions with TypeScript support.

npm i -g firebase-tools
firebase init functions

Step 2 - Install NestJS

Navigate to the functions directory and install NestJS along with required dependencies.

cd functions
npm i @nestjs/core @nestjs/common express@5 @nestjs/platform-express @types/jest @nestjs/testing

Step 3 - Add NestCLI Support

Create a Nest CLI configuration file to enable NestJS CLI support.

File: functions/nest-cli.json

{
    "language": "ts",
    "collection": "@nestjs/schematics",
    "sourceRoot": "src"
}

Step 4 - Update TypeScript Configuration

Update TypeScript settings to enable necessary features for Cloud Functions.

File: functions/tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitReturns": true,
        "noUnusedLocals": true,
        "outDir": "lib",
        "sourceMap": true,
        "strict": false,
        "target": "es2017",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "declaration": true,
        "removeComments": true,
        "baseUrl": "./",
        "incremental": true,
        "esModuleInterop": true
    },
    "compileOnSave": true,
    "include": ["src"]
}

Step 5 - Generate an App Module

Use NestJS CLI to generate a new module and a sample controller.

nest generate module app --flat
nest generate controller hello

Step 6 - Create the Server

Wrap the NestJS app inside a Firebase Cloud Function.

File: functions/src/index.ts

import * as functions from "firebase-functions";
import { NestFactory } from "@nestjs/core";
import { ExpressAdapter } from "@nestjs/platform-express";
import { AppModule } from "./app.module";
import express from "express";

const server = express();

const createNestServer = async (expressInstance) => {
    const app = await NestFactory.create(
        AppModule,
        new ExpressAdapter(expressInstance),
    );

    app.enableCors();
    return app.init();
};

createNestServer(server)
    .then(() => console.log("Nest Ready"))
    .catch((err) => console.error("Nest broken", err));

export const api = functions.https.onRequest(server);

Step 7 - Build, Serve, Deploy

Build and deploy your Cloud Functions.

cd functions
npm run serve
firebase deploy --only functions

---

Frontend Setup (React with Vite and Firebase Hosting)

Step 1 - Create a Vite Project

Use Vite to scaffold a new React TypeScript project.

npm create vite@latest frontend -- --template react-ts

Step 2 - Install Dependencies

Navigate to the frontend directory and install axios for API requests.

cd frontend
npm i axios

Step 3 - Configure Firebase Hosting

Ensure Firebase is set up to host your frontend application.

firebase init hosting

Step 4 - Build the Frontend

Generate the production build of your frontend application.

npm run build

Step 5 - Deploy to Firebase Hosting

Deploy the frontend application using Firebase Hosting.

firebase deploy --only hosting

Notes

• The frontend/dist folder serves as the public directory for Firebase Hosting.
• Ensure your Firebase project is properly set up before deployment.

---

This guide provides a streamlined setup process for integrating NestJS with Firebase Cloud Functions as the backend and React with Vite as the frontend.