Web App Deploying to Firebase Hosting

Step 11: Deploying the Web App to Firebase Hosting

After setting up your project, you can deploy your Flutter web application to Firebase Hosting using the following steps.

A. Build the Web Application

First, clean and fetch dependencies, then build the web app in release mode:

flutter clean

flutter pub get

flutter build web --release

This process will create a build/web folder containing the final version of the application.

B. Deploy to Firebase Hosting

Run the following command to deploy the application:

firebase deploy --only hosting

Once deployed, Firebase will generate a hosting URL where your app is available.

C. Verify the Deployment

After successful deployment, check the Firebase Console for the hosting URL:

D. Adding a Custom Domain

If you want to use a custom domain instead of the default Firebase-provided URL, follow these steps:

Go to Firebase Console > Hosting.
Click on Add custom domain.
Enter your domain name (e.g., yourdomain.com).
Follow the verification steps and update your DNS records.
Once verified, Firebase will serve your app from the custom domain.

For more details, refer to Firebase Custom Domain Setup.

🎨 Customizing Web App Icons & Branding

Before deploying your web app, customize the icons and logos with your school's branding:

Web Icons & PWA Assets

Replace files in web/icons/ and web/favicon.png:

Icon-192.png (192x192 px)
Icon-512.png (512x512 px)
Icon-maskable-192.png (192x192 px)
Icon-maskable-512.png (512x512 px)
favicon.png (32x32 px or larger)

Web Logo Assets

Replace files in web/img/:

logo.png - Web splash screen logo

Static Logos (In-App Branding)

Replace files in assets/images/logo/:

logo.png - Main logo (login screens, navigation)
logo-sm.png - Small logo (left sidebar)
appstore.png - App Store promotional image
playstore.png - Play Store promotional image

💡 Web Icon Requirements

PWA Icons: Must be exactly 192x192 and 512x512 px
Favicon: Multiple sizes recommended (16x16, 32x32, 48x48)
Format: PNG for icons, SVG for logos (if supported)
Design: Simple, recognizable at small sizes

⚠️ Important: Icon changes require a full app restart. Test on different browsers and devices after making changes.

🔔 Firebase Messaging Service Worker Configuration

⚠️ CRITICAL: The web/firebase-messaging-sw.js file is essential for web push notifications to work!

Why This File is REQUIRED:

Essential for web push notifications - Without it, web notifications won't work
Required by Firebase Messaging Web SDK - The Flutter web plugin expects this file
Handles background notifications - When app is closed/minimized
Service worker registration - Required for web push functionality

What Buyers Must Do:

DO NOT DELETE this file - It's essential for web functionality. Instead, replace the Firebase configuration values with their own project details:

// Firebase configuration
const firebaseConfig = {
  apiKey: "YOUR_FIREBASE_API_KEY",
  authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT_ID.firebasestorage.app",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID",
  measurementId: "YOUR_MEASUREMENT_ID"
};
            

📝 Documentation for Buyers

File: web/firebase-messaging-sw.js

Purpose: Firebase Cloud Messaging service worker for web push notifications

Required: ✅ Yes - Essential for web notifications

Buyer Action: Replace Firebase config values with their own project details

🚨 WARNING: Without this file, web push notifications will fail completely!