Frontend Development Setup

How to set up cc-backend for fast frontend development iteration

Overview

The cc-backend web frontend is built with Svelte. By default, the compiled frontend assets are embedded directly in the Go binary. During frontend development this is impractical — use the setup below to enable fast rebuild-on-save iteration without recompiling the backend.

For all other aspects of the development process (branching, commits, PRs) follow the Developer Workflow guide.


Setup

1. Disable embedded static files

In config.json, set:

"embed-static-files": false,
"static-files": "./web/frontend/public/"

This tells cc-backend to serve assets from disk rather than from the embedded filesystem.

2. Start the frontend build in watch mode

In the ./web/frontend directory:

npm run dev

This starts the Rollup build in listen mode. Whenever you save a source file, the affected JavaScript targets are rebuilt automatically.

If the output is minified when you expect it not to be, set the production flag manually in ./web/frontend/rollup.config.mjs:

const production = false

This should normally be set automatically based on the npm script, but the override is available if needed.

3. Start cc-backend

From the repository root:

./cc-backend -server -dev

Because assets are served by cc-backend (not a separate dev server), you must reload the page in your browser manually after each frontend rebuild.


A common setup is three terminals running concurrently:

TerminalDirectoryCommand
1repository root./cc-backend -server -dev
2./web/frontendnpm run dev
3anyeditor / shell for source edits