CodingNic
Sign In Book Session

Project Introduction & Setup

Run the Client and Server

Project Introduction & Setup 15 min read

Run the Client and Server

The Ledger has two processes during development:

  • The client runs the React interface in the browser.
  • The server runs the Express API that supplies and saves ledger data.

The starter includes a root command so you can install the dependencies for both sides at once and then start both development servers together.

From the project root, run:

bash
npm run install:all
npm run dev

The first command runs npm install inside both server/ and client/. The second command starts both development servers from the root project.

You should see two local addresses in the terminal output. The client is normally available at http://localhost:5173, and the API is normally available at http://localhost:4000.

Why the browser can call /api

The browser loads the client from Vite on port 5173, while Express listens on port 4000. During development, Vite is configured to forward requests beginning with /api to the Express server.

That setting is in client/vite.config.js. Its proxy entry says, in effect:

text
browser request to /api/...
        ↓
Vite development server
        ↓
Express server on http://localhost:4000

This means client code can request a path such as /api/transactions without hard-coding the server’s port into every request.

Test it

Open http://localhost:5173 in your browser. You should see the Ledger interface with the sample September 2026 entries.

Then open http://localhost:4000/api/health. Express should return a small JSON response containing ok: true.

If the client shows a server connection error, keep both development processes running and check the terminal for an error before moving on.

Checkpoint

The Ledger UI is visible in the browser, the health endpoint responds with ok: true, and you can explain why the client uses /api/... while the server runs on port 4000.