Local Development

VerifiedSafe

Provides commands for running functions locally (npx nx run functions:serve), the web app (npx nx run maple-spruce:serve), and Storybook. Covers troubleshooting emulator issues, such as missing .env files, with fixes. Helpful when developing locally and debugging emulator problems.

Sby Skills Guide Bot
DevelopmentIntermediate
1506/2/2026
Claude Code
#local-development#firebase-emulator#storybook#troubleshooting#nx

Recommended for

Our review

This skill provides commands to run Firebase functions, a web app, and Storybook locally, along with troubleshooting tips for the emulator.

Strengths

  • Step-by-step instructions for local development
  • Detailed troubleshooting for emulator issues
  • Covers multiple tools (Firebase, NX, Storybook)
  • Clear handling of environment variables

Limitations

  • Assumes a specific project structure (NX, Firebase)
  • Does not cover production deployment
  • May require manual cleanup if stale processes interfere
When to use it

Use this skill when you need to run or debug the web app and functions locally, including setting up the emulator or running Storybook.

When not to use it

Do not use this skill for production deployment or for projects not using NX and Firebase.

Security analysis

Safe
Quality score90/100

The skill provides instructions for local development commands (nx, firebase, storybook) that the user runs manually; no destructive or exfiltrating operations are included, and the agent is explicitly not executing them.

No concerns found

Examples

Run functions locally
How do I run the Firebase functions locally for testing?
Troubleshoot emulator env vars
The Firebase emulator is not loading my .env file. How can I fix it?
Run Storybook
I want to view the Storybook for my components. What command should I run?

name: local-development description: Running functions and web app locally, troubleshooting emulator issues, Storybook. Use when running or debugging locally.

Local Development

When to Use

Use this skill when running the web app or functions locally, troubleshooting emulator issues, or running Storybook.

Important

The user runs functions and web app locally for testing. Claude writes code and creates PRs -- Claude does NOT deploy or run dev servers.

Running Functions Locally (user runs this)

npx nx run functions:serve

This command:

  1. Builds the functions
  2. Copies .env.dev to dist/apps/functions/.env
  3. Starts watch mode for rebuilds (background)
  4. Runs firebase serve --only functions --project=dev on port 5001

Running Web App Locally (user runs this)

npx nx run maple-spruce:serve

Runs on http://localhost:3000

Running Storybook

npx nx run maple-spruce:storybook
# Opens http://localhost:6006

Building Storybook:

npx nx run maple-spruce:build-storybook
# Output: dist/storybook/maple-spruce

Running Tests

npm test

Deployment

User decides when to deploy to dev. Production deploys automatically via CI/CD on merge to main.

Troubleshooting Local Functions

Emulator prompts for environment variables

The Firebase emulator is not finding the .env file. This happens when:

  • The build clears dist/apps/functions/ before the .env is copied
  • A stale watch process is interfering

Fix:

# Kill any stale processes
pkill -f "firebase serve"
pkill -f "nx run functions"

# Clean and restart
rm -rf dist/apps/functions
npx nx run functions:serve

Why this happens:

  • Firebase reads .env from dist/apps/functions/
  • The nx run functions:build clears this directory
  • The serve command copies .env.dev after build, before starting the emulator
  • If ordering is wrong or stale processes exist, the emulator starts without the .env

Key indicator it's working:

i  functions: Loaded environment variables from .env.
Related skills