MANSOQ IT & integrations
Frontend setup
This guide walks you through running the MANSOQ frontend ) on your machine. The frontend is a React + TypeScript single-page app built with Vite. Prerequisites - Node.js — the repository pins the runtime to Node 22 via its .node-version file.…
Current source · source documentation · 3 min read
This guide walks you through running the MANSOQ frontend (mansoq/mansoq-web) on your machine. The frontend is a React + TypeScript single-page app built with Vite.
Prerequisites
- Node.js — the repository pins the runtime to Node 22 via its
.node-versionfile. If you use a version manager such asnodenvorfnm, it will pick this up automatically; otherwise install a matching Node 22 release. - npm — ships with Node and is the package manager used by this project (the repo tracks a
package-lock.json). - A running MANSOQ backend — the frontend needs an API to talk to. Set up the backend first by following Backend local setup.
The repo does not declare an engines field in package.json, so npm will not block other Node versions. Stick to the version in .node-version to match CI.
Install dependencies
From the root of your mansoq-web clone:
npm install
This also runs the project's postinstall step, which installs platform-specific dependencies and generates HTTP headers.
Point the frontend at your backend
Create a .env.local file in the project root and set the API URL to your local backend:
# Point the frontend to your local backend
REACT_MANSOQ_API_URL=http://127.0.0.1:9000
The backend from Backend local setup listens on port 9000, which is what the URL above expects. Make sure the backend is running and has dummy data loaded before you sign in.
Run the development server
npm run dev
Once the dev server is up, open http://localhost:4000 in your browser. The page reloads automatically when you save edits, and lint errors surface in the terminal.
After loading dummy data into your local backend, you can sign in with the seeded development credentials documented in the backend setup. If sign-in fails, confirm the backend is reachable at the REACT_MANSOQ_API_URL you configured.
npm scripts that matter
These are the scripts contributors reach for most often. All are defined in package.json.
| Script | What it does |
|---|---|
npm run dev |
Start the Vite dev server at http://localhost:4000 with hot reload. |
npm run build |
Build the production bundle into the build folder. |
npm run preview |
Serve the production build locally (with the service worker). |
npm run lint |
Run ESLint over src. |
npm run lint-fix |
Run ESLint over src and auto-fix what it can. |
npm run format |
Format src and tests with Prettier. |
npm run test |
Run a Snyk dependency scan (this is what test maps to; end-to-end tests use the playwright:* scripts). |
There is no unit-test runner wired into npm run test. The functional test suite runs through Playwright via the playwright:* scripts (for example npm run playwright:test). Setting those up requires a local backend with dummy data — see the repository's README and tests/ directory for details.
Opening a pull request
A few conventions from the frontend repo's README, in brief:
- Claim the issue by commenting on it before you start, and link your pull request to the issue.
- Tag
@mansoq/mansoq-fe-code-reviewerson your pull request for a faster review. - Attach screenshots of any UI changes so reviewers can see the result without checking out your branch.
For the full branch-naming, commit, and review process that applies across MANSOQ repos, see the Contribution workflow.
Source evidence
References are pinned to the private MANSOQ source repository. Repository access is required to open these links.