Update reference to replace make commands by npm

Signed-off-by: Joaquim Rocha <joaquim.rocha@microsoft.com>

Author: joaquimrocha

.github/workflows/frontend.yml

@@ -152,11 +152,13 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
           cache: "npm"
-          cache-dependency-path: frontend/package-lock.json
+          cache-dependency-path: |
+            package-lock.json
+            frontend/package-lock.json
 
       - name: Build docs
         run: |
-          make docs
+          npm run docs
 
   buildstorybook:
     name: build storybook

app/e2e-tests/README.md

@@ -41,17 +41,17 @@ To run the tests for the web mode, you will need to have the backend running. Fo
   `cd headlamp`
 
 - run the following command
-  `make backend` followed by `make run-backend`
+  `npm run backend:build` followed by `npm run backend:start`
 
 ### Frontend
 
 To run the tests for the web mode, you will need to have the frontend running. Follow the steps below to run the frontend:
 
 - cd into the headlamp directory in a separate terminal
-  `cd headlamp/frontend`
+  `cd headlamp`
 
 - run the following command
-  `make frontend` followed by `make run-frontend`
+  `npm run frontend:build` followed by `npm run frontend:start`
 
 ### Running the tests
 

backend/README.md

@@ -1,8 +1,8 @@
 # Quickstart
 
 ```bash
-make backend
-make run-backend
+npm run backend:build
+npm run backend:start
 ```
 
 See more detailed [Headlamp backend documentation on the web](

docs/contributing.md

@@ -55,8 +55,8 @@ Follow these steps when submitting a PR to ensure it meets the project’s stand
 
 Run the following commands from your project directory:
 
-- `make frontend-test` - Run the test suite
-- `make frontend-lint` - Format your code to match the project
+- `npm run frontend:test` - Run the test suite
+- `npm run frontend:lint` - Format your code to match the project
 
 These steps ensure your code is functional, well-typed, and formatted consistently.
 
@@ -156,11 +156,11 @@ For linting the `backend` and `frontend`, use the following commands
 (respectively):
 
 ```bash
-make backend-lint
+npm run backend:lint
 ```
 
 ```bash
-make frontend-lint
+npm run frontend:lint
 ```
 
 The linters are also run in the CI system, so any PRs you create will be
@@ -194,13 +194,13 @@ an associated story when possible.
 For running the frontend tests, use the following command:
 
 ```bash
-make frontend-test
+npm run frontend:test
 ```
 
 The backend uses go's testing and can be run by using the following command:
 
 ```bash
-make backend-test
+npm run backend:test
 ```
 
 Tests will run as part of the CI after a Pull Request is open.

docs/development/architecture.md

@@ -61,7 +61,7 @@ Notes:
 
 How does Headlamp get real-time updates from Kubernetes clusters?
 
-- WebSockets are used for real-time updates from Kubernetes. 
+- WebSockets are used for real-time updates from Kubernetes.
 - Browsers support a limited number of connections: six usually.
 - How is the browser's WebSocket limit overcome? Headlamp uses one WebSocket from the browser to the `headlamp-server`. That server then opens many WebSockets to different Kubernetes API servers.
 
@@ -135,16 +135,16 @@ The headlamp/ repo [Makefile](https://github.com/kubernetes-sigs/headlamp/blob/m
 Here are some examples:
 
 ```shell
-make backend
-make backend-lint
-make backend-test
-make run-backend
-make frontend
-make frontend-lint
-make frontend-test
-make run-frontend
-make app-test
-make run-app
+npm run backend:build
+npm run backend:lint
+npm run backend:test
+npm run backend:start
+npm run frontend:build
+npm run frontend:lint
+npm run frontend:test
+npm run frontend:start
+npm run app:test
+npm run start:app
 ```
 
 ### Frontend
@@ -222,7 +222,7 @@ As mentioned above, Headlamp can be deployed as a container inside a Kubernetes
 
 ## Future Work
 
-To see planned or in progress features, check the [Release Plan / Roadmap](https://github.com/orgs/headlamp-k8s/projects/1/views/1). It’s regularly updated, but it's a tentative plan. 
+To see planned or in progress features, check the [Release Plan / Roadmap](https://github.com/orgs/headlamp-k8s/projects/1/views/1). It’s regularly updated, but it's a tentative plan.
 
 Note: Since Headlamp is open source, people contribute things that aren’t listed there. You can also explore:
 - [Open issues](https://github.com/kubernetes-sigs/headlamp/issues) — for bugs, feature requests, and discussions.

docs/development/backend.md

@@ -18,51 +18,51 @@ redirects the requests to the defined proxies.
 The backend (Headlamp's server) can be quickly built using:
 
 ```bash
-make backend
+npm run backend:build
 ```
 
 Once built, it can be run in development mode (insecure / don't use in production) using:
 
 ```bash
-make run-backend
+npm run backend:start
 ```
 
 ## Lint
 
 To lint the backend/ code.
 
 ```bash
-make backend-lint
+npm run backend:lint
 ```
 
 This command can fix some lint issues.
 
 ```bash
-make backend-lint-fix
+npm run backend:lint:fix
 ```
 
 ## Format
 
 To format the backend code.
 
 ```bash
-make backend-format
+npm run backend:format
 ```
 
 ## Test
 
 ```bash
-make backend-test
+npm run backend:test
 ```
 
 Test coverage with a html report in the browser.
 
 ```bash
-make backend-coverage-html
+npm run backend:coverage:html
 ```
 
 To just print a simpler coverage report to the console.
 ```bash
-make backend-coverage
+npm run backend:coverage
 ```
 

docs/development/frontend.md

@@ -15,27 +15,27 @@ The frontend is written in Typescript and React, as well as a few other importan
 The frontend can be quickly built using:
 
 ```bash
-make frontend
+npm run frontend:build
 ```
 
 Once built, it can be run in development mode (auto-refresh) using:
 
 ```bash
-make run-frontend
+npm run frontend:start
 ```
 
 This command leverages the `create-react-app`'s start script that launches
 a development server for the frontend (by default at `localhost:3000`).
 
-We use [react-query](https://tanstack.com/query/latest/docs/framework/react/overview) 
+We use [react-query](https://tanstack.com/query/latest/docs/framework/react/overview)
 for network request, if you need the devtools for react-query, you can simply set `REACT_APP_ENABLE_REACT_QUERY_DEVTOOLS=true` in the `.env` file.
 
 ## API documentation
 
 API documentation for TypeScript is done with [typedoc](https://typedoc.org/) and [typedoc-plugin-markdown](https://github.com/tgreyuk/typedoc-plugin-markdown), and is configured in tsconfig.json
 
 ```bash
-make docs
+npm run docs
 ```
 
 The API output markdown is generated in docs/development/api and is not
@@ -49,7 +49,7 @@ Components can be discovered, developed, and tested inside the 'storybook'.
 From within the [Headlamp](https://github.com/kubernetes-sigs/headlamp/) repo run:
 
 ```bash
-make storybook
+npm run frontend:storybook
 ```
 
 If you are adding new stories, please wrap your story components with the `TestContext` helper
@@ -75,7 +75,7 @@ Any issues found are reported in the developer console.
 To enable the alert message during development, use the following:
 
 ```bash
-REACT_APP_SKIP_A11Y=false make run-frontend
+REACT_APP_SKIP_A11Y=false npm run frontend:start
 ```
 
 This shows an alert when an a11y issue is detected.

docs/development/i18n/contributing.md

@@ -91,7 +91,7 @@ Here's an example of using date formatting:
 Create a folder using the locale code in:
 `frontend/src/i18n/locales/`
 
-Then run `make i18n`. This command parses the translatable strings in
+Then run `npm run i18n`. This command parses the translatable strings in
 the project and creates the corresponding catalog files.
 
 Integrated components may need to be adjusted (MaterialUI/Monaco etc).

docs/development/index.md

@@ -16,29 +16,32 @@ These are the required dependencies to get started. Other dependencies are pulle
 
 - [Node.js](https://nodejs.org/en/download/) Latest LTS (20.11.1 at time of writing). Many of us use [nvm](https://github.com/nvm-sh/nvm) for installing multiple versions of Node.
 - [Go](https://go.dev/doc/install), (1.24 at time of writing)
-- [Make](https://www.gnu.org/software/make/) (GNU). Often installed by default. On Windows this can be installed with the "chocolatey" package manager that is installed with node.
 - [Kubernetes](https://kubernetes.io/), we suggest [minikube](https://minikube.sigs.k8s.io/docs/) as one good K8s installation for testing locally. Other k8s installations are supported (see [platforms](../platforms.md).
 
+## NPM Workspace Commands
+
+Headlamp uses npm workspaces for managing dependencies across the frontend, app, and other components. The top-level `package.json` provides convenient scripts to work with all components from the root directory.
+
 ## Build the code
 
 Headlamp is composed of a `backend` and a `frontend`.
 
 You can build both the `backend` and `frontend` by running.
 
 ```bash
-make
+npm run build
 ```
 
 Or individually:
 
 ```bash
-make backend
+npm run backend:build
 ```
 
 and
 
 ```bash
-make frontend
+npm run frontend:build
 ```
 
 ## Run the code
@@ -47,15 +50,31 @@ The quickest way to get the `backend` and `frontend` running for development is
 the following (respectively):
 
 ```bash
-make run-backend
+npm run backend:start
 ```
 
 and in a different terminal instance:
 
 ```bash
-make run-frontend
+npm run frontend:start
+```
+
+Or you can run both together with:
+
+```bash
+npm run start
 ```
 
+## Generate API documentation
+
+To generate the TypeScript API documentation:
+
+```bash
+npm run docs
+```
+
+This generates API documentation in `docs/development/api/` using TypeDoc.
+
 ## Build the app
 
 You can build the app for Linux, Windows, or Mac.
@@ -66,15 +85,15 @@ and the linux app on a linux box.
 Choose the relevant command:
 
 ```bash
-make app-linux
+npm run app:package:linux
 ```
 
 ```bash
-make app-mac
+npm run app:package:mac
 ```
 
 ```bash
-make app-win
+npm run app:package:win
 ```
 
 For Windows, by default it will produce an installer using [NSIS (Nullsoft Scriptable Install System)](https://sourceforge.net/projects/nsis/).
@@ -90,24 +109,24 @@ set PATH=%PATH%;C:\Program Files (x86)\WiX Toolset v3.11\bin
 Then run the following command to generate the `.msi` installer:
 
 ```bash
-make app-win-msi
+npm run app:package:win:msi
 ```
 
 See the generated app files in app/dist/ .
 
 ### Running the app
 
-If you already have **BOTH** the `backend` and `frontend` up and running, the quickest way to 
+If you already have **BOTH** the `backend` and `frontend` up and running, the quickest way to
 get the `app` running for development is the following:
 
 ```bash
-make run-only-app
+npm run app:start:client
 ```
 
 or else you can simply do
 
 ```bash
-make run-app
+npm run start:app
 ```
 
 which runs everything including the `backend`, `frontend` and `app` in parallel.