Make local frontend backend configurable

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

README.md

@@ -1,20 +1,35 @@
 # Getting started
 
-Before starting, make sure you have a working python and nodejs setup with pyenv and nvm.
+Before starting, make sure you have Python 3.9 and Node.js 20 available.
 
 ```bash
-apt-get install libmysqlclient-dev
-pre-commit install
 uv run manage.py migrate
-uv run bin/run
 cp .env-default .env
+uv run manage.py seed_demo_data
 
-# in another terminal
+# Optional: create an admin login
-cd frontend
+uv run manage.py createsuperuser
-npm install
+
-npm start
+# Install frontend packages once
+cd frontend && npm install
 ```
 
+Start the backend and frontend in separate terminals from the project root:
+
+```bash
+uv run bin/run
+```
+
+```bash
+uv run bin/run-frontend
+```
+
+Vite prints the frontend URL when it starts (normally <http://localhost:5173/>; if that port is busy, it selects another). Django runs at <http://localhost:3000/>; open the admin directly at <http://localhost:3000/admin/> or through the frontend dev proxy at the printed Vite URL followed by `/admin/`. The GraphQL API is at <http://localhost:3000/graphql/>; the frontend uses Vite's proxy for development API requests.
+
+To test the frontend against a different backend, set `VITE_DEV_API_PROXY` when starting Vite, for example `VITE_DEV_API_PROXY=https://bbs.neuf.no uv run bin/run-frontend`. This affects the development proxy only; use caution with a live backend, since app changes and submissions may modify production data.
+
+To create the admin during data seeding instead, set `BBS_SEED_ADMIN_PASSWORD` for that command; the command only creates a local `admin` superuser if one does not already exist.
+
 ## References
 
 - We use JS code generation to work with queries/mutations in our graphql API: <https://github.com/dotansimha/graphql-typed-document-node>

bin/run

@@ -1,3 +1,3 @@
 #!/bin/bash
 
-python manage.py runserver
+exec python manage.py runserver 127.0.0.1:3000

bin/run-frontend

@@ -1,4 +1,3 @@
 #!/bin/bash
 
-cd frontend && npm run start
+cd frontend && npm run start -- --host 127.0.0.1
-

frontend/src/client.ts

@@ -1,7 +1,7 @@
 import { ApolloClient, InMemoryCache } from "@apollo/client";
 
 const client = new ApolloClient({
-  uri: `${import.meta.env.VITE_API_URL}/graphql/`,
+  uri: import.meta.env.DEV ? "/graphql/" : `${import.meta.env.VITE_API_URL}/graphql/`,
   cache: new InMemoryCache(),
 });
 

frontend/vite.config.js

@@ -9,5 +9,13 @@ export default defineConfig({
     __DEV__: process.env.NODE_ENV !== "production",
   },
   envDir: "..",
+  server: {
+    host: "127.0.0.1",
+    proxy: Object.fromEntries(
+      ["/admin", "/accounts", "/inventory", "/report", "/static", "/media", "/graphql"].map(
+        (path) => [path, process.env.VITE_DEV_API_PROXY || "http://127.0.0.1:3000"],
+      ),
+    ),
+  },
   build: { outDir: "../static", emptyOutDir: false },
 });