# Hot‑Reloading and Development Server Configuration in Codebase‑Memory‑MCP

> Discover how to configure hot-reloading and the Vite development server in codebase-memory-mcp. Enjoy HMR enabled by default for a smoother development workflow.

- Repository: [Martin Vogel/codebase-memory-mcp](https://github.com/DeusData/codebase-memory-mcp)
- Tags: how-to-guide
- Published: 2026-07-14

---

**The codebase‑memory‑mcp UI includes a Vite‑powered development server with hot‑module‑replacement (HMR) enabled by default, listening on port 5173 and proxying API requests to the MCP back‑end on port 9749.**

The DeusData/codebase‑memory‑mcp repository provides a React‑based visualization UI built with Vite. Understanding the **hot‑reloading and development server configurations** allows developers to run the front‑end locally with instant feedback while maintaining seamless communication with the MCP back‑end.

## Vite Configuration for Hot‑Module Replacement

In [`graph-ui/vite.config.ts`](https://github.com/DeusData/codebase-memory-mcp/blob/main/graph-ui/vite.config.ts), the development server is explicitly configured to enable rapid iteration. The `server` block defines port **5173** as the entry point for the UI and sets up a proxy to forward API calls to the locally running MCP server.

```typescript
// graph-ui/vite.config.ts
server: {
  port: 5173,
  proxy: {
    "/rpc": "http://127.0.0.1:9749",
    "/api": "http://127.0.0.1:9749",
  },
},

```

This configuration ensures that any changes to files under `graph-ui/src` trigger an incremental rebuild. Vite injects the updated modules directly into the browser without a full page refresh, preserving application state during development.

## Starting the Development Server

To launch the UI with hot‑reloading enabled, navigate to the `graph-ui` directory and execute the development script defined in [`package.json`](https://github.com/DeusData/codebase-memory-mcp/blob/main/package.json).

```bash
cd graph-ui
npm install
npm run dev

```

By default, this command starts the Vite dev server on `http://localhost:5173`. The development script automatically enables HMR, so editing components such as [`src/components/NodeLabels.tsx`](https://github.com/DeusData/codebase-memory-mcp/blob/main/src/components/NodeLabels.tsx) will instantly reflect in the browser without requiring a manual reload.

## Running the Back‑End Alongside the UI

For full functionality, you must run the MCP server simultaneously to handle API requests. The Vite dev server proxies specific routes to this back‑end.

```bash

# In a separate terminal

codebase-memory-mcp --ui=true --port=9749

```

The proxy configuration in [`vite.config.ts`](https://github.com/DeusData/codebase-memory-mcp/blob/main/vite.config.ts) intercepts requests to `/rpc` and `/api`, forwarding them to `http://127.0.0.1:9749`. This setup eliminates CORS issues during local development and allows the React application to communicate with the knowledge graph API as if both were served from the same origin.

## Summary

- The UI uses **Vite** with HMR pre‑configured in [`graph-ui/vite.config.ts`](https://github.com/DeusData/codebase-memory-mcp/blob/main/graph-ui/vite.config.ts).
- The development server runs on **port 5173** by default.
- API requests to `/rpc` and `/api` are proxied to the MCP back‑end on **port 9749**.
- Start the UI with `npm run dev` inside the `graph-ui` folder.
- Run the back‑end separately with `codebase-memory-mcp --ui=true --port=9749` to enable full stack development.

## Frequently Asked Questions

### What port does the development server use?

The Vite development server listens on **port 5173** by default, as defined in [`graph-ui/vite.config.ts`](https://github.com/DeusData/codebase-memory-mcp/blob/main/graph-ui/vite.config.ts). You can override this by passing the `--port` flag to the Vite CLI or modifying the `server.port` value in the configuration file.

### Is hot‑reloading available by default?

Yes. Hot‑module‑replacement (HMR) is enabled automatically when you run `npm run dev`. Vite monitors files in `graph-ui/src` and pushes updates to the browser instantly without requiring a manual refresh.

### Why does the configuration proxy requests to port 9749?

The proxy routes API calls to the MCP back‑end running on port 9749 to avoid CORS restrictions during development. This allows the React UI to make requests to `/api` and `/rpc` as relative paths while the Vite server forwards them to the actual MCP server.

### Can I change the back‑end port that the UI connects to?

Yes. Edit the `proxy` object in [`graph-ui/vite.config.ts`](https://github.com/DeusData/codebase-memory-mcp/blob/main/graph-ui/vite.config.ts) and update the target URL from `http://127.0.0.1:9749` to your desired port. Ensure you also launch the MCP server using the matching `--port` flag so the proxy target remains valid.