chore: updating docs for the new way to run the UI

Author: jherr

CONTRIBUTING.md

@@ -35,3 +35,52 @@ And when creating apps with a starter:
 ```bash
 node [root of the monorepo]/cli/create-tsrouter-app/dist/index.js app-js --starter http://localhost:9080/starter.json
 ```
+
+# Developing on the CTA UI
+
+The CTA UI is somewhat tricky to develop on because it's both a web server and a React app. You need to run the CLI in "API" model and then the React app in dev mode, as well as the whole monorepo in watch mode.
+
+## Starting the API Server
+
+Let's start off with how to run the CLI in "API" mode. Here we are running the CLI in an empty directory in app creation mode.
+
+```bash
+CTA_DISABLE_UI=true node ../create-tsrouter-app/cli/create-tsrouter-app/dist/index.js --ui
+```
+
+If this is working you will see the following output:
+
+```
+Create TanStack API is running on http://localhost:8080
+```
+
+Note that it say "Create TanStack **API**" and not "Create TanStack **App**". This is important. This means that the CLI is providing API endpoints, but **not** serving the static build files of the React app.
+
+Here is the same command for the `add` mode:
+
+```bash
+CTA_DISABLE_UI=true node ../create-tsrouter-app/cli/create-tsrouter-app/dist/index.js add --ui
+```
+
+## Starting the React App
+
+Now that we have the API server running, we can start the React app in dev mode.
+
+```bash
+cd packages/cta-ui
+pnpm dev:ui
+```
+
+At this poing you should be able to navigate to `http://localhost:3000` and see the React app connected to the API server on `http://localhost:8080`.
+
+## Running the Monorepo in Watch Mode
+
+At the top level of the monorepo, run the following command to start the build in watch mode.
+
+```bash
+pnpm dev
+```
+
+This will build the monorepo and watch for changes in any of the libraries. (It will **not** build changes for the React app within the `cta-ui` package.)
+
+This is important because you might need to change API endpoints in the CTA library, or in the engine. If you do make those kinds of changes then the you will need to re-run the CLI in "API" mode to pick up the changes.

packages/cta-ui/README.md

@@ -0,0 +1,20 @@
+# Create TanStack App - User Interface
+
+This is an odd package because it's both a library that runs a web server, as well as a React SPA app that builds using Vite.
+
+## Script Commands
+
+| Command              | Description                                    |
+| -------------------- | ---------------------------------------------- |
+| `pnpm build`         | Builds **both** the library and the React app  |
+| `pnpm build:ui`      | Builds the React app only                      |
+| `pnpm build:lib`     | Builds just the `lib` directory                |
+| `pnpm dev:ui`        | Uses Vite to run the React app in dev mode     |
+| `pnpm dev`           | Builds the `lib` directory in watch mode       |
+| `pnpm test`          | Runs the tests                                 |
+| `pnpm test:watch`    | Runs the tests in watch mode                   |
+| `pnpm test:coverage` | Runs the tests and generates a coverage report |
+
+## Dev vs Prod Mode
+
+The only difference between dev and prod mode (outside of the usual minification and tree-shaking that goes into prod builds) is that in development mode the `src/lib/api.ts` uses a base URL of `http://localhost:8080` to point at the CLI running in API mode.

packages/cta-ui/package.json

@@ -9,7 +9,6 @@
     "build:lib": "tsc -p tsconfig.lib.json",
     "dev": "tsc --watch -p tsconfig.lib.json",
     "dev:ui": "VITE_API_BASE_URL=http://localhost:8080 vite dev",
-    "build:server": "tsc -p tsconfig.api-server.json",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage"