Skip to content
Documentation

Deploy Web App

ShipFlutter web apps are optimized for Firebase Hosting, providing fast and secure hosting with automatic SSL and CDN.

Prerequisites

  1. Install Firebase CLI:

    Terminal window
    npm install -g firebase-tools

  2. Login to Firebase:

    Terminal window
    firebase login

  3. Enable App Check for web (see App Check setup)

Configure Firebase

  1. Initialize Firebase in your project root:

    Terminal window
    firebase init

  2. Select the following features:

    • Hosting
    • Emulators (optional, for local testing)

  3. Configure hosting:

    • Select your Firebase project
    • Use build/web as the public directory
    • Configure as a single-page app
    • Set up automatic builds and deploys (optional)

Build for Production

  1. Update web/index.html:

    <head>
      <!-- Add your meta tags -->
      <meta name="description" content="Your app description">
      <meta name="theme-color" content="#FFFFFF">
    

      <!-- Add your web app manifest -->
      <link rel="manifest" href="manifest.json">
    </head>

  2. Build the web app:

    Terminal window
    flutter build web --release \
      --web-renderer canvaskit \
      --dart-define=FIREBASE_APPCHECK_DEBUG_TOKEN=false

  3. Test the production build locally:

    Terminal window
    firebase serve --only hosting

Deploy

  1. Deploy to Firebase Hosting:

    Terminal window
    firebase deploy --only hosting

  2. Your app will be available at:

    • https://<project-id>.web.app
    • https://<project-id>.firebaseapp.com

  3. Set up a custom domain (optional):

    • Go to Firebase Console > Hosting
    • Click “Add custom domain”
    • Follow the DNS configuration steps

CI/CD Setup

For automated deployments, add this to your GitHub Actions workflow:

name: Deploy to Firebase Hosting
on:
  push:
    branches: [ main ]


jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3


      - uses: subosito/flutter-action@v2
        with:
          channel: 'stable'


      - run: flutter build web --release


      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT }}'
          channelId: live

Performance Tips

  1. Optimize Assets

    • Compress images using WebP format
    • Use appropriate image sizes
    • Lazy load non-critical resources

  2. PWA Support

    • Update manifest.json with your app info
    • Add necessary icons in web/icons
    • Test offline functionality

  3. SEO

    • Add proper meta tags
    • Include a sitemap
    • Set up robots.txt