Intermediate4 min read

Deployment Architecture

Understand how to deploy SaaSStinger Lite to production using Vercel and compatible hosting platforms.

Deployment Architecture

SaaSStinger Lite is designed as a modern Next.js application with Firebase as the backend platform.

The recommended production architecture uses:

  • Next.js application hosting
  • Firebase Authentication
  • Cloud Firestore
  • Firebase Admin SDK
  • Environment-based configuration

Recommended Deployment

The recommended hosting platform is:

Vercel

Vercel provides native support for:

  • Next.js applications
  • App Router
  • Server Components
  • Server Actions
  • Automatic deployments

Deployment flow:

Developer

    │

    ▼

Git Repository

    │

    ▼

Vercel Build

    │

    ▼

Production Application

    │

    ▼

Firebase Services

Production Architecture

The production stack:

User Browser

      │

      ▼

Next.js Application

      │

      ├── Server Components
      │
      ├── Server Actions
      │
      └── Client Components

      │

      ▼

Firebase

      ├── Authentication
      ├── Firestore
      └── Admin SDK

Deployment Requirements

Before deploying, ensure:

  • Firebase project is configured
  • Authentication providers are enabled
  • Firestore database exists
  • Environment variables are configured
  • Production Firebase rules are deployed

Environment Variables

SaaSStinger Lite uses two groups of Firebase configuration variables.

Client Variables

These are exposed to the browser.

NEXT_PUBLIC_FIREBASE_API_KEY=

NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=

NEXT_PUBLIC_FIREBASE_PROJECT_ID=

NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=

NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=

NEXT_PUBLIC_FIREBASE_APP_ID=

Server Variables

These are used by the Firebase Admin SDK.

FIREBASE_PROJECT_ID=

FIREBASE_CLIENT_EMAIL=

FIREBASE_PRIVATE_KEY=

These values must remain server-side.


Deployment Steps

Step 1: Prepare the Repository

Install dependencies:

pnpm install

Verify locally:

pnpm lint

pnpm tsc --noEmit

pnpm build

Step 2: Configure Firebase

Ensure:

  • Authentication is enabled
  • Firestore rules are deployed
  • Required indexes exist

Deploy rules:

firebase deploy --only firestore:rules

Deploy indexes:

firebase deploy --only firestore:indexes

Step 3: Configure Environment Variables

Create:

.env.local

during local development.

For production, add the same variables inside the hosting provider dashboard.


Step 4: Deploy to Vercel

Connect the repository to Vercel.

The platform will:

  • Install dependencies
  • Run the Next.js build
  • Deploy the application

Firebase Configuration

After deployment, update Firebase settings.

Examples:

Authentication Domains

Add the production domain:

your-domain.com

to Firebase Authentication authorized domains.


Firestore Rules

Production deployments must use production rules.

Never deploy with open development rules.


Firebase Spark Plan Compatibility

SaaSStinger Lite is designed to work within Firebase Spark plan limitations.

The Lite version avoids:

  • Cloud Functions
  • Scheduled jobs
  • Background workers

This keeps deployment simple and affordable.


Alternative Hosting Platforms

Although Vercel is recommended, SaaSStinger Lite can also be deployed elsewhere.

Examples:

  • Cloudflare Pages
  • Self-managed Node.js hosting
  • Other Next.js-compatible platforms

Vercel vs Alternatives

Vercel

Recommended because:

  • Best Next.js integration
  • Simple deployment workflow
  • Excellent App Router support

Cloudflare

Possible when:

  • Edge deployment is required
  • Teams prefer Cloudflare infrastructure

Considerations:

  • Some Next.js server features may require additional configuration.

Self Hosting

Possible when:

  • Full infrastructure control is required
  • A managed Node.js environment exists

Requires handling:

  • Updates
  • Scaling
  • Monitoring

Production Checklist

Before going live:

Application

  • Build succeeds
  • Environment variables configured
  • No development secrets exposed

Firebase

  • Rules deployed
  • Indexes deployed
  • Authentication domains configured

Security

  • Admin credentials protected
  • Firestore rules tested
  • Workspace isolation verified

Common Deployment Issues

Missing Environment Variables

Symptoms:

  • Firebase initialization errors
  • Authentication failures

Solution:

Verify production environment variables.


Firebase Authentication Domain Errors

Symptoms:

  • Login works locally but fails in production

Solution:

Add production domain to Firebase authorized domains.


Admin SDK Errors

Symptoms:

  • Server-side operations fail

Solution:

Verify:

FIREBASE_PROJECT_ID

FIREBASE_CLIENT_EMAIL

FIREBASE_PRIVATE_KEY

Best Practices

  • Use separate Firebase projects for development and production.
  • Keep secrets outside source control.
  • Test production builds locally.
  • Deploy Firestore rules with application changes.
  • Monitor Firebase usage.

Related Articles

  • Environment Variables
  • Firebase Setup
  • Security Architecture
  • Background Processes
  • Deployment Checklist

Next Steps

Continue with Production Environment Setup to configure local and hosted environments correctly.

Related Articles