---
"": ""
---
#### Deploying Node.js fabbuilder Backend to Firebase Functions.
This guide outlines the process to deploy your Node.js backend to Firebase Functions. Before you start, ensure you have the necessary tools and credentials to deploy your app.
**Prerequisites**
1. Node.js and npm installed.
2. Firebase CLI installed globally.
3. A Firebase account and a Firebase project created in the Firebase Console.
**Step 1: Install Firebase CLI**
To begin, install the Firebase CLI globally. This will allow you to interact with Firebase from the command line. `npm install -g firebase-tools`
**Step 2: Authenticate with Firebase**
Once the Firebase CLI is installed, you need to log in to your Firebase account and link it with your Firebase project.
1. Run the following command to authenticate your Firebase account: `firebase login`
2. Allow Firebase to collect CLI and Emulator Suite usage and error reporting information? Select Yes
3. This will open a browser window asking you to sign in with your Firebase account. After successful signing in, you’ll be able to proceed to the next step.
**Step 3: Create a Firebase Project**
If you haven’t already created a Firebase project, you can do so via the Firebase Console:
1. Go to[ Firebase Console](https://console.firebase.google.com/ "Firebase Console").
2. Click on Add project and follow the steps to create a new project. (Note: Make sure you have a blaze plan project, firebase functions are only available in blaze plan.)
**Step 4: Initialize Firebase Functions in Your Project.**
Now, let's set up Firebase Functions in your backend project.
1. In your terminal, navigate to your backend directory: `cd backend`
2. Run the following command to initialize Firebase in your project: `firebase init`
Now you will be prompted with several configuration options. Here's how to respond:
* Which Firebase features do you want to set up for this project? - Select Functions using the arrow keys and spacebar, then press Enter.
* Please select a Firebase project - Select the Firebase project you created earlier from the list.
* Do you want to use TypeScript or JavaScript? - Select JavaScript (or TypeScript if you prefer to use TypeScript).
* Do you want to install dependencies with npm now? - Choose Yes. This will install the necessary Firebase Functions dependencies (firebase-functions and firebase-admin) in your project.
**Step 5: Write Your Firebase Function**
Move Required Files:
* Move the src and email-template folders into the functions directory.
* Move the following files into the functions directory: .env, .gitignore, tsconfig.json.
Update package.json:
* Open the `functions/package.json` file.
* Merge all existing scripts, dependencies, and devDependencies from your project’s `package.json` into the `functions/package.json`. Be sure to copy them over, without overwriting any existing entries.
* Change the main field in `functions/package.json` to `"main": "dist/index.js"`.
Update Index.ts in src folder:
```js
import {onRequest} from "firebase-functions/v2/https";
import api from './api'; // import the api's from src api folder index.ts file
export const app = onRequest(api);
```
**Step 6: Deploy Firebase Functions**
Before deploying your backend, you need to build it for production.
* Navigate to the function folder: `cd functions`
* Run the following command to build your project: `npm run build`
* Run command to Deploy Firebase Functions: `npm run deploy`
* Would you like to proceed with deletion? Selecting no will continue the rest of the deployments. select No if you don't want to delete other functions.
![]()
**Check Deployment:**
* After a successful deployment, you can check the Firebase Console to confirm that your functions are deployed. Go to your Firebase project’s **Functions** tab, where you will see a list of your deployed functions along with their status.
![]()
After deployment, the Firebase CLI will display the function URL. You can use this URL to test your function in a browser or with tools like Postman.
To integrate your function with the **Fabbuilder frontend**, simply use the provided URL as your backendUrl `config/localhost.tsx` and `config/production.tsx` in frontend code, For example:`https://your-project-id.cloudfunctions.net/api`
#### \*\*\*\*
Deploying React Fabbuilder Frontend App to Firebase Hosting.
This guide provides a step-by-step process to deploy the Fabbuilder frontend react app to Firebase Hosting. Before starting, ensure that you have the necessary tools and credentials to deploy the app.
**(Note:** If you have already followed the steps for deploying the backend to Firebase Functions, you can skip **Step 1**, **Step 2**, and **Step 3**, as they have already been completed during the backend deployment process.)
**Prerequisites**
1. Node.js and npm installed.
2. Firebase CLI installed globally.
3. A Firebase account and a project created in the Firebase Console.
**Step 1: Install Firebase CLI**
To begin, you need to install the Firebase CLI globally. This allows you to interact with Firebase from the command line: **`npm install -g firebase-tools`**
**Step 2: Authenticate with Firebase**
Once the Firebase CLI is installed, you need to log in to your Firebase account to link your project.
1. Run the following command to authenticate your Firebase account: **`firebase login`**
2. This will open a browser window asking you to sign in with your Firebase account. After signing in, you can proceed with the next step.
**Step 3: Create a Firebase Project**
If you haven’t already created a Firebase project, you can do so via the Firebase Console:
1. Go to[ Firebase Console](https://console.firebase.google.com/ "Firebase Console").
2. Click on Add project and follow the steps to create a new project.
**Step 4: Configure Firebase in Your Project**
Open and update the production.tsx file in your project and update the configuration as follows:
```js
const frontendUrl = {
host: '.web.app',
protocol: 'https',
};
```
You can find project ID in the project settings.
![]()
![]()
**Step 5: Initialize Firebase in Your Frontend**
1. In your terminal, navigate to your project’s frontend directory: **`cd frontend`**
2. Run the following command to initialize Firebase in your project: **`firebase init`**
You’ll be prompted with several configuration options. Here’s how to respond to each prompt:
* Which Firebase features do you want to set up for this project? - Use the arrow keys to select Hosting (spacebar to select it) and press Enter.
* Please select a Firebase project: - Select the Firebase project you created earlier from the list.
* What do you want to use as your public directory? - Type build (this is the directory where your production build will be located) and press Enter.
* Configure as a single-page app? - If you are using a single-page application (SPA), select Yes. This ensures Firebase will handle routing correctly by serving index.html for all routes.
* Set up automatic deployment to Firebase Hosting? - Choose No unless you want to set up GitHub Actions or automatic deployments for your app.
**Step 6: Build Your Project**
Before deploying your app, you need to build it for production.
* Run the following command to build your project: **`npm run build:production`**
This will generate the production-ready files in the build directory, which Firebase Hosting will serve.
**Step 7: Deploy to Firebase Hosting**
After building your project, you can deploy it to Firebase Hosting.
1. Run the following command to deploy your app: **`firebase deploy`**
2. The deployment process will take a few moments. Once completed, you’ll see a confirmation message with the URL of your deployed app, such as: `Hosting URL: https://.web.app`
![]()