Deploy Web App
ShipFlutter web apps are optimized for Firebase Hosting, providing fast and secure hosting with automatic SSL and CDN.
Prerequisites
-
Install Firebase CLI:
Terminal window npm install -g firebase-tools -
Login to Firebase:
Terminal window firebase login -
Enable App Check for web (see App Check setup)
Configure Firebase
-
Initialize Firebase in your project root:
Terminal window firebase init -
Select the following features:
- Hosting
- Emulators (optional, for local testing)
-
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
-
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> -
Build the web app:
Terminal window flutter build web --release \--web-renderer canvaskit \--dart-define=FIREBASE_APPCHECK_DEBUG_TOKEN=false -
Test the production build locally:
Terminal window firebase serve --only hosting
Deploy
-
Deploy to Firebase Hosting:
Terminal window firebase deploy --only hosting -
Your app will be available at:
https://<project-id>.web.app
https://<project-id>.firebaseapp.com
-
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 Hostingon: 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
-
Optimize Assets
- Compress images using WebP format
- Use appropriate image sizes
- Lazy load non-critical resources
-
PWA Support
- Update
manifest.json
with your app info - Add necessary icons in
web/icons
- Test offline functionality
- Update
-
SEO
- Add proper meta tags
- Include a sitemap
- Set up robots.txt