Site: replace Parcel with Vite to speed up dotnet builds

.github/actions/bootstrap/action.yml

@@ -47,3 +47,10 @@ runs:
         cache: npm
         cache-dependency-path: src/Elastic.Documentation.Site/package-lock.json
         node-version-file: .nvmrc
+
+    - uses: actions/cache@v4
+      with:
+        path: src/Elastic.Documentation.Site/node_modules
+        key: node-modules-${{ runner.os }}-${{ hashFiles('src/Elastic.Documentation.Site/package-lock.json') }}
+        restore-keys: |
+          node-modules-${{ runner.os }}-

.github/workflows/ci.yml

@@ -94,9 +94,20 @@ jobs:
           cache: npm
           cache-dependency-path: src/Elastic.Documentation.Site/package-lock.json
           node-version-file: .nvmrc
+
+      - uses: actions/cache@v4
+        with:
+          path: node_modules
+          key: node-modules-${{ runner.os }}-${{ hashFiles('package-lock.json') }}
+          restore-keys: |
+            node-modules-${{ runner.os }}-
 
       - name: Install dependencies
-        run: npm ci
+        run: |
+          if [ ! -f node_modules/.install-stamp ] || [ package-lock.json -nt node_modules/.install-stamp ]; then
+            npm ci
+            touch node_modules/.install-stamp
+          fi
 
       - name: Check shai-hulud attack
         uses: ./.github/actions/check-shai-hulud
@@ -146,12 +157,6 @@ jobs:
       - uses: actions/checkout@v7.0.1
         with:
           persist-credentials: false
-      - name: 'Windows only, set TEMP to the same drive'
-        if: ${{ matrix.os == 'windows-latest' }}
-        #  temporary waiting for https://github.com/parcel-bundler/parcel/pull/10095 to fix
-        run: |
-          mkdir "D:\\Temp"
-          echo "TEMP=D:\\Temp" >> $env:GITHUB_ENV
 
       - name: Bootstrap Action Workspace
         id: bootstrap

.github/workflows/release.yml

@@ -302,12 +302,6 @@ jobs:
         with:
           ref: ${{ needs.release-drafter.outputs.tag_name }}
           persist-credentials: false
-      - name: 'Windows only, set TEMP to the same drive'
-        if: ${{ matrix.os == 'windows-latest' }}
-        #  temporary waiting for https://github.com/parcel-bundler/parcel/pull/10095 to fix
-        run: |
-          mkdir "D:\\Temp"
-          echo "TEMP=D:\\Temp" >> $env:GITHUB_ENV
 
       - name: Bootstrap Action Workspace
         id: bootstrap

.gitignore

@@ -5,6 +5,7 @@
 
 .artifacts
 .superset
+tasks/
 .claude/*
 !.claude/settings.json
 !.claude/skills/

CONTRIBUTING.md

@@ -3,7 +3,7 @@
 ## Prerequisites
 
 - [.NET 9.0 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/9.0)
-- [Node.js 22.13.1 (LTS)](https://nodejs.org/en/blog/release/v22.13.1)
+- [Node.js 22.16.0 (LTS)](https://nodejs.org/) — see [`.nvmrc`](.nvmrc)
   - [Aspire 9.4.1](https://learn.microsoft.com/en-us/dotnet/aspire/)
 	```bash
 	dotnet workload install aspire
@@ -38,7 +38,7 @@ assembler builds.
 This will monitor code, cshtml template files & static files and reload the application
 if any changes.
 
-Web assets are reloaded through `parcel watch` and don't require a recompilation.
+Web assets are reloaded through `vite build --watch` and do not require a recompilation.
 
 Markdown files are refreshed automatically through livereload
 

src/Elastic.Documentation.Site/.gitignore

@@ -1,5 +1,8 @@
 .parcel-cache/
 node_modules/
+_static/assets/
+_static/asset-*
+_static/chunk-*
 _static/*.css
 _static/*.css.map
 _static/*.ttf

src/Elastic.Documentation.Site/Assets/telemetry/instrumentation.ts

@@ -156,11 +156,7 @@ function registerFetchInstrumentation(): void {
                 propagateTraceHeaderCorsUrls: [
                     new RegExp(`${window.location.origin}/.*`),
                 ],
-                ignoreUrls: [
-                    /_api\/v1\/o\/.*/,
-                    /_api\/v1\/?$/,
-                    /__parcel_code_frame$/,
-                ],
+                ignoreUrls: [/_api\/v1\/o\/.*/, /_api\/v1\/?$/],
             }),
         ],
     })

src/Elastic.Documentation.Site/Elastic.Documentation.Site.csproj

@@ -11,6 +11,7 @@
     <InterceptorsPreviewNamespaces>$(InterceptorsPreviewNamespaces);Microsoft.AspNetCore.Http.Generated</InterceptorsPreviewNamespaces>
     <IsPublishable>true</IsPublishable>
     <EnableDefaultRazorSlices>false</EnableDefaultRazorSlices>
+    <SkipNpmBuild Condition="'$(SkipNpmBuild)' == ''">false</SkipNpmBuild>
   </PropertyGroup>
 
   <ItemGroup>
@@ -35,7 +36,17 @@
     The first time the task is executed. Then, it only runs when you change the package.json file.
     Documentation: https://learn.microsoft.com/en-us/visualstudio/msbuild/incremental-builds?WT.mc_id=DT-MVP-5003978
  -->
-  <Target Name="NpmInstall" Inputs="package.json" Outputs="node_modules/.install-stamp">
+  <Target Name="EnsureSkipNpmBuildArtifacts"
+          BeforeTargets="NpmInstall;NpmRunBuild"
+          Condition="'$(SkipNpmBuild)' == 'true'">
+    <Error Condition="!Exists('_static/main.js') Or !Exists('_static/styles.css')"
+           Text="SkipNpmBuild is set but _static/main.js or _static/styles.css is missing. Run a full frontend build first." />
+  </Target>
+
+  <Target Name="NpmInstall"
+          Condition="'$(DesignTimeBuild)' != 'true' And '$(SkipNpmBuild)' != 'true'"
+          Inputs="package.json;package-lock.json"
+          Outputs="node_modules/.install-stamp">
     <Exec Command="npm ci" WorkingDirectory="$(MSBuildThisFileDirectory)" ConsoleToMsBuild="true" />
 
     <!-- Write the stamp file, so incremental builds work -->
@@ -57,8 +68,7 @@
     <NpmBuildInputFiles Include="package-lock.json" />
     <NpmBuildInputFiles Include="tsconfig.json" />
     <NpmBuildInputFiles Include="tailwind.config.js" />
-    <NpmBuildInputFiles Include=".parcelrc" />
-    <NpmBuildInputFiles Include=".postcssrc" />
+    <NpmBuildInputFiles Include="vite.config.ts" />
   </ItemGroup>
   <!-- Tailwind scans these directories for utility class usage (see tailwind.config.js content paths).
        Resolved inside a target so external cshtml files don't appear in the IDE's project tree. -->
@@ -73,6 +83,7 @@
   <Target Name="NpmRunBuild"
           DependsOnTargets="NpmInstall;MinVer;CollectExternalCshtmlInputs"
           BeforeTargets="BeforeBuild"
+          Condition="'$(DesignTimeBuild)' != 'true' And '$(SkipNpmBuild)' != 'true'"
           Inputs="@(NpmBuildInputFiles)"
           Outputs="_static/.build-stamp;_static/main.js;_static/styles.css">
     <Message Text="Building frontend with version: $(MinVerVersion)" Importance="high" />
@@ -86,31 +97,40 @@
     <Touch Files="_static/.build-stamp" AlwaysCreate="true" />
   </Target>
 
-  <!-- Clean old hashed assets before each frontend build to avoid accumulating stale files.
-       Without this, multiple Parcel runs (e.g. across dotnet build vs dotnet run) can leave
-       old hashed filenames in _static; all get embedded and then copied to assembler output,
-       causing duplicated JS/CSS with different hashes in the final _static folder. -->
-  <Target Name="CleanOldHashedAssets" BeforeTargets="NpmRunBuild" Condition="'$(IsPublishing)' == 'true'">
+  <Target Name="CleanGeneratedStaticAssets"
+          BeforeTargets="NpmRunBuild"
+          Condition="'$(DesignTimeBuild)' != 'true' And '$(SkipNpmBuild)' != 'true'">
+    <RemoveDir Directories="_static/assets" Condition="Exists('_static/assets')" />
     <ItemGroup>
-      <OldHashedFiles Include="_static/*.????????*.js" />
-      <OldHashedFiles Include="_static/*.????????*.css" />
-      <OldHashedFiles Include="_static/*.????????*.js.map" />
-      <OldHashedFiles Include="_static/*.????????*.css.map" />
+      <GeneratedStaticFiles Include="_static/main.js" />
+      <GeneratedStaticFiles Include="_static/main.js.map" />
+      <GeneratedStaticFiles Include="_static/styles.css" />
+      <GeneratedStaticFiles Include="_static/styles.css.map" />
+      <GeneratedStaticFiles Include="_static/assembler.css" />
+      <GeneratedStaticFiles Include="_static/assembler.css.map" />
+      <GeneratedStaticFiles Include="_static/isolated.css" />
+      <GeneratedStaticFiles Include="_static/isolated.css.map" />
+      <GeneratedStaticFiles Include="_static/codex.css" />
+      <GeneratedStaticFiles Include="_static/codex.css.map" />
+      <ViteGeneratedFiles Include="_static/asset-*" />
+      <ViteGeneratedFiles Include="_static/chunk-*" />
+      <OldHashedBundles Include="_static/*.????????*.js" />
+      <OldHashedBundles Include="_static/*.????????*.css" />
     </ItemGroup>
-    <Delete Files="@(OldHashedFiles)" ContinueOnError="true" />
+    <Delete Files="@(GeneratedStaticFiles);@(ViteGeneratedFiles);@(OldHashedBundles)" ContinueOnError="true" />
   </Target>
 
-  <Target Name="EmbedGeneratedAssets" AfterTargets="NpmRunBuild">
+  <Target Name="EmbedGeneratedAssets" DependsOnTargets="NpmRunBuild" BeforeTargets="BeforeBuild">
     <ItemGroup>
-      <EmbeddedResource Include="_static/*.js" Watch="false" />
-      <EmbeddedResource Include="_static/*.js.map" Watch="false" Condition="'$(Configuration)' == 'Debug'" />
-      <EmbeddedResource Include="_static/*.css" Watch="false" />
-      <EmbeddedResource Include="_static/*.css.map" Watch="false" Condition="'$(Configuration)' == 'Debug'" />
-      <EmbeddedResource Include="_static/*.svg" Watch="false" />
-      <EmbeddedResource Include="_static/*.png" Watch="false" />
-      <EmbeddedResource Include="_static/*.ttf" Watch="false" />
-      <EmbeddedResource Include="_static/*.woff" Watch="false" />
-      <EmbeddedResource Include="_static/*.woff2" Watch="false" />
+      <EmbeddedResource Include="_static/**/*.js" Watch="false" />
+      <EmbeddedResource Include="_static/**/*.js.map" Watch="false" Condition="'$(Configuration)' == 'Debug'" />
+      <EmbeddedResource Include="_static/**/*.css" Watch="false" />
+      <EmbeddedResource Include="_static/**/*.css.map" Watch="false" Condition="'$(Configuration)' == 'Debug'" />
+      <EmbeddedResource Include="_static/**/*.svg" Watch="false" />
+      <EmbeddedResource Include="_static/**/*.png" Watch="false" />
+      <EmbeddedResource Include="_static/**/*.ttf" Watch="false" />
+      <EmbeddedResource Include="_static/**/*.woff" Watch="false" />
+      <EmbeddedResource Include="_static/**/*.woff2" Watch="false" />
     </ItemGroup>
   </Target>
 

src/Elastic.Documentation.Site/Layout/_Head.cshtml

@@ -26,7 +26,7 @@
 			break;
 	}
 	<script>window.__DOCS_CONFIG__=@(new HtmlString(Model.FrontendConfigJson));</script>
-	<script src="@Model.Static("main.js")" defer></script>
+	<script type="module" src="@Model.Static("main.js")"></script>
 	@if (Model.BuildType == BuildType.Assembler && !Model.Features.AirGappedEnabled)
 	{
 		@* In <head> so head-support's merge keeps the identical tag across htmx navigations