Bazel+React POC

dgnemo · dgnemo · commit 02ecd7f88d4b · 2025-03-09T17:48:54.000Z
diff --git a/.bazelignore b/.bazelignore
@@ -0,0 +1,2 @@
+node_modules
+frontend/node_modules
diff --git a/.bazelrc b/.bazelrc
@@ -0,0 +1,2 @@
+# passes an argument `--skipLibCheck` to *every* spawn of tsc
+common --@aspect_rules_ts//ts:skipLibCheck=always
diff --git a/.bazelversion b/.bazelversion
@@ -0,0 +1 @@
+7.5.0
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+bazel-*
+node_modules
+.pnpm-store
diff --git a/BUILD b/BUILD
@@ -0,0 +1,3 @@
+load("@npm//:defs.bzl", "npm_link_all_packages")
+
+npm_link_all_packages(name = "node_modules")
diff --git a/MODULE.bazel b/MODULE.bazel
@@ -0,0 +1,31 @@
+module(name = "bazel_react_example")
+
+bazel_dep(name = "rules_nodejs", version = "6.3.1")
+bazel_dep(name = "aspect_rules_js", version = "2.2.0")
+bazel_dep(name = "aspect_rules_ts", version = "3.5.0")
+
+node = use_extension("@rules_nodejs//nodejs:extensions.bzl", "node", dev_dependency = True)
+node.toolchain()
+
+npm = use_extension("@aspect_rules_js//npm:extensions.bzl", "npm", dev_dependency = True)
+npm.npm_translate_lock(
+    name = "npm",
+    pnpm_lock = "//:pnpm-lock.yaml",
+    verify_node_modules_ignored = "//:.bazelignore",
+)
+use_repo(npm, "npm")
+
+pnpm = use_extension("@aspect_rules_js//npm:extensions.bzl", "pnpm")
+
+# Allows developers to use the matching pnpm version, for example:
+# bazel run -- @pnpm --dir /home/runner/work/rules_js/rules_js install
+use_repo(pnpm, "pnpm")
+
+rules_ts_ext = use_extension("@aspect_rules_ts//ts:extensions.bzl", "ext", dev_dependency = True)
+rules_ts_ext.deps(
+    # The integrity value will need to be updated along with typescript version changes in package.json.
+    # `curl --silent https://registry.npmjs.org/typescript/5.4.5 | jq -r '.dist.integrity'`
+    ts_integrity = "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
+    ts_version_from = "//:package.json",
+)
+use_repo(rules_ts_ext, "npm_typescript")
diff --git a/MODULE.bazel.lock b/MODULE.bazel.lock
diff --git a/WORKSPACE b/WORKSPACE
diff --git a/frontend/BUILD b/frontend/BUILD
@@ -0,0 +1,54 @@
+load("@aspect_rules_js//js:defs.bzl", "js_library", "js_run_binary")
+load("@aspect_rules_ts//ts:defs.bzl", "ts_project")
+load("@npm//:defs.bzl", "npm_link_all_packages")
+load("@npm//frontend:vite/package_json.bzl", "bin")
+
+npm_link_all_packages(name = "node_modules")
+
+ts_project(
+    name = "project",
+    srcs = glob(["src/**"]),
+    assets = glob(["src/**/*.css"]),
+    declaration = True,
+    transpiler = "tsc",
+    tsconfig = "tsconfig.json",
+    deps = [
+        ":node_modules/@types/react",
+        ":node_modules/@types/react-dom",
+        ":node_modules/react",
+        ":node_modules/react-dom",
+        ":node_modules/react-router-dom",
+        ":node_modules/tailwindcss",
+    ],
+)
+
+js_run_binary(
+    name = "frontend",
+    srcs = [
+        "index.html",
+        ":project",
+    ],
+    args = ["build"],
+    mnemonic = "ViteBuild",
+    out_dirs = ["dist"],
+    tool = ":vite",
+    visibility = ["//:__subpackages__"],
+)
+
+bin.vite_binary(
+    name = "vite",
+    chdir = package_name(),
+    data = ["vite.config"],
+)
+
+js_library(
+    name = "vite.config",
+    srcs = ["vite.config.mjs"],
+    data = [
+        ":node_modules/@tailwindcss/vite",
+        ":node_modules/@vitejs/plugin-react",
+        ":node_modules/tailwindcss",
+        ":node_modules/vite-plugin-svgr",
+        ":node_modules/vitest",
+    ],
+)
diff --git a/frontend/index.html b/frontend/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>React Hello World</title>
+  </head>
+  <body class="bg-white">
+    <script type="module" src="/src/index.js"></script>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/frontend/package.json b/frontend/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "frontend",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^7.3.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.0.12",
+    "@types/react": "^18.2.52",
+    "@types/react-dom": "^18.2.18",
+    "@vitejs/plugin-react": "^4.3.4",
+    "tailwindcss": "^4.0.12",
+    "typescript": "^5.3.3",
+    "vite": "^6.2.1",
+    "vite-plugin-svgr": "^4.3.0",
+    "vitest": "^3.0.8"
+  }
+}
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -0,0 +1,15 @@
+function App() {
+  return (
+      <div className="min-h-screen bg-gray-50">
+        <header className="bg-white shadow">
+          <div className="max-w-7xl mx-auto py-6 px-4">
+            <h1 className="text-3xl font-bold text-gray-900">Hello World</h1>
+          </div>
+        </header>
+        <main className="max-w-7xl mx-auto py-6 px-4">
+        </main>
+      </div>
+  )
+}
+
+export default App
diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -0,0 +1 @@
+@import "tailwindcss"
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
@@ -0,0 +1,8 @@
+import './index.css'
+import { StrictMode } from 'react'
+import ReactDOM from 'react-dom/client';
+import App from './App'
+
+
+const root = ReactDOM.createRoot(document.getElementById('root')!);
+root.render(<StrictMode><App /></StrictMode>);
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
@@ -0,0 +1,14 @@
+{
+    "compilerOptions": {
+      "target": "ES2020",
+      "lib": ["DOM", "DOM.Iterable", "ESNext"],
+      "jsx": "react-jsx",
+      "module": "ESNext",
+      "moduleResolution": "node",
+      "esModuleInterop": true,
+      "strict": true,
+      "skipLibCheck": true,
+      "declaration": true,
+    },
+    "include": ["src"]
+  }
diff --git a/frontend/vite.config.mjs b/frontend/vite.config.mjs
@@ -0,0 +1,9 @@
+import { defineConfig } from 'vitest/config'
+import react from '@vitejs/plugin-react'
+import svgr from 'vite-plugin-svgr'
+import tailwindcss from '@tailwindcss/vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react(), svgr(), tailwindcss()],
+})
diff --git a/package.json b/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "workspace",
+  "version": "1.0.0",
+  "description": "Root JS project for the monorepo. Contains repo-wide devDependencies.",
+  "private": true,
+  "packageManager": "pnpm@9.15.6",
+  "devDependencies": {
+    "typescript": "5.4.5"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": []
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+node_modules`
	`2`	`+frontend/node_modules`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	+# passes an argument `--skipLibCheck` to every spawn of tsc
	`2`	`+common --@aspect_rules_ts//ts:skipLibCheck=always`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+bazel-*`
	`2`	`+node_modules`
	`3`	`+.pnpm-store`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+load("@npm//:defs.bzl", "npm_link_all_packages")`
	`2`	`+`
	`3`	`+npm_link_all_packages(name = "node_modules")`