equinor · aeshub · May 11, 2026 · May 6, 2026
diff --git a/.github/workflows/frontend_lint_and_test.yml b/.github/workflows/frontend_lint_and_test.yml
diff --git a/.github/workflows/lint_frontend_package.yml b/.github/workflows/lint_frontend_package.yml
@@ -0,0 +1,22 @@
+name: Frontend
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+permissions:
+  contents: read
+
+jobs:
+  lint-frontend-package:
+    uses: equinor/armada/.github/workflows/lint_frontend_package.yml@main
+    permissions:
+      contents: read
+    with:
+      working-directory: frontend
+      run-prettier: true
+      run-eslint: true
+      run-build: true
+      run-unused-exports: true
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,7 @@
 # Frontend
 frontend/node_modules/
 frontend/dist/
+frontend/out/
 
 # Editors
 .vscode

diff --git a/frontend/Makefile b/frontend/Makefile
@@ -1,5 +1,5 @@
 run:
-	npm start
+	npm run dev
 
 build:
 	npm run build

diff --git a/frontend/README.md b/frontend/README.md
@@ -30,7 +30,7 @@ npm ci
 To start the app, run the following command in the root folder:
 
 ```
-npm start
+npm run dev
 ```
 
 This command runs the app in development mode. Open [http://localhost:3001/robotics-frontend](http://localhost:3001/robotics-frontend) to view it in the browser.

diff --git a/frontend/best_practices.md b/frontend/best_practices.md
@@ -29,7 +29,7 @@ npx prettier --write [path to source]
 
 We also avoid any warnings or errors from ESLint before we merge in any code. These warnings appear
 when compiling the code using
-npm start
+npm run dev
 but can also be run with
 npx eslint [path to src]
 

diff --git a/frontend/eslint.config.js b/frontend/eslint.config.js
@@ -1,21 +1,33 @@
-import globals from "globals";
-import pluginJs from "@eslint/js";
-import tseslint from "typescript-eslint";
-import pluginReact from "eslint-plugin-react";
+import js from '@eslint/js'
+import globals from 'globals'
+import tseslint from 'typescript-eslint'
+import pluginReact from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
 
+export default tseslint.config(
+    { ignores: ['dist'] },
+    {
+        extends: [js.configs.recommended, ...tseslint.configs.recommended],
+        files: ['**/*.{ts,tsx}'],
+        languageOptions: {
+            ecmaVersion: 2024,
+            globals: globals.browser,
+        },
+        plugins: {
+            react: pluginReact,
+            'react-hooks': reactHooks,
+            'react-refresh': reactRefresh,
+        },
+        rules: {
+            ...pluginReact.configs.flat.recommended.rules,
 
-/** @type {import('eslint').Linter.Config[]} */
-export default [
-  {files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"]},
-  {languageOptions: { globals: globals.browser }},
-  pluginJs.configs.recommended,
-  ...tseslint.configs.recommended,
-  pluginReact.configs.flat.recommended,
-  {
-    rules: {
-      "react/react-in-jsx-scope": "off",
-      "react/display-name": "off",
-      "@typescript-eslint/no-explicit-any": "off",
+            'react/react-in-jsx-scope': 'off',
+            'react/display-name': 'off',
+            '@typescript-eslint/no-explicit-any': 'off',
+            'react-hooks/rules-of-hooks': 'error',
+            'react-hooks/exhaustive-deps': 'warn',
+            'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+        },
     }
-  }
-];
+)
diff --git a/frontend/index.html b/frontend/index.html
@@ -35,7 +35,7 @@
       You can add webfonts, meta tags, or analytics to this file.
       The build step will place the bundled scripts into the <body> tag.
 
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
+      To begin the development, run `npm run dev`.
+      To create a production bundle, use `npm run build`.
     --></body>
 </html>
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -34,10 +34,11 @@
         "vite-plugin-svgr": "^4.5.0"
     },
     "scripts": {
-        "start": "vite",
-        "build": "tsc && vite build",
-        "serve": "vite preview",
+        "dev": "vite",
+        "build": "tsc -b && vite build",
+        "preview": "vite preview",
         "test": "vitest",
+        "lint": "eslint src",
         "prettier_check": "npx prettier --check src"
     },
     "browserslist": {
@@ -60,6 +61,8 @@
         "@types/styled-components": "^5.1.36",
         "eslint": "^9.39.3",
         "eslint-plugin-react": "^7.37.5",
+        "eslint-plugin-react-hooks": "^6.0.0",
+        "eslint-plugin-react-refresh": "^0.4.26",
         "globals": "^17.4.0",
         "jsdom": "^28.1.0",
         "ts-unused-exports": "^11.0.1",

diff --git a/frontend/src/components/Contexts/InspectionsContext.tsx b/frontend/src/components/Contexts/InspectionsContext.tsx
@@ -62,6 +62,7 @@ export const InspectionsProvider: FC<Props> = ({ children }) => {
     }, [registerEvent, connectionReady])
 
     const fetchImageData = (inspectionId: string): IImageData => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks -- pre-existing design issue, tracked in #2698
         const result = useQuery({
             queryKey: ['fetchInspectionData', inspectionId],
             queryFn: async () => {
@@ -77,6 +78,7 @@ export const InspectionsProvider: FC<Props> = ({ children }) => {
     }
 
     const fetchAnalysisData = (inspectionId: string): IImageData => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks -- pre-existing design issue, tracked in #2698
         const result = useQuery({
             queryKey: ['fetchAnalysisData', inspectionId],
             queryFn: async () => {
@@ -91,6 +93,7 @@ export const InspectionsProvider: FC<Props> = ({ children }) => {
     }
 
     const fetchValueData = (inspectionId: string): IValueData => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks -- pre-existing design issue, tracked in #2698
         const result = useQuery({
             queryKey: ['fetchValueData', inspectionId],
             queryFn: async () => {