[Blazor] Remove checked-in JS files (#53209)

* [Blazor] Remove checked-in JS files
* Update .gitignore and fix paths
* Update images to Centos8
* Update ubuntu images
* Make sure NPM scripts build inside sourcebuild
* Disable running Firefox on Mac OS

Author: javiercn

.azure/pipelines/ci.yml

@@ -562,7 +562,7 @@ stages:
         jobDisplayName: "Build: Linux Musl ARM"
         agentOs: Linux
         useHostedUbuntu: false
-        container: mcr.microsoft.com/dotnet-buildtools/prereqs:ubuntu-18.04-cross-arm-alpine
+        container: mcr.microsoft.com/dotnet-buildtools/prereqs:ubuntu-22.04-cross-arm-alpine
         buildArgs:
           --arch arm
           --os-name linux-musl
@@ -594,7 +594,7 @@ stages:
         jobDisplayName: "Build: Linux Musl ARM64"
         agentOs: Linux
         useHostedUbuntu: false
-        container: mcr.microsoft.com/dotnet-buildtools/prereqs:ubuntu-18.04-cross-arm64-alpine
+        container: mcr.microsoft.com/dotnet-buildtools/prereqs:ubuntu-22.04-cross-arm64-alpine
         buildArgs:
           --arch arm64
           --os-name linux-musl
@@ -721,7 +721,7 @@ stages:
       parameters:
         platform:
           name: 'Managed'
-          container: 'mcr.microsoft.com/dotnet-buildtools/prereqs:centos-stream8'
+          container: 'mcr.microsoft.com/dotnet-buildtools/prereqs:centos-stream8-20240104210103-4893224'
           buildScript: './eng/build.sh $(_PublishArgs) --no-build-repo-tasks $(_InternalRuntimeDownloadArgs)'
           skipPublishValidation: true
           jobProperties:

eng/Build.props

@@ -124,7 +124,7 @@
         <ProjectToBuild Condition=" $(BuildNative) " Include="@(NativeProjects)" Exclude="@(ProjectToExclude)" />
         <ProjectToExclude Condition=" !$(BuildNative) " Include="@(NativeProjects)" />
 
-        <NodeJsProjects Condition="'$(TargetArchitecture)' == 'x64'"
+        <NodeJsProjects
           Include="$(RepoRoot)eng\Npm.Workspace.nodeproj;
                    $(RepoRoot)eng\Npm.Workspace.FunctionalTests.nodeproj;"
                         AdditionalProperties="BuildInParallel=false"

eng/Npm.Workspace.nodeproj

@@ -4,6 +4,7 @@
   <Import Project="$(MSBuildThisFileDirectory)..\Directory.Build.props" />
 
   <PropertyGroup>
+    <ExcludeFromSourceBuild>false</ExcludeFromSourceBuild>
     <IsTestProject>true</IsTestProject>
     <IsUnitTestProject>true</IsUnitTestProject>
     <TestDependsOnAspNetPackages>false</TestDependsOnAspNetPackages>

eng/SourceBuild.props

@@ -83,4 +83,35 @@
     </ItemGroup>
   </Target>
 
+  <Target Name="RestoreNpmPackages"
+          BeforeTargets="RunInnerSourceBuildCommand">
+
+    <Message Text="Checking node version..." Importance="high" />
+    <Exec
+      Command="node --version"
+      WorkingDirectory="$(InnerSourceBuildRepoRoot)" />
+
+    <Message Text="Checking npm version..." Importance="high" />
+    <Exec
+      Command="npm --version"
+      WorkingDirectory="$(InnerSourceBuildRepoRoot)" />
+
+    <Exec
+      Command="npm ci"
+      WorkingDirectory="$(InnerSourceBuildRepoRoot)" />
+
+  </Target>
+
+  <Target Name="BuildNpmFiles"
+    DependsOnTargets="RestoreNpmPackages"
+    BeforeTargets="RunInnerSourceBuildCommand">
+
+    <Message Text="Building Node JS files..." Importance="high" />
+
+    <Exec
+      Command="npm run build"
+      WorkingDirectory="$(InnerSourceBuildRepoRoot)" />
+
+  </Target>
+
 </Project>

eng/common/templates/jobs/source-build.yml

@@ -14,7 +14,7 @@ parameters:
   # This is the default platform provided by Arcade, intended for use by a managed-only repo.
   defaultManagedPlatform:
     name: 'Managed'
-    container: 'mcr.microsoft.com/dotnet-buildtools/prereqs:centos-stream8'
+    container: 'mcr.microsoft.com/dotnet-buildtools/prereqs:centos-stream8-20240104210103-4893224'
 
   # Defines the platforms on which to run build jobs. One job is created for each platform, and the
   # object in this array is sent to the job template as 'platform'. If no platforms are specified,

src/Components/Endpoints/src/Microsoft.AspNetCore.Components.Endpoints.csproj

@@ -57,20 +57,15 @@
     <Reference Include="Microsoft.Extensions.FileProviders.Embedded" />
   </ItemGroup>
 
-  <PropertyGroup>
-    <BlazorWebJSFilename>blazor.web.js</BlazorWebJSFilename>
-    <BlazorWebJSFile Condition=" '$(Configuration)' == 'Debug' ">..\..\Web.JS\dist\Debug\$(BlazorWebJSFilename)</BlazorWebJSFile>
-    <BlazorWebJSFile Condition=" '$(Configuration)' != 'Debug' ">..\..\Web.JS\dist\Release\$(BlazorWebJSFilename)</BlazorWebJSFile>
-  </PropertyGroup>
-
-  <Target Name="_CheckBlazorWebJSPath" AfterTargets="ResolveProjectReferences" Condition=" !EXISTS('$(BlazorWebJSFile)') ">
-    <Warning Text="'$(BlazorWebJSFile)' does not exist. Falling back to checked-in copy." />
+  <Target Name="_AddEmbeddedBlazorWebJS" BeforeTargets="_CalculateEmbeddedFilesManifestInputs">
     <PropertyGroup>
-      <BlazorWebJSFile>..\..\Web.JS\dist\Release\$(BlazorWebJSFilename)</BlazorWebJSFile>
+      <BlazorWebJSFilename>blazor.web.js</BlazorWebJSFilename>
+      <BlazorWebJSFile Condition=" '$(Configuration)' == 'Debug' ">$(MSBuildThisFileDirectory)..\..\Web.JS\dist\Debug\$(BlazorWebJSFilename)</BlazorWebJSFile>
+      <BlazorWebJSFile Condition=" '$(Configuration)' != 'Debug' ">$(MSBuildThisFileDirectory)..\..\Web.JS\dist\Release\$(BlazorWebJSFilename)</BlazorWebJSFile>
     </PropertyGroup>
-  </Target>
 
-  <Target Name="_AddEmbeddedBlazorWebJS" AfterTargets="_CheckBlazorWebJSPath">
+    <Warning Condition="!Exists('$(BlazorWebJSFile)')" Text="'$(BlazorWebJSFile)' does not exist. Ensure the JS assets have been build by running 'npm run build' from the repository root." />
+
     <ItemGroup>
       <EmbeddedResource Include="$(BlazorWebJSFile)" LogicalName="_framework/$(BlazorWebJSFilename)" />
       <EmbeddedResource Include="$(BlazorWebJSFile).map" LogicalName="_framework/$(BlazorWebJSFilename).map" Condition="Exists('$(BlazorWebJSFile).map')" />

src/Components/Server/src/Microsoft.AspNetCore.Components.Server.csproj

@@ -98,20 +98,15 @@
     <Compile Include="$(RepoRoot)src\Shared\Components\ProtectedPrerenderComponentApplicationStore.cs" />
   </ItemGroup>
 
-  <PropertyGroup>
-    <BlazorServerJSFilename>blazor.server.js</BlazorServerJSFilename>
-    <BlazorServerJSFile Condition=" '$(Configuration)' == 'Debug' ">..\..\Web.JS\dist\Debug\$(BlazorServerJSFilename)</BlazorServerJSFile>
-    <BlazorServerJSFile Condition=" '$(Configuration)' != 'Debug' ">..\..\Web.JS\dist\Release\$(BlazorServerJSFilename)</BlazorServerJSFile>
-  </PropertyGroup>
-
-  <Target Name="_CheckBlazorServerJSPath" AfterTargets="ResolveProjectReferences" Condition=" !EXISTS('$(BlazorServerJSFile)') ">
-    <Warning Text="'$(BlazorServerJSFile)' does not exist. Falling back to checked-in copy." />
+  <Target Name="_AddEmbeddedBlazor" BeforeTargets="_CalculateEmbeddedFilesManifestInputs">
     <PropertyGroup>
-      <BlazorServerJSFile>..\..\Web.JS\dist\Release\$(BlazorServerJSFilename)</BlazorServerJSFile>
+      <BlazorServerJSFilename>blazor.server.js</BlazorServerJSFilename>
+      <BlazorServerJSFile Condition=" '$(Configuration)' == 'Debug' ">$(MSBuildThisFileDirectory)..\..\Web.JS\dist\Debug\$(BlazorServerJSFilename)</BlazorServerJSFile>
+      <BlazorServerJSFile Condition=" '$(Configuration)' != 'Debug' ">$(MSBuildThisFileDirectory)..\..\Web.JS\dist\Release\$(BlazorServerJSFilename)</BlazorServerJSFile>
     </PropertyGroup>
-  </Target>
 
-  <Target Name="_AddEmbeddedBlazor" AfterTargets="_CheckBlazorServerJSPath">
+    <Warning Condition="!Exists('$(BlazorServerJSFile)')" Text="'$(BlazorServerJSFile)' does not exist. Ensure the JS assets have been build by running 'npm run build' from the repository root." />
+
     <ItemGroup>
       <EmbeddedResource Include="$(BlazorServerJSFile)" LogicalName="_framework/$(BlazorServerJSFilename)" />
       <EmbeddedResource Include="$(BlazorServerJSFile).map" LogicalName="_framework/$(BlazorServerJSFilename).map" Condition="Exists('$(BlazorServerJSFile).map')" />

src/Components/Web.JS/.gitignore

@@ -1,4 +1,3 @@
 node_modules/
-dist/Debug/
-dist/Release/blazor.webassembly.js
-dist/Release/blazor.webview.js
+dist/
+dist/

src/Components/Web.JS/dist/Release/blazor.server.js

@@ -56,20 +56,16 @@
 
   <UsingTask AssemblyFile="$(_FileProviderTaskAssembly)" TaskName="Microsoft.Extensions.FileProviders.Embedded.Manifest.Task.GenerateEmbeddedResourcesManifest" />
 
-  <PropertyGroup>
-    <BlazorWebViewJSFilename>blazor.webview.js</BlazorWebViewJSFilename>
-    <BlazorWebViewJSFile Condition=" '$(Configuration)' == 'Debug' ">..\..\..\Web.JS\dist\Debug\$(BlazorWebViewJSFilename)</BlazorWebViewJSFile>
-    <BlazorWebViewJSFile Condition=" '$(Configuration)' != 'Debug' ">..\..\..\Web.JS\dist\Release\$(BlazorWebViewJSFilename)</BlazorWebViewJSFile>
-  </PropertyGroup>
+  <Target Name="_AddEmbeddedBlazorWebView" BeforeTargets="_CalculateEmbeddedFilesManifestInputs">
 
-  <Target Name="_CheckBlazorWebViewJSPath" AfterTargets="ResolveProjectReferences" Condition=" !EXISTS('$(BlazorWebViewJSFile)') ">
-    <Warning Text="'$(BlazorWebViewJSFile)' does not exist. Falling back to checked-in copy." />
     <PropertyGroup>
-      <BlazorWebViewJSFile>..\..\..\Web.JS\dist\Release\$(BlazorWebViewJSFilename)</BlazorWebViewJSFile>
+      <BlazorWebViewJSFilename>blazor.webview.js</BlazorWebViewJSFilename>
+      <BlazorWebViewJSFile Condition=" '$(Configuration)' == 'Debug' ">$(MSBuildThisFileDirectory)..\..\..\Web.JS\dist\Debug\$(BlazorWebViewJSFilename)</BlazorWebViewJSFile>
+      <BlazorWebViewJSFile Condition=" '$(Configuration)' != 'Debug' ">$(MSBuildThisFileDirectory)..\..\..\Web.JS\dist\Release\$(BlazorWebViewJSFilename)</BlazorWebViewJSFile>
     </PropertyGroup>
-  </Target>
 
-  <Target Name="_AddEmbeddedBlazorWebView" BeforeTargets="_CalculateEmbeddedFilesManifestInputs" DependsOnTargets="_CheckBlazorWebViewJSPath">
+    <Warning Condition="!Exists('$(BlazorWebViewJSFile)')" Text="'$(BlazorWebViewJSFile)' does not exist. Ensure the JS assets have been build by running 'npm run build' from the repository root." />
+
     <ItemGroup>
       <EmbeddedResource Include="blazor.modules.json" LogicalName="_framework/blazor.modules.json" />
       <EmbeddedResource Include="$(BlazorWebViewJSFile)" LogicalName="_framework/$(BlazorWebViewJSFilename)" />

src/Components/Web.JS/dist/Release/blazor.web.js

@@ -1,3 +1,5 @@
+const os = require('os');
+
 try {
     // Karma configuration for a local run (the default)
     const createKarmaConfig = require("./karma.base.conf");
@@ -45,7 +47,7 @@ try {
     // We use the launchers themselves to figure out if the browser exists. It's a bit sneaky, but it works.
     tryAddBrowser("ChromeHeadlessNoSandbox", ChromeHeadlessBrowser.prototype);
     tryAddBrowser("ChromiumHeadlessIgnoreCert", ChromiumHeadlessBrowser.prototype);
-    if (!tryAddBrowser("FirefoxHeadless", FirefoxHeadlessBrowser.prototype)) {
+    if (os.platform() !== 'darwin' && !tryAddBrowser("FirefoxHeadless", FirefoxHeadlessBrowser.prototype)) {
       tryAddBrowser("FirefoxDeveloperHeadless", FirefoxDeveloperHeadlessBrowser.prototype);
     }