Switched out CRA with vite

pac-man-board-game/ClientApp/index.html

@@ -4,13 +4,13 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000000">
-    <base href="%PUBLIC_URL%/" />
+    <base href="/" />
     <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="manifest" href="/manifest.json">
+    <link rel="shortcut icon" href="/favicon.ico">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -27,6 +27,7 @@
       You need to enable JavaScript to run this app.
     </noscript>
     <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

pac-man-board-game/ClientApp/package.json

@@ -52,8 +52,9 @@
   },
   "scripts": {
     "prestart": "node aspnetcore-https && node aspnetcore-react",
-    "start": "rimraf ./build && react-scripts start",
-    "build": "react-scripts build",
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
     "test": "cross-env CI=true react-scripts test --env=jsdom",
     "eject": "react-scripts eject",
     "lint": "eslint ./src/"

pac-man-board-game/ClientApp/src/components/Home.tsx

@@ -11,7 +11,6 @@ export const Home = () =>
           code
         </li>
         <li><a href="https://facebook.github.io/react/">React</a> for client-side code</li>
-        <li><a href="http://getbootstrap.com/">Bootstrap</a> for layout and styling</li>
       </ul>
       <p>To help you get started, we have also set up:</p>
       <ul>

pac-man-board-game/ClientApp/src/setupProxy.js

@@ -1,30 +0,0 @@
-const {createProxyMiddleware} = require('http-proxy-middleware');
-const {env} = require('process');
-
-const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :
-  env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'http://localhost:47130';
-
-const context = [
-  "/api",
-];
-
-const onError = (err, req, resp, target) => {
-  console.error(`${err.message}`);
-}
-
-module.exports = function (app) {
-  const appProxy = createProxyMiddleware(context, {
-    target: target,
-    // Handle errors to prevent the proxy middleware from crashing when
-    // the ASP NET Core webserver is unavailable
-    onError: onError,
-    secure: false,
-    // Uncomment this line to add support for proxying websockets
-    //ws: true, 
-    headers: {
-      Connection: 'Keep-Alive'
-    }
-  });
-
-  app.use(appProxy);
-};

pac-man-board-game/ClientApp/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

pac-man-board-game/ClientApp/tsconfig.json

@@ -5,13 +5,16 @@
     "noEmitOnError": true,
     "removeComments": false,
     "sourceMap": true,
-    "target": "es5",
     "outDir": "wwwroot/js",
     "jsx": "react",
     "strict": true,
-    "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": true,
+    "target": "ESNext",
+    "module": "ESNext",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "types": ["vite/client", "vite-plugin-svgr/client"],
   },
   "include": [
-    "/**/*"
+    "src"
   ]
 }

pac-man-board-game/ClientApp/vite.config.ts

@@ -0,0 +1,76 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+// @ts-ignore
+import fs from "fs";
+// @ts-ignore
+import path from "path";
+import { execSync } from "child_process";
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3000,
+    strictPort: true,
+    https: generateCerts(),
+    proxy: {
+      // proxy API requests to the ASP.NET backend
+      "/api": {
+        changeOrigin: true,
+        secure: false,
+        rewrite: (path) => path.replace(/^\/api/, "/api"),
+        // target taken from src/setupProxy.js in ASP.NET React template
+        target: process.env.ASPNETCORE_HTTPS_PORT
+          ? `https://localhost:${process.env.ASPNETCORE_HTTPS_PORT}`
+          : process.env.ASPNETCORE_URLS
+            ? process.env.ASPNETCORE_URLS.split(";")[0]
+            : "http://localhost:40457",
+      },
+    },
+  },
+});
+
+/** Function taken from aspnetcore-https.js in ASP.NET React template */
+function generateCerts() {
+  const baseFolder =
+    process.env.APPDATA !== undefined && process.env.APPDATA !== ""
+      ? `${process.env.APPDATA}/ASP.NET/https`
+      : `${process.env.HOME}/.aspnet/https`;
+  const certificateArg = process.argv
+    .map((arg) => arg.match(/--name=(?<value>.+)/i))
+    .filter(Boolean)[0];
+  const certificateName = certificateArg
+    ? certificateArg.groups.value
+    : process.env.npm_package_name;
+
+  if (!certificateName) {
+    console.error(
+      "Invalid certificate name. Run this script in the context of an npm/yarn script or pass --name=<<app>> explicitly."
+    );
+    process.exit(-1);
+  }
+
+  const certFilePath = path.join(baseFolder, `${certificateName}.pem`);
+  const keyFilePath = path.join(baseFolder, `${certificateName}.key`);
+
+  if (!fs.existsSync(certFilePath) || !fs.existsSync(keyFilePath)) {
+    const outp = execSync(
+      "dotnet " +
+      [
+        "dev-certs",
+        "https",
+        "--export-path",
+        certFilePath,
+        "--format",
+        "Pem",
+        "--no-password",
+      ].join(" ")
+    );
+    console.log(outp.toString());
+  }
+
+  return {
+    cert: fs.readFileSync(certFilePath, "utf8"),
+    key: fs.readFileSync(keyFilePath, "utf8"),
+  };
+}

pac-man-board-game/pac-man-board-game.csproj

@@ -8,8 +8,8 @@
         <IsPackable>false</IsPackable>
         <SpaRoot>ClientApp\</SpaRoot>
         <DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>
-        <SpaProxyServerUrl>https://localhost:44435</SpaProxyServerUrl>
-        <SpaProxyLaunchCommand>npm start</SpaProxyLaunchCommand>
+        <SpaProxyServerUrl>https://localhost:3000</SpaProxyServerUrl>
+        <SpaProxyLaunchCommand>npm run dev</SpaProxyLaunchCommand>
         <RootNamespace>pac_man_board_game</RootNamespace>
         <ImplicitUsings>enable</ImplicitUsings>
     </PropertyGroup>

package.json

@@ -0,0 +1,8 @@
+{
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.0.0",
+    "vite": "^4.3.6",
+    "vite-plugin-svgr": "^3.2.0",
+    "vite-tsconfig-paths": "^4.2.0"
+  }
+}