Deployment Guide¶

Complete guide to deploying Skigk Søkeapp to production.

Firebase Hosting Deployment¶

Prerequisites¶

✅ Firebase CLI installed: npm install -g firebase-tools
✅ Firebase project created: skigk-soekeapp
✅ Google Cloud credentials configured
✅ .env.local with OAuth and Gemini keys

Step 1: Build Production Bundle¶

npm run build

Output: - Optimized Angular bundle in dist/ folder - Minified JavaScript (~450 KB) - Compressed CSS and HTML

Verify build:

ls -la dist/
# Should contain:
# - index.html
# - main-XXXXXX.js
# - 3rdpartylicenses.txt

Step 2: Authenticate with Firebase¶

firebase login

Or for CI/CD environments:

firebase login:ci
# Generates a token for automated deployments

Step 3: Configure Firebase Project¶

.firebaserc:

{
  "projects": {
    "default": "skigk-soekeapp"
  }
}

firebase.json:

{
  "hosting": {
    "public": "dist",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {
        "source": "**/*.@(js|css)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=31536000, immutable"
          }
        ]
      }
    ]
  }
}

Step 4: Deploy to Firebase¶

firebase deploy --only hosting

Output Example:

=== Deploying to 'skigk-soekeapp'...

i  deploying hosting
i  hosting[skigk-soekeapp]: beginning deploy...
i  hosting[skigk-soekeapp]: found 4 files in dist
+  hosting[skigk-soekeapp]: file upload complete
i  hosting[skigk-soekeapp]: finalizing version...
+  hosting[skigk-soekeapp]: version finalized
i  hosting[skigk-soekeapp]: releasing new version...
+  hosting[skigk-soekeapp]: release complete

+  Deploy complete!

Project Console: https://console.firebase.google.com/project/skigk-soekeapp/overview
Hosting URL: https://skigk-soekeapp.web.app

Step 5: Verify Deployment¶

Visit the app:
https://skigk-soekeapp.web.app
Check Firebase Console:
https://console.firebase.google.com/project/skigk-soekeapp/hosting/
Verify HTTPS and SSL:
Green lock icon in browser
Valid SSL certificate

Custom Domain Setup¶

Option 1: Google Domain¶

Go to Google Domains
Select your domain (e.g., search.skigk.no)
Go to DNS → Manage custom records
Point to Firebase:
Type: CNAME
Name: search
Value: ghs.googlehosted.com
In Firebase Console:
Hosting → Custom domains
Add domain: search.skigk.no
Verify DNS records
Deploy certificate (auto)

Option 2: Other DNS Providers¶

Contact your DNS provider for CNAME setup to ghs.googlehosted.com

Verification time: 24-72 hours

GitHub Actions CI/CD¶

Automate deployments on every push to main branch.

Step 1: Generate Firebase Token¶

firebase login:ci

Save the token - you'll need it for GitHub Secrets.

Step 2: Add GitHub Secret¶

Go to your GitHub repo
Settings → Secrets and variables → Actions
Click New repository secret
Name: FIREBASE_TOKEN
Value: (paste token from Step 1)

Step 3: Create GitHub Actions Workflow¶

Create file: .github/workflows/deploy.yml

name: Deploy to Firebase

on:
  push:
    branches: [ main ]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Build
        run: npm run build

      - name: Deploy to Firebase
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: ${{ secrets.GITHUB_TOKEN }}
          firebaseServiceAccount: ${{ secrets.FIREBASE_TOKEN }}
          projectId: skigk-soekeapp

Step 4: Test Workflow¶

Push a commit to main branch
Go to Actions tab on GitHub
Watch deployment progress
Check Firebase console for new deployment

Now every push automatically deploys! 🎉

Environment Variables¶

Development (.env.local)¶

VITE_GOOGLE_CLIENT_ID=xxx.apps.googleusercontent.com
VITE_GEMINI_API_KEY=xxx
VITE_DEBUG=true

Production (Firebase)¶

For sensitive keys, use Google Cloud Secret Manager:

Go to Security → Secret Manager
Create secret:
Name: gemini-api-key
Value: (your key)
Grant Firebase Hosting permissions

Or set environment variables in Firebase:

firebase functions:config:set gemini.api_key="xxx"
firebase deploy

Monitoring & Logging¶

Firebase Analytics¶

Go to Hosting dashboard
View:
Page views
Traffic
Performance metrics
Error rates

View Logs¶

firebase hosting:log

Google Cloud Logging¶

Go to Google Cloud Console
Logging → Logs
Search for skigk-soekeapp

Rollback¶

Revert to Previous Deployment¶

firebase hosting:releases:list
firebase hosting:releases:rollback <version>

Or use Firebase Console: 1. Hosting → Releases 2. Click "Rollback" on any release

Performance Optimization¶

Caching¶

Firebase automatically: - ✅ Caches JS/CSS files (1 year) - ✅ Disables cache for index.html - ✅ Serves from global CDN edge locations

Compression¶

✅ Gzip enabled automatically
✅ Angular CLI minifies bundles
✅ Tailwind CSS tree-shakes unused styles

Bundle Size¶

Check bundle size before deploy:

npm run build -- --stats-json
npm run bundle-report  # if configured

Troubleshooting¶

"Cannot find index.html"¶

npm run build
ls dist/index.html  # Should exist

"Unauthorized" during deploy¶

firebase logout
firebase login
firebase deploy

Deploy takes too long¶

Check internet connection
Reduce bundle size (remove unused dependencies)
Check Firebase project has sufficient quota

App loads but shows blank page¶

Check browser console (F12) for errors
Clear cache: Ctrl+Shift+Delete

Check if environment variables are accessible:

console.log(import.meta.env.VITE_GOOGLE_CLIENT_ID)

Production Checklist¶

Before deploying to production:

[ ] All tests pass: npm test
[ ] Build successful: npm run build
[ ] No console errors
[ ] .env.local has production keys
[ ] Firebase project exists and is verified
[ ] OAuth client ID includes production domain
[ ] Custom domain configured (if applicable)
[ ] HTTPS enabled (automatic with Firebase)
[ ] Firebase Analytics dashboard configured
[ ] Error monitoring configured
[ ] Backup strategy documented

Next Steps¶

Setup GitHub Actions CI/CD
Monitor with Analytics
Scale with Cloud Functions

Last Updated: January 2026 | Version: 1.0