Running the Development Server

After installing SaaSStinger Lite and configuring Firebase, you're ready to launch the application locally.

The development server provides hot reloading, fast refresh, and a complete development environment for building your SaaS application.

What You'll Learn

In this guide you'll learn how to:

• Start the development server
• Verify your environment
• Understand what happens during startup
• Troubleshoot common startup issues

Prerequisites

Before continuing, ensure you've completed:

• Installation
• Firebase Setup
• Environment Variables
• Your First Workspace

You should also have:

• Node.js 22 LTS
• pnpm 10+
• A configured .env.local file

Start the Server

From the project root, run:

pnpm dev

Next.js starts the local development server.

A successful startup looks similar to:

▲ Next.js

Local:   http://localhost:3000

Ready in 2.3s

Open the Application

Open your browser and navigate to:

http://localhost:3000

You should see the SaaSStinger Lite application running locally.

Sign In

Log in using the account you created during onboarding.

After signing in, you'll be taken to your workspace dashboard.

If you've already completed onboarding, your existing workspace will load automatically.

What Happens During Startup?

When the development server starts, SaaSStinger Lite performs several initialization steps.

• Loads environment variables
• Initializes the Firebase Client SDK
• Initializes the Firebase Admin SDK
• Creates the React application
• Loads the Next.js App Router
• Connects to your configured Firebase project

Once initialization is complete, the application is ready for development.

Automatic Reloading

SaaSStinger Lite uses Next.js Fast Refresh.

Whenever you save a file:

• Components update automatically
• Styles refresh instantly
• Most application state is preserved

This allows you to iterate quickly without manually restarting the server.

Local Development Workflow

A typical development session looks like this:

pnpm dev
      │
      ▼
Open localhost:3000
      │
      ▼
Edit Code
      │
      ▼
Save File
      │
      ▼
Browser Updates Automatically

Using Your Firebase Project

By default, SaaSStinger Lite connects directly to the Firebase project configured in your .env.local file.

This means:

• Authentication uses your Firebase project.
• Firestore reads and writes use your database.
• Workspace data is stored in your project.
• Usage tracking is stored in your project.

No additional configuration is required for local development.

Development Tips

During development:

• Keep the terminal open while working.
• Monitor the browser console for client-side errors.
• Monitor the terminal for server-side errors.
• Restart the server after changing environment variables.

Common Mistakes

Missing Environment Variables

If Firebase fails to initialize, verify that all required variables exist in .env.local.

Wrong Firebase Project

Double-check that your environment variables reference the intended Firebase project.

Using production credentials during development can lead to unexpected changes to live data.

Dependency Errors

If dependencies are missing, reinstall them.

pnpm install

Port Already in Use

If port 3000 is unavailable, Next.js may prompt you to use another available port.

Open the URL displayed in your terminal.

Verify Everything Works

A successful setup should allow you to:

• Sign in
• View your dashboard
• Access your workspace
• Create and manage resources
• Navigate without errors

If all of these work correctly, your local environment is ready.

Related Articles

• Project Structure
• Authentication
• Workspaces
• Deployment

Next Steps

You're now ready to begin exploring the core features of SaaSStinger Lite.

Continue with Your First Login to learn how authentication, user sessions, and onboarding work together.