# Run the Development Server

How to run Super Productivity locally for development, or in GitHub Codespaces.

## Option 1: Local

### Prerequisites

- Node.js 20 or higher ([nodejs.org](https://nodejs.org))
- Git

### Local: Clone and Install

```bash
git clone https://github.com/super-productivity/super-productivity.git
cd super-productivity
npm i -g @angular/cli
npm i
npm run env
```

`npm run env` creates or updates the environment file once; re-run if you add or change variables.

### Local: Start the Frontend

```bash
ng serve
```

Open [http://127.0.0.1:4200](http://127.0.0.1:4200). For most UI and frontend work this is enough. [Redux DevTools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd) work in the browser.

### Local: Run the Full App (Electron)

```bash
ng serve
```

In a second terminal:

```bash
npm start
```

The Electron window will load the dev server.

## Option 2: GitHub Codespaces

1. Open the repository on GitHub.
2. Click **Code** → **Codespaces** → **Create codespace on main** (or the plus icon).
3. Wait for the dev container to build. The development server usually starts automatically.
4. Open the **Ports** tab, find the forwarded port (e.g. 4200), and use **Open in Browser** or Ctrl+Click the URL to open the app.

VS Code settings sync in the codespace. To change the dev environment, edit `.devcontainers/devcontainers.json` per [Codespaces documentation](https://docs.github.com/en/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/introduction-to-dev-containers).

## Related

- [[2.16-Set-Up-Development-Environment]] (environment variables)
- [[2.12-Package-the-App]]