Intermediate4 min read

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.example as 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