Run it locally
One command starts the site, the admin area and the member area on your computer. They work against the real Firebase project you configured, so deploy the functions and rules once before you start.
Start the dev server
npm run dev
Open http://localhost:5173. Changes to the app's code show in the browser as you save.
To use another port, for example to run a second copy next to the first:
PORT=5174 npm run dev
It talks to your real Firebase project
The local app connects to the project of your default alias, using the src/environments/firebase-web.<projectId>.ts that npm run arc:configure wrote (else the project in src/environments/environment.ts). It prints which one as it starts: Firebase project: <id> (...). With none set up it stops and says to run npm run arc:configure (see Configure a project). To run against another project, start it with ARC_PROJECT=<alias> npm run dev. There is no emulator: the app never connects to one, so everything you do locally reads and writes the real Firestore, Authentication and Storage of that project, and calls the Cloud Functions deployed there.
| You change | Shows locally |
|---|---|
Pages, components, styles (src/) | At once |
Templates and static pages (public/) | On the next page load |
Cloud Functions (functions/src/) | Only after you deploy them (see Deploy only what changed) |
| Security rules and indexes | Only after you deploy them |
A fix in functions/src/ that "does not work" in the browser is usually a fix that is not deployed: the local app still calls the old function. Deploy the changed function, then test. Starting the Firebase emulators does not help, because the app does not use them.
Use a development Firebase project for this. Sign-ups, content and emails you create locally are real, in whichever project the start-up line names.
What you see on first load
- A fresh project, functions and rules deployed: the home page sends you to
/onboarding, the setup wizard that creates the first admin. Go on with Create the first admin. - A fresh project, rules not deployed yet: the home page loads and no wizard appears. The check that decides whether setup is needed cannot read the database, so it assumes setup is done. Deploy first (see Deploy for the first time), then reload.
- A project that is already set up: the site's home page.
To see the home page of a fresh project without being sent to the wizard, add ?debug to the address.
When the dev server restarts
Saving vite.config.ts or a file it reads restarts the dev server. That includes src/custom/features.ts and src/custom/pwa.ts. When src/custom/features.ts names an unknown feature, lists one in both on and off, or turns off a feature another needs, npm run dev does not start and prints a message saying what to change (see Feature ids). A running dev server prints the message followed by "server restart failed" and keeps serving the previous choice until you fix the file.
When it runs out of memory
Each restart builds a new server with its own Angular compiler. vite.config.ts frees each old server when it closes, so memory grows once, on the first restart, and then stays level instead of climbing with every change.
If the dev server still stops with "JavaScript heap out of memory", start it again. If it happens often, give Node more memory:
NODE_OPTIONS=--max-old-space-size=8192 npm run dev
Other problems are on Troubleshooting.