Environment Setup
Configure SaaSStinger Lite environment variables for local development, Firebase Emulator testing, and production deployment.
Environment Setup
SaaSStinger Lite uses environment variables to configure Firebase services and application settings.
Environment configuration allows developers to:
- Run the application locally
- Test with Firebase Emulator
- Deploy to production safely
Environment File
The project uses:
.env.local
for local development.
The recommended setup process is:
cp .env.example .env.local
Then edit:
.env.local
with your Firebase project values.
Environment Variables
SaaSStinger Lite currently requires Firebase configuration only.
There are two categories:
- Client-side Firebase variables
- Server-side Firebase Admin variables
Client-Side Variables
These variables are safe to expose to the browser because they identify the Firebase application.
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-Side Variables
These variables are used by Firebase Admin SDK.
They must never be exposed publicly.
FIREBASE_PROJECT_ID=
FIREBASE_CLIENT_EMAIL=
FIREBASE_PRIVATE_KEY=
These credentials allow server-side access to Firebase services.
Firebase Admin SDK Configuration
SaaSStinger Lite uses individual environment variables.
The project does not use:
- Service account JSON files
- Base64 encoded credentials
- Embedded credentials
The Admin SDK is initialized from:
FIREBASE_PROJECT_ID
FIREBASE_CLIENT_EMAIL
FIREBASE_PRIVATE_KEY
Local Development Setup
After creating .env.local:
Install dependencies:
pnpm install
Run development mode:
pnpm dev
The application will use your Firebase configuration.
Firebase Emulator Setup
SaaSStinger Lite supports Firebase Emulator testing.
The emulator allows developers to test locally without affecting production data.
Starting the Emulator
Run:
firebase emulators:start
The emulator environment can be used for:
- Authentication testing
- Firestore testing
- Security rule validation
Emulator Workflow
Recommended development flow:
Code Change
│
▼
Run Emulator
│
▼
Test Feature
│
▼
Verify Security Rules
│
▼
Deploy
Firestore Rules Testing
The emulator should be used to verify:
- Authentication requirements
- Workspace isolation
- Role permissions
- Unauthorized access prevention
Example:
OWNER
can update workspace
MEMBER
cannot update workspace settings
Production Environment Variables
When deploying to Vercel, add the same variables in:
Vercel Project Settings
│
▼
Environment Variables
Configure:
- Production
- Preview (optional)
- Development (optional)
Vercel Deployment Flow
Production deployment:
Git Push
│
▼
Vercel Build
│
▼
Environment Variables Loaded
│
▼
Next.js Application
│
▼
Firebase Services
Security Guidelines
Never Commit Environment Files
Do not commit:
.env.local
to source control.
Protect Admin Credentials
Never expose:
FIREBASE_PRIVATE_KEY
to client-side code.
Review Environment Changes
When adding new environment variables:
- Document them
- Update
.env.example - Update deployment instructions
Current Firebase Project Model
SaaSStinger Lite currently uses:
One Firebase Project
│
├── Development testing
│
└── Production deployment
This keeps setup simple for starter kit users.
Future Scaling Considerations
Larger teams may choose:
Development Firebase Project
│
▼
Staging Firebase Project
│
▼
Production Firebase Project
This provides stronger environment isolation.
Common Problems
Application Cannot Connect to Firebase
Check:
- Environment variable names
- Firebase project ID
- Missing
.env.local
Admin SDK Errors
Verify:
FIREBASE_PROJECT_ID
FIREBASE_CLIENT_EMAIL
FIREBASE_PRIVATE_KEY
Emulator Does Not Work
Check:
- Firebase CLI installation
- Emulator configuration
- Required ports
Best Practices
- Use
.env.exampleas the setup reference. - Keep secrets outside Git.
- Test changes with Emulator.
- Validate Firestore rules locally.
- Update deployment documentation with new variables.
Related Articles
- Deployment Architecture
- Firebase Setup
- Security Architecture
- Firestore Collections
- Troubleshooting
Next Steps
Continue with Production Deployment Checklist to prepare SaaSStinger Lite for a production release.
Related Articles
Deployment Architecture
Understand how to deploy SaaSStinger Lite to production using Vercel and compatible hosting platforms.
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.