Notre avis

Ce guide fournit des commandes pour exécuter des fonctions Firebase, une application web et Storybook en local, ainsi que des astuces de dépannage pour l'émulateur.

Points forts

Instructions étape par étape pour le développement local
Dépannage détaillé des problèmes d'émulateur
Couverture de plusieurs outils (Firebase, NX, Storybook)
Gestion claire des variables d'environnement

Limites

Suppose une structure de projet spécifique (NX, Firebase)
Ne couvre pas le déploiement en production
Peut nécessiter un nettoyage manuel si des processus obsolètes interfèrent

Quand l'utiliser

Utilisez cette compétence lorsque vous devez exécuter ou déboguer localement l'application web et les fonctions, y compris la configuration de l'émulateur ou le lancement de Storybook.

Quand l'éviter

Ne l'utilisez pas pour le déploiement en production ou pour des projets n'utilisant pas NX et Firebase.

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:

Builds the functions
Copies .env.dev to dist/apps/functions/.env
Starts watch mode for rebuilds (background)
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.

Développement Local

Recommandé pour