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
Environment Setup
Configure SaaSStinger Lite environment variables for local development, Firebase Emulator testing, and production deployment.
Release Checklist
A production release checklist for verifying SaaSStinger Lite before deployment.
Deployment Platforms
Compare hosting options for SaaSStinger Lite and understand deployment considerations for different platforms.