upgrade lots of packages, change folder name and csproj

.gitignore

@@ -1,5 +1,3 @@
-/Properties/launchSettings.json
-
 ## Ignore Visual Studio temporary files, build results, and
 ## files generated by popular Visual Studio add-ons.
 
@@ -248,6 +246,6 @@ Anlab.Mvc/anlab.db
 
 # Visual Studio SQL Projects
 *.jfm
-
-/Anlab.Mvc/Properties/serviceDependencies.json
-/Anlab.Mvc/Properties/serviceDependencies.local.json
+
+/Anlab.Mvc/Properties/serviceDependencies.json
+/Anlab.Mvc/Properties/serviceDependencies.local.json

Anlab.Mvc/.gitignore

@@ -187,7 +187,7 @@ ClientBin/
 *.publishsettings
 orleans.codegen.cs
 
-/node_modules
+node_modules/
 
 # RIA/Silverlight projects
 Generated_Code/

Anlab.Mvc/AnlabMvc.csproj

@@ -3,6 +3,8 @@
     <TargetFramework>net6.0</TargetFramework>
     <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
     <IsPackable>false</IsPackable>
+    <SpaRoot>ClientApp\</SpaRoot>
+    <DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>
     <UserSecretsId>f3c999a5-2304-44e0-a49e-f43333bf9ccf</UserSecretsId>
     <Version>1.1.0.0</Version>
     <Description>Order and results management system for AnLab@UCDavis</Description>
@@ -47,22 +49,16 @@
     <PackageReference Include="YamlDotNet" Version="5.0.0" />
     <PackageReference Include="Microsoft.AspNetCore.Mvc.NewtonsoftJson" Version="6.0.2" />
   </ItemGroup>
-  <ItemGroup>
-    <!-- Files not to show in IDE -->
-    <None Remove="Client\components\DateSampled.tsx" />
-    <None Remove="Client\components\TestInfo.tsx" />
-    <None Remove="yarn.lock" />
+    <ItemGroup>
+    <!-- Files not to publish (note that the 'dist' subfolders are re-added below) -->
+    <Content Remove="ClientApp\**"/>
   </ItemGroup>
   <ItemGroup>
     <None Include="wwwroot\Images\Error.png" />
   </ItemGroup>
   <ItemGroup>
     <ProjectReference Include="..\Anlab.Core\Anlab.Core.csproj" />
   </ItemGroup>
-  <ItemGroup>
-    <TypeScriptCompile Include="Client\components\DateSampled.tsx" />
-    <TypeScriptCompile Include="Client\components\TestInfo.tsx" />
-  </ItemGroup>
   <ItemGroup>
     <None Update="Pages\**\*.md">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
@@ -122,36 +118,27 @@
       <LastGenOutput>QueryResource.Designer.cs</LastGenOutput>
     </EmbeddedResource>
   </ItemGroup>
-  <Target Name="RunWebpack" AfterTargets="ComputeFilesToPublish">
-    <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
-    <Exec Command="node node_modules/webpack/bin/webpack.js --env.prod" />
-    <!-- Include the newly-built files in the publish output -->
-    <ItemGroup>
-      <DistFiles Include="wwwroot\dist\**" />
-      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
-        <RelativePath>%(DistFiles.Identity)</RelativePath>
-        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
-      </ResolvedFileToPublish>
-    </ItemGroup>
-  </Target>
-  <PropertyGroup>
-    <!-- File with mtime of last successful npm install -->
-    <NpmInstallStampFile>node_modules/.install-stamp</NpmInstallStampFile>
-  </PropertyGroup>
-  <Target Name="NpmInstallDebug"
-    BeforeTargets="BeforeBuild"
-    Condition=" '$(Configuration)' == 'Debug' "
-    Inputs="package.json"
-    Outputs="$(NpmInstallStampFile)">
-    <Exec Command="npm install" />
-    <Touch Files="$(NpmInstallStampFile)" AlwaysCreate="true" />
-  </Target>
-  <Target Name="NpmInstallRelease"
-    BeforeTargets="BeforeBuild"
-    Condition=" '$(Configuration)' == 'Release' "
-    Inputs="package.json"
-    Outputs="$(NpmInstallStampFile)">
-    <Exec Command="npm ci" />
-    <Touch Files="$(NpmInstallStampFile)" AlwaysCreate="true" />
-  </Target>
+  <Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)node_modules') ">
+		<!-- Ensure Node.js is installed -->
+		<Exec Command="node --version" ContinueOnError="true">
+			<Output TaskParameter="ExitCode" PropertyName="ErrorCode"/>
+		</Exec>
+		<Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE."/>
+		<Message Importance="high" Text="Restoring dependencies using 'npm'. This may take several minutes..."/>
+		<Exec WorkingDirectory="$(SpaRoot)" Command="npm install"/>
+	</Target>
+	<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
+		<!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
+		<Exec WorkingDirectory="$(SpaRoot)" Command="npm install"/>
+		<Exec WorkingDirectory="$(SpaRoot)" Command="npm run build"/>
+		<!-- Include the newly-built files in the publish output -->
+		<ItemGroup>
+			<DistFiles Include="$(SpaRoot)build\**"/>
+			<ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
+				<RelativePath>%(DistFiles.Identity)</RelativePath>
+				<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
+				<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
+			</ResolvedFileToPublish>
+		</ItemGroup>
+	</Target>
 </Project>

Anlab.Mvc/ClientApp/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "anlab",
+  "version": "0.1.0",
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "testoriginal": "karma start",
+    "citest": "npx cross-env CI=true react-scripts test --coverage --coverageDirectory=./ --reporters default --reporters jest-trx-results-processor",
+    "eject": "react-scripts eject",
+    "testwatch": "jest --watchAll",
+    "coverage": "jest --coverage --coverageReporters=cobertura",
+    "lint": "node node_modules/eslint/bin/eslint.js ClientApp --ext .tsx,.ts,.js,.jsx"
+  },
+  "dependencies": {
+    "bootstrap": "^3.3.6",
+    "jquery": "^3.3.1",
+    "moment": "^2.20.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-error-overlay": "6.0.9",
+    "react-bootstrap": "^0.31.5",
+    "react-datepicker": "1.4.1",
+    "react-hot-loader": "^3.1.3",
+    "react-number-format": "^2.0.4",
+    "react-router-dom": "5.2.0",
+    "react-scripts": "4.0.3",
+    "react-svg-loader": "^1.1.1",
+    "react-toolbox": "2.0.0-beta.12"
+  },
+  "devDependencies": {
+    "@types/history": "4.6.0",
+    "@types/jasmine": "^2.8.2",
+    "@types/jasmine-enzyme": "^3.6.2",
+    "@types/react": "^16.4.1",
+    "@types/react-dom": "^16.0.6",
+    "@types/react-router": "5.1.8",
+    "@types/react-router-dom": "5.1.5",
+    "enzyme": "^3",
+    "enzyme-adapter-react-15": "^1.0.1",
+    "jasmine-core": "^2.6.1",
+    "jasmine-enzyme": "^4.0.1",
+    "jsdom": "^10.1.0",
+    "karma": "^1.7.0",
+    "karma-appveyor-reporter": "^0.3.0",
+    "karma-jasmine": "^1.1.1",
+    "karma-jsdom-launcher": "^6.1.1",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-webpack": "^2.0.6",
+    "react-addons-test-utils": "^15.6.2",
+    "react-test-renderer": "^15.6.2",
+    "showdown": "^1.8.4",
+    "sass": "^1.49.9",
+    "typescript": "^4.6.2"
+  }
+}

Anlab.Mvc/ClientApp/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}