Bolt.new AI and Firebase Cloud Messaging integration: Step-by-Step Guide 2025

 

Step 1: Obtain Your Firebase Configuration

 

Before you begin, go to the Firebase Console (https://console.firebase.google.com/) and create a project or use an existing one. In the project settings, locate your Firebase SDK configuration. You will need these details (apiKey, authDomain, projectId, messagingSenderId, appId) in later steps.

 

Step 2: Add Firebase SDK and Dependencies in Your Project

 

Since Bolt.new AI does not have a terminal for installing dependencies, include the Firebase SDK directly in your code. Locate the file where you include external scripts (for example, your project's main HTML or a configuration file) and add the following script tags:

<script src="https://www.gstatic.com/firebasejs/9.22.2/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.22.2/firebase-messaging-compat.js"></script>

Make sure these script tags are placed before your main TypeScript code gets executed.

 

Step 3: Create a Firebase Configuration File

 

Create a new TypeScript file named firebase-config.ts. This file will initialize Firebase with your configuration details. Replace the configuration below with your own from the Firebase Console.

// firebase-config.ts

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "YOURAPIKEY",
  authDomain: "YOURAUTHDOMAIN",
  projectId: "YOURPROJECTID",
  messagingSenderId: "YOURMESSAGINGSENDER_ID",
  appId: "YOURAPPID"
};

// Initialize Firebase
const firebaseApp = firebase.initializeApp(firebaseConfig);

// Export the initialized firebase app
export default firebaseApp;

Place this file in a suitable folder (for example, in a folder called "config" or in the root directory of your project).

 

Step 4: Set Up Firebase Cloud Messaging in Your Main TypeScript File

 

In your main TypeScript file (for example, index.ts), import the Firebase configuration and initialize Firebase Cloud Messaging. Add the following code to request user permission for notifications, retrieve the messaging token, and handle messages:

// index.ts

import firebaseApp from "./firebase-config";

// Initialize Firebase Messaging
const messaging = firebase.messaging();

// Request permission to send notifications
function requestNotificationPermission() {
  console.log("Requesting notification permission...");
  Notification.requestPermission().then((permission) => {
    if (permission === "granted") {
      console.log("Notification permission granted.");
      
      // Get the registration token
      messaging.getToken().then((currentToken) => {
        if (currentToken) {
          console.log("Firebase Messaging Token:", currentToken);
          // TODO: Send this token to your server for sending notifications.
        } else {
          console.warn("No registration token available. Request permission to generate one.");
        }
      }).catch((err) => {
        console.error("An error occurred while retrieving token. ", err);
      });
      
    } else {
      console.warn("Unable to get permission to notify.");
    }
  });
}

// Call the notification permission function
requestNotificationPermission();

// Handle incoming messages when the app is in the foreground
messaging.onMessage((payload) => {
  console.log("Message received. ", payload);
  // TODO: Display a notification or update the UI based on the payload.
});

Insert this code where your application's initialization code runs. This ensures that when your application starts, it sets up Firebase Messaging and requests notification permission from the user.

 

Step 5: Create the Firebase Messaging Service Worker

 

For background notifications to work, you need a service worker. Create a new file in the root directory of your project named firebase-messaging-sw.js and add the following code:

// firebase-messaging-sw.js

// Import Firebase scripts for the service worker.
importScripts("https://www.gstatic.com/firebasejs/9.22.2/firebase-app-compat.js");
importScripts("https://www.gstatic.com/firebasejs/9.22.2/firebase-messaging-compat.js");

// Initialize the Firebase app in the service worker by passing in your Firebase configuration.
firebase.initializeApp({
  apiKey: "YOURAPIKEY",
  authDomain: "YOURAUTHDOMAIN",
  projectId: "YOURPROJECTID",
  messagingSenderId: "YOURMESSAGINGSENDER_ID",
  appId: "YOURAPPID"
});

// Retrieve an instance of Firebase Messaging
const messaging = firebase.messaging();

// Background message handler
messaging.onBackgroundMessage((payload) => {
  console.log("Received background message ", payload);
  // Customize notification here
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
    // icon: '/firebase-logo.png' // Optionally add an icon
  };

  self.registration.showNotification(notificationTitle, notificationOptions);
});

Place this file at the root of your project so that it is accessible by the browser when the service worker is registered.

 

Step 6: Register the Service Worker in Your Application

 

To enable the service worker for background messaging, add the following registration code in your main TypeScript file (index.ts), typically near the top of the file after Firebase is initialized:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/firebase-messaging-sw.js')
    .then((registration) => {
      console.log('Service Worker registration successful with scope: ', registration.scope);
      // Associate the service worker with Firebase Messaging
      firebase.messaging().useServiceWorker(registration);
    }).catch((err) => {
      console.error('Service Worker registration failed: ', err);
    });
}

Insert this code before or after you call the notification permission function to ensure the service worker is registered early in the app lifecycle.

 

Step 7: Final Overview and Testing

 

• Ensure all configuration values (apiKey, authDomain, etc.) in both firebase-config.ts and firebase-messaging-sw.js match the values from your Firebase Console.
• Make sure the script tags for Firebase are properly included in your project’s HTML.
• Test your application by launching it; the browser should prompt for notification permission, and upon granting it, you should see the Firebase Messaging token logged in the console.
• Send test notifications from the Firebase Console to verify that background notifications are handled by the service worker.

By following these steps, you have integrated Firebase Cloud Messaging into your Bolt.new AI project using TypeScript.