Dx: Add check for node version before yarn start (#108144)

* Dx: Add check for node version before yarn start

* .

* add IGNORE_NODE_VERSION_CHECK env var

* Update scripts/check-frontend-dev.sh

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* add check if nvmrc file exists

* fix lint

* codeowners

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

.github/CODEOWNERS

@@ -627,6 +627,7 @@ playwright.storybook.config.ts @grafana/grafana-frontend-platform
 /scripts/cli/ @grafana/grafana-frontend-platform
 /scripts/clean-git-or-error.sh @grafana/grafana-as-code
 /scripts/grafana-server/ @grafana/grafana-frontend-platform
+/scripts/check-frontend-dev.sh @grafana/grafana-frontend-platform
 /scripts/helpers/ @grafana/grafana-developer-enablement-squad
 /scripts/import_many_dashboards.sh @torkelo
 /scripts/mixin-check.sh @bergquist

package.json

@@ -6,6 +6,7 @@
   "version": "12.1.0-pre",
   "repository": "github:grafana/grafana",
   "scripts": {
+    "predev": "./scripts/check-frontend-dev.sh",
     "build": "NODE_ENV=production nx exec --verbose -- webpack --config scripts/webpack/webpack.prod.js",
     "build:nominify": "yarn run build -- --env noMinify=1",
     "build:stats": "NODE_ENV=production webpack --progress --config scripts/webpack/webpack.stats.js",
@@ -46,7 +47,7 @@
     "prettier:check": "prettier --check --ignore-path .prettierignore --list-different=false --log-level=warn \"**/*.{ts,tsx,scss,md,mdx,json,js,cjs}\"",
     "prettier:checkDocs": "prettier --check --list-different=false --log-level=warn \"docs/**/*.md\" \"*.md\" \"packages/**/*.{ts,tsx,scss,md,mdx,json,js,cjs}\"",
     "prettier:write": "prettier --ignore-path .prettierignore --list-different \"**/*.{js,ts,tsx,scss,md,mdx,json,cjs}\" --write",
-    "start": "NODE_ENV=dev nx exec -- webpack --config scripts/webpack/webpack.dev.js --watch",
+    "start": "yarn predev && NODE_ENV=dev nx exec -- webpack --config scripts/webpack/webpack.dev.js --watch",
     "start:liveReload": "yarn start -- --env liveReload=1",
     "start:noTsCheck": "yarn start -- --env noTsCheck=1",
     "start:noLint": "yarn start -- --env noTsCheck=1 --env noLint=1",

scripts/check-frontend-dev.sh

@@ -0,0 +1,48 @@
+#!/usr/bin/env sh
+
+# Exit early if running in CI environment
+if [ -n "$CI" ] || [ -n "$GITHUB_ACTIONS" ] || [ -n "$IGNORE_NODE_VERSION_CHECK" ]; then
+  exit 0
+fi
+
+# Colors for prettier output
+RED='\033[0;31m'
+YELLOW='\033[1;33m'
+GREEN='\033[0;32m'
+BLUE='\033[0;34m'
+CYAN='\033[0;36m'
+NC='\033[0m' # No Color
+BOLD='\033[1m'
+
+# Check if .nvmrc file exists
+if [ ! -f ".nvmrc" ]; then
+    printf "%b\n" ""
+    printf "%b\n" "${RED}⚠️  ERROR  ⚠️${NC}"
+    printf "%b\n" "${YELLOW}${BOLD}.nvmrc file not found!${NC} Run '${BLUE}git checkout main -- .nvmrc${NC}' to fix."
+    printf "%b\n" ""
+    exit 1
+fi
+
+REQUIRED_VERSION=$(sed 's/v//' .nvmrc)
+CURRENT_VERSION=$(node --version | sed 's/v//')
+
+if [ "$CURRENT_VERSION" != "$REQUIRED_VERSION" ]; then
+    printf "%b\n" ""
+    printf "%b\n" "${RED}⚠️  WARNING  ⚠️${NC}"
+    printf "%b\n" "${YELLOW}${BOLD}Node.js version mismatch!${NC}"
+    printf "%b\n" ""
+    printf "%b\n" "${BOLD}${CYAN}Recommended:${NC} ${GREEN}$REQUIRED_VERSION${NC} (from .nvmrc)"
+    printf "%b\n" "${BOLD}${CYAN}Current:${NC}     ${RED}$CURRENT_VERSION${NC}"
+    printf "%b\n" ""
+    printf "%b\n" "${BOLD}${YELLOW}⚠️ We only test and support developing Grafana with the specific LTS Node.js release.${NC}"
+    printf "%b\n" "   Using a different version may lead to unexpected build issues or runtime errors."
+    printf "%b\n" ""
+    printf "%b\n" "${BOLD}💡 Consider using a node version manager and configuring it to auto-switch to the recommended version:${NC}"
+    printf "%b\n" "   • ${BLUE}nvm${NC} - Node Version Manager"
+    printf "%b\n" "   • ${BLUE}fnm${NC} - Fast Node Manager"
+    printf "%b\n" ""
+    printf "%b\n" "${BLUE}${BOLD}If you experience issues building Grafana, first switch to the recommended version of Node.js.${NC}"
+    printf "%b\n" ""
+fi
+
+