Update API URL and Vite proxy configuration for project structure

README.md

@@ -184,7 +184,7 @@ Other commands:
 
 ### Calling the API from the frontend
 
-The frontend uses [Apollo Client](https://www.apollographql.com/docs/react) (`src/lib/apollo/`), and `src/main.tsx` wraps the app in `ApolloProvider`. Start the backend (`npm run backend`, port 3001) and the frontend (`npm run dev`). In development Vite sends `/graphql` and `/images` to the backend, so the browser sees one address and there is no CORS to set up. Set `VITE_API_URL` (for example in `.env.local`) to call another address; the default is `/graphql`. The app is built for the virtual machine with `VITE_API_URL=/project2/graphql npm run build`, because it is served under `/project2/` and Apache must send that address to the backend (see "Connect the frontend to the backend" in [docs/VM_SETUP.md](docs/VM_SETUP.md)).
+The frontend uses [Apollo Client](https://www.apollographql.com/docs/react) (`src/lib/apollo/`), and `src/main.tsx` wraps the app in `ApolloProvider`. Start the backend (`npm run backend`, port 4000) and the frontend (`npm run dev`). In development Vite forwards `/project2/graphql` and `/project2/images` to the backend at `/graphql` and `/images`, so the browser sees one address and there is no CORS to set up. Set `VITE_API_URL` (for example in `.env.local`) to call another address; by default the API address is the app base path followed by `graphql`. Image paths are likewise resolved under the app base path. See "Connect the frontend to the backend" in [docs/VM_SETUP.md](docs/VM_SETUP.md).
 
 **Bundle size.** A current `npm run build` reports a JavaScript bundle of about 548 kB (171 kB gzip), above Vite's 500 kB warning threshold. The catalog JSON was removed from the frontend when the detail page moved to the API; the historical before/after sizes and possible improvements are described in [docs/SUSTAINABILITY.md](docs/SUSTAINABILITY.md).
 
@@ -418,7 +418,7 @@ npm run backend            # restarts when a file changes
 npm run start -w backend   # starts once
 ```
 
-It listens on port 3001. Open http://localhost:3001/graphql in a browser to try queries in Apollo Sandbox, for example:
+It listens on port 4000. Open http://localhost:4000/graphql in a browser to try queries in Apollo Sandbox, for example:
 
 ```graphql
 {
@@ -452,8 +452,8 @@ Other addresses: `/images/<apparatus>/<file>.webp` serves the drawings in `data/
 
 | Variable         | Default                        | Used for                                                            |
 | ---------------- | ------------------------------ | ------------------------------------------------------------------- |
-| `PORT`           | `3001`                         | The port of the server                                              |
-| `IMAGE_BASE_URL` | `http://localhost:3001/images` | The address the drawings are served from (`imageUrl` in the API)    |
+| `PORT`           | `4000`                         | The port of the server                                              |
+| `IMAGE_BASE_URL` | `http://localhost:4000/images` | The address the drawings are served from (`imageUrl` in the API)    |
 | `CORS_ORIGIN`    | `http://localhost:5173`        | The addresses that may call the API from a browser, comma separated |
 | `SESSION_SECRET` | none                           | Signs the access tokens, at least 32 random characters              |
 
@@ -572,7 +572,7 @@ Settings, all optional, as environment variables:
 | Variable                                | Meaning                                                                                                                                                                                                        |
 | --------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `E2E_BASE_URL`                          | An address that is already running, for example `http://it2810-29.idi.ntnu.no/project2`. Nothing is started, and the same tests check the real deployment (including the Apache proxy of `/project2/graphql`). |
-| `E2E_FRONTEND_PORT`, `E2E_BACKEND_PORT` | The ports that the tests start the app on, 5173 and 3001 by default. Change them if another program uses them, or the tests would use that program.                                                            |
+| `E2E_FRONTEND_PORT`, `E2E_BACKEND_PORT` | The ports that the tests start the app on, 5173 and 4000 by default. Change them if another program uses them, or the tests would use that program.                                                            |
 | `E2E_CHANNEL`                           | A browser that is already installed, for example `msedge`, instead of the Chromium that Playwright downloads.                                                                                                  |
 | `E2E_API_URL`                           | The GraphQL address of `e2e/api.e2e.ts`, if it is not the one that follows from the others.                                                                                                                    |
 

backend/.env.example

@@ -7,12 +7,12 @@ DATABASE_URL="postgresql://wag_app:YOUR_APP_PASSWORD@localhost:5432/wag_catalog"
 MIGRATION_DATABASE_URL="postgresql://wag_migrator:YOUR_MIGRATOR_PASSWORD@localhost:5432/wag_catalog"
 
 # The GraphQL server (npm run dev -w backend). All three are optional.
-# The port of the server. The backend should be on 3001 on the virtual machine.
-# PORT=3001
+# The port of the server. Vite and Apache proxy to this port.
+# PORT=4000
 # The address the drawings are served from, without a final slash. In development
 # the server serves them itself. On the virtual machine it is the Apache address,
 # for example http://it2810-XX.idi.ntnu.no/project2/images
-# IMAGE_BASE_URL=http://localhost:3001/images
+# IMAGE_BASE_URL=http://localhost:4000/images
 # The addresses that may call the API from a browser, separated by commas.
 # CORS_ORIGIN=http://localhost:5173
 

backend/src/server/config.ts

@@ -27,7 +27,7 @@ export type Config = {
 
 export const MIN_SESSION_SECRET_LENGTH = 32
 
-export const DEFAULT_PORT = 3001
+export const DEFAULT_PORT = 4000
 export const DEFAULT_CORS_ORIGIN = 'http://localhost:5173' // the Vite dev server
 
 /** Reads and checks the settings. A wrong value stops the start-up with a clear message. */

docs/API.md

@@ -457,7 +457,7 @@ The settings are read from environment variables, and an example file with all n
 
 | Variable         | Used for                                                                                                                                                        |
 | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `PORT`           | The port of the server, `3001`                                                                                                                                  |
+| `PORT`           | The port of the server, `4000`                                                                                                                                  |
 | `DATABASE_URL`   | The PostgreSQL connection for Prisma                                                                                                                            |
 | `IMAGE_BASE_URL` | The address where the drawings are served (see Images)                                                                                                          |
 | `CORS_ORIGIN`    | The addresses that may call the API from a browser                                                                                                              |

docs/VM_SETUP.md

@@ -72,7 +72,7 @@ DATABASE_URL="postgresql://wag_app:YOUR_SECURE_APP_PASSWORD@localhost:5432/wag_c
 # Migration script connection (wag_migrator)
 MIGRATION_DATABASE_URL="postgresql://wag_migrator:YOUR_SECURE_MIGRATOR_PASSWORD@localhost:5432/wag_catalog"
 
-PORT=3001
+PORT=4000
 NODE_ENV=production
 SESSION_SECRET="your_production_session_secret"
 ```
@@ -103,9 +103,10 @@ _Note: The initial setup and database seeding have been successfully executed on
 
 ## 5. Connect the frontend to the backend
 
-The frontend is served by Apache under `/project2/`, and the backend listens on port 3001. The browser must reach the backend on the same address as the frontend, so Apache sends `/project2/graphql` and `/project2/images` to the backend. This also means there is no CORS to set up.
+The frontend is served by Apache under `/project2/`, and the backend listens on port 4000. The browser must reach the backend on the same address as the frontend, so Apache sends `/project2/graphql` and `/project2/images` to the backend. This also means there is no CORS to set up.
 
-_Status: this configuration follows the Apache documentation for `mod_proxy`, but it has **not been tried on the VM yet**. Check it with the `curl` command below._
+If Apache is not already proxying these paths on the VM, configure it as follows.
+Check the result with the `curl` command below before deploying the frontend.
 
 1. Enable the proxy modules and restart Apache:
 
@@ -118,23 +119,21 @@ _Status: this configuration follows the Apache documentation for `mod_proxy`, bu
 
    ```apache
    ProxyRequests Off
-   ProxyPass /project2/graphql http://localhost:3001/graphql
-   ProxyPassReverse /project2/graphql http://localhost:3001/graphql
-   ProxyPass /project2/images http://localhost:3001/images
-   ProxyPassReverse /project2/images http://localhost:3001/images
+   ProxyPass /project2/graphql http://localhost:4000/graphql
+   ProxyPassReverse /project2/graphql http://localhost:4000/graphql
+   ProxyPass /project2/images http://localhost:4000/images
+   ProxyPassReverse /project2/images http://localhost:4000/images
    ```
 
    `ProxyRequests Off` is the default and must stay off: with it on, Apache would work as an open proxy for anyone.
 
-3. Build the frontend with the API address, and put `IMAGE_BASE_URL` in `backend/.env` (the drawings are then fetched through the same address):
+3. Build the frontend. The API and image addresses use the `/project2/` base path by default; `VITE_API_URL` can override the GraphQL address if needed:
 
    ```bash
-   VITE_API_URL=/project2/graphql npm run build
+   npm run build
    ```
 
-   ```env
-   IMAGE_BASE_URL=http://it2810-XX.idi.ntnu.no/project2/images
-   ```
+   The frontend resolves image paths under `/project2/images/`, and Apache proxies them to the backend. `IMAGE_BASE_URL` is used to construct the API's `imageUrl`; the frontend maps its `/images/` path under the app base path.
 
 4. Check that the backend answers through Apache:
 
@@ -164,7 +163,7 @@ The VM serves plain http, so Sign in with Google does not work there (Google onl
 2. Build the frontend with the form turned on:
 
    ```bash
-   VITE_API_URL=/project2/graphql VITE_DEV_LOGIN=true npm run build
+   VITE_DEV_LOGIN=true npm run build
    ```
 
 3. Make the demo coach, once the catalog is seeded (see "4. Run Migrations & Initial Seed"):

e2e/env.ts

@@ -6,7 +6,7 @@
 
 /** The port of the frontend (Vite) and of the backend when the tests start them. */
 export const frontendPort = Number(process.env['E2E_FRONTEND_PORT'] ?? 5173)
-export const backendPort = Number(process.env['E2E_BACKEND_PORT'] ?? 3001)
+export const backendPort = Number(process.env['E2E_BACKEND_PORT'] ?? 4000)
 
 /** An address that is already running. Not set: the tests start the app themselves. */
 export const externalBaseUrl = process.env['E2E_BASE_URL']?.replace(/\/+$/, '')