Admin: Add Navbox contributing (via update-page on MediaWiki MCP Server)

2026-07-06T04:21:58Z

Add Navbox contributing (via update-page on MediaWiki MCP Server)

← Older revision		Revision as of 09:51, 6 July 2026
Line 80:		Line 80:

	For the full branch-naming, commit, and review process that applies across Care repos, see the [[Contributing/Contribution workflow\|Contribution workflow]].		For the full branch-naming, commit, and review process that applies across Care repos, see the [[Contributing/Contribution workflow\|Contribution workflow]].

			{{Navbox contributing}}

	{{Related}}		{{Related}}

Admin: OHC identity seed

2026-07-04T23:07:25Z

OHC identity seed

New page

{{Doc header
|type=guide
|domain=contributing
|title=Frontend setup
|order=2
}}

This guide walks you through running the Care frontend ([<nowiki/>https://github.com/ohcnetwork/care_fe <code>ohcnetwork/care_fe</code>]) 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 <code>.node-version</code> file. If you use a version manager such as [<nowiki/>https://github.com/nodenv/nodenv <code>nodenv</code>] or [<nowiki/>https://github.com/Schniz/fnm <code>fnm</code>], 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 <code>package-lock.json</code>).
* '''A running Care backend''' — the frontend needs an API to talk to. Set up the backend first by following [[Contributing/Local development/Backend setup|Backend local setup]].

{{Note|1=The repo does not declare an <code>engines</code> field in <code>package.json</code>, so npm will not block other Node versions. Stick to the version in <code>.node-version</code> to match CI.}}

== Install dependencies ==

From the root of your <code>care_fe</code> clone:

<syntaxhighlight lang="bash">npm install</syntaxhighlight>
This also runs the project's <code>postinstall</code> step, which installs platform-specific dependencies and generates HTTP headers.

== Point the frontend at your backend ==

Create a <code>.env.local</code> file in the project root and set the API URL to your local backend:

<pre class="env"># Point the frontend to your local backend
REACT_CARE_API_URL=http://127.0.0.1:9000</pre>
The backend from [[Contributing/Local development/Backend setup|Backend local setup]] listens on port <code>9000</code>, 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 ==

<syntaxhighlight lang="bash">npm run dev</syntaxhighlight>
Once the dev server is up, open [http://localhost:4000 http://localhost:4000] in your browser. The page reloads automatically when you save edits, and lint errors surface in the terminal.

{{Tip|1=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 <code>REACT_CARE_API_URL</code> you configured.}}

== npm scripts that matter ==

These are the scripts contributors reach for most often. All are defined in <code>package.json</code>.

{| class="wikitable"
|-
! Script
! What it does
|-
| <code>npm run dev</code>
| Start the Vite dev server at <code>http://localhost:4000</code> with hot reload.
|-
| <code>npm run build</code>
| Build the production bundle into the <code>build</code> folder.
|-
| <code>npm run preview</code>
| Serve the production build locally (with the service worker).
|-
| <code>npm run lint</code>
| Run ESLint over <code>src</code>.
|-
| <code>npm run lint-fix</code>
| Run ESLint over <code>src</code> and auto-fix what it can.
|-
| <code>npm run format</code>
| Format <code>src</code> and <code>tests</code> with Prettier.
|-
| <code>npm run test</code>
| Run a Snyk dependency scan (this is what <code>test</code> maps to; end-to-end tests use the <code>playwright:*</code> scripts).
|}

{{Note|1=There is no unit-test runner wired into <code>npm run test</code>. The functional test suite runs through Playwright via the <code>playwright:*</code> scripts (for example <code>npm run playwright:test</code>). Setting those up requires a local backend with dummy data — see the repository's README and <code>tests/</code> 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 <code>@ohcnetwork/care-fe-code-reviewers</code>''' on 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 Care repos, see the [[Contributing/Contribution workflow|Contribution workflow]].

{{Related}}

Contributing/Local development/Frontend setup - Revision history

Admin: Add Navbox contributing (via update-page on MediaWiki MCP Server)

Admin: OHC identity seed