Arch Manager Front — Quick Setup

Short and practical. Follow these steps to get the app running fast.

1) Prerequisites

• Node.js 20 LTS (recommended).
• npm (comes with Node).
• The backend running on http://localhost:8080 and exposing the API under /api.

Check versions:

node -v
npm -v

2) Install

From the project root:

npm ci   # or: npm install

3) Configure the API URL

Edit src/environments/environments.ts and set your backend:

export const environment = {
  production: false,
  apiBaseUrl: "http://localhost:8080",
  apiPrefix: "/api",
  endpoints: {
    /* … keep as is … */
  },
} as const;

If your backend runs on another host or path, change apiBaseUrl and apiPrefix.

4) Run the backend

Start your Spring Boot API (make sure Swagger works at /swagger-ui/index.html). Confirm that GET http://localhost:8080/api/users/all responds when authenticated.

5) Start the front-end (dev)

npm start

Then open http://localhost:4200

You can pass CLI flags:

npm start -- --port 4300 --open

6) Build for production

npm run build

Static files are in dist/arch-manager-front/browser. Serve them with any static server:

npx http-server dist/arch-manager-front/browser -p 4200

If you deploy under a sub-path, build with a base href:

ng build --base-href /my/subpath/

7) Tests

npm test

8) Useful scripts (from package.json)

• npm start → dev server (ng serve)
• npm run build → production build
• npm run watch → dev build watch mode
• npm test → unit tests (Jasmine + Karma)

9) Troubleshooting

• Port already in use → pick another: npm start -- --port 4300.
• Old cache/build → clean and reinstall:

rm -rf node_modules dist .angular
npm ci

• 401s from API → ensure the front sends a JWT and that your backend accepts Authorization: Bearer ….

10) Minimal feature checklist (sanity)

• Login/Register works and a token is stored.
• /projects loads and lists projects.
• You can connect to one project and open “Current Project”.
• Graph page loads, you can zoom/pan and toggle labels.
• Scaling works (pick level, hops, strategy) and filtering by nodeTypes / linkLabels responds.
• Import/mutate only appear when connected to a project.