Skip to content

Replace Parcel with Vite for frontend builds #4240

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Mpdreamz merged 4 commits into from
Oct 1, 2026
Merged

Replace Parcel with Vite for frontend builds #4240

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f1f0517
Site: replace Parcel with Vite for frontend builds
Mpdreamz Sep 22, 2026
ab5544e
CI: include .nvmrc in node_modules cache key and check all built CSS …
Mpdreamz Sep 24, 2026
9584db2
Site: don't delete stable named outputs in CleanGeneratedStaticAssets
Mpdreamz Sep 24, 2026
9548028
chore: upgrade Vite to 8.x and companion plugins to latest
Mpdreamz Sep 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .github/actions/bootstrap/action.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,3 +57,10 @@ runs:
cache: npm
cache-dependency-path: src/Elastic.Documentation.Site/package-lock.json
node-version-file: .nvmrc

- uses: actions/cache@v6
with:
path: src/Elastic.Documentation.Site/node_modules
key: node-modules-${{ runner.os }}-${{ hashFiles('src/Elastic.Documentation.Site/package-lock.json', '.nvmrc') }}

@github-actions github-actions Bot Sep 30, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[MEDIUM] node_modules cache key should include runner architecture

The new cache key only scopes by runner.os, but this repository runs release builds on both macos-latest and macos-latest-large. Those can differ by CPU architecture, and node_modules can contain arch-specific native binaries (for example esbuild/rollup optional packages used by Vite).

That means an arm64 cache can be restored on x64 (or vice versa), causing intermittent frontend build failures when native modules are loaded.

Suggested change
key: node-modules-${{ runner.os }}-${{ hashFiles('src/Elastic.Documentation.Site/package-lock.json', '.nvmrc') }}
key: node-modules-${{ runner.os }}-${{ runner.arch }}-${{ hashFiles('src/Elastic.Documentation.Site/package-lock.json', '.nvmrc') }}

restore-keys: |
node-modules-${{ runner.os }}-
7 changes: 0 additions & 7 deletions .github/workflows/ci.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,13 +110,6 @@ jobs:
- uses: actions/checkout@v7
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
uses: ./.github/actions/bootstrap
Expand Down
7 changes: 0 additions & 7 deletions .github/workflows/release.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -303,13 +303,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
uses: ./.github/actions/bootstrap
Expand Down
3 changes: 3 additions & 0 deletions src/Elastic.Documentation.Site/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
.parcel-cache/
node_modules/
_static/assets/
_static/asset-*
_static/chunk-*
_static/*.css
_static/*.css.map
_static/*.ttf
Expand Down
6 changes: 0 additions & 6 deletions src/Elastic.Documentation.Site/.parcelrc
View file
Open in desktop

This file was deleted.

6 changes: 0 additions & 6 deletions src/Elastic.Documentation.Site/.postcssrc
View file
Open in desktop

This file was deleted.

6 changes: 1 addition & 5 deletions src/Elastic.Documentation.Site/Assets/telemetry/instrumentation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,11 +151,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\/?$/],
}),
],
})
Expand Down
67 changes: 40 additions & 27 deletions src/Elastic.Documentation.Site/Elastic.Documentation.Site.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
<InterceptorsPreviewNamespaces>$(InterceptorsPreviewNamespaces);Microsoft.AspNetCore.Http.Generated</InterceptorsPreviewNamespaces>
<IsPublishable>true</IsPublishable>
<EnableDefaultRazorSlices>false</EnableDefaultRazorSlices>
<SkipNpmBuild Condition="'$(SkipNpmBuild)' == ''">false</SkipNpmBuild>
</PropertyGroup>

<ItemGroup>
Expand All @@ -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') Or !Exists('_static/assembler.css') Or !Exists('_static/isolated.css') Or !Exists('_static/codex.css')"
Text="SkipNpmBuild is set but one or more _static artifacts are 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 -->
Expand All @@ -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. -->
Expand All @@ -73,44 +83,47 @@
<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" />
<Exec Command="npm run build"
WorkingDirectory="$(MSBuildThisFileDirectory)"
ConsoleToMsBuild="true"
EnvironmentVariables="DOCS_BUILDER_VERSION=$(MinVerVersion)">
<Output TaskParameter="ConsoleOutput" PropertyName="OutputOfExec" />
</Exec>
EnvironmentVariables="DOCS_BUILDER_VERSION=$(MinVerVersion)"
IgnoreStandardErrorWarningFormat="true" />
<!-- Write the stamp file, so incremental builds work -->
<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" />
<!-- Only remove content-hashed chunk/asset files from prior Vite runs so they
don't accumulate across builds. Do NOT list the stable named outputs here
(main.js, styles.css, etc.) — deleting them before NpmRunBuild's incremental
output check would force a full npm run build on every dotnet build invocation
even when no source files changed. -->
<ViteGeneratedFiles Include="_static/asset-*" />
<ViteGeneratedFiles Include="_static/chunk-*" />
<OldHashedBundles Include="_static/*.????????*.js" />
<OldHashedBundles Include="_static/*.????????*.css" />
</ItemGroup>
<Delete Files="@(OldHashedFiles)" ContinueOnError="true" />
<Delete Files="@(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>

Expand Down
2 changes: 1 addition & 1 deletion src/Elastic.Documentation.Site/Layout/_Head.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
@* hx-history=false stops new snapshots but still restores sessionStorage
leftovers from older pages, which keeps the previous island tree. *@
<script>try{sessionStorage.removeItem("htmx-history-cache")}catch(e){}</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
Expand Down
Loading
Loading