Create React App -> Vite

.github/workflows/ci.yml

@@ -27,7 +27,7 @@ jobs:
       - name: Set up NodeJS environment
         uses: actions/setup-node@v3
         with:
-          node-version: '18.11.0'
+          node-version: '20.12.2'
       # Consider this as an add on to optimize the execution of actions
       - name: Cache node modules
         id: cache-npm
@@ -50,9 +50,10 @@ jobs:
         run: npm run lint
         working-directory: ./frontend2
       # Run test cases and this could ensure minimum coverage as well if set
-      - name: Execute test cases
-        run: npm run test
-        working-directory: ./frontend2
+      # This section should be un-commented when our frontend implements unit testing
+      # - name: Execute test cases
+      #   run: npm run test
+      #   working-directory: ./frontend2
   lint:
     name: Linter (pre-commit)
     runs-on: ubuntu-latest

frontend2/.env.development

@@ -1,3 +1,3 @@
-REACT_APP_THIS_URL=http://localhost:3000
-REACT_APP_BACKEND_URL=http://localhost:8000
-REACT_APP_REPLAY_URL=https://play.battlecode.org
+VITE_THIS_URL=http://localhost:3000
+VITE_BACKEND_URL=http://localhost:8000
+VITE_REPLAY_URL=https://play.battlecode.org

frontend2/.env.production

@@ -1,4 +1,4 @@
-REACT_APP_THIS_URL=https://play.battlecode.org
-REACT_APP_BACKEND_URL=https://api.battlecode.org
-REACT_APP_REPLAY_URL=https://play.battlecode.org
+VITE_THIS_URL=https://play.battlecode.org
+VITE_BACKEND_URL=https://api.battlecode.org
+VITE_REPLAY_URL=https://play.battlecode.org
 GENERATE_SOURCEMAP=false

frontend2/eslint.config.js

@@ -0,0 +1,108 @@
+import eslintLoveConfig from "eslint-config-love";
+import eslintConfigPrettier from "eslint-config-prettier";
+import tseslint from "typescript-eslint";
+import react from "eslint-plugin-react";
+
+export default [
+  eslintLoveConfig,
+  react.configs.flat.recommended,
+  react.configs.flat["jsx-runtime"],
+  ...tseslint.configs.recommended,
+  ...tseslint.configs.recommendedTypeChecked,
+  eslintConfigPrettier,
+
+  {
+    languageOptions: {
+      parser: tseslint.parser,
+      parserOptions: {
+        ecmaFeatures: {
+          modules: true,
+        },
+        ecmaVersion: "latest",
+        project: "./tsconfig.json",
+        extraFileExtensions: [".md"],
+      },
+    },
+    plugins: {
+      "@typescript-eslint": tseslint.plugin,
+      react,
+    },
+  },
+  {
+    settings: {
+      react: {
+        createClass: "createReactClass", // Regex for Component Factory to use,
+        // default to "createReactClass"
+        pragma: "React", // Pragma to use, default to "React"
+        fragment: "Fragment", // Fragment to use (may be a property of <pragma>), default to "Fragment"
+        version: "detect", // React version. "detect" automatically picks the version you have installed.
+        // You can also use `16.0`, `16.3`, etc, if you want to override the detected value.
+        // It will default to "latest" and warn if missing, and to "detect" in the future
+        flowVersion: "0.53", // Flow version
+      },
+      propWrapperFunctions: [
+        // The names of any function used to wrap propTypes, e.g. `forbidExtraProps`. If this isn't set, any propTypes wrapped in a function will be skipped.
+        "forbidExtraProps",
+        { property: "freeze", object: "Object" },
+        { property: "myFavoriteWrapper" },
+        // for rules that check exact prop wrappers
+        { property: "forbidExtraProps", exact: true },
+      ],
+      componentWrapperFunctions: [
+        // The name of any function used to wrap components, e.g. Mobx `observer` function. If this isn't set, components wrapped by these functions will be skipped.
+        "observer", // `property`
+        { property: "styled" }, // `object` is optional
+        { property: "observer", object: "Mobx" },
+        { property: "observer", object: "<pragma>" }, // sets `object` to whatever value `settings.react.pragma` is set to
+      ],
+      formComponents: [
+        // Components used as alternatives to <form> for forms, eg. <Form endpoint={ url } />
+        "CustomForm",
+        { name: "Form", formAttribute: "endpoint" },
+      ],
+      linkComponents: [
+        // Components used as alternatives to <a> for linking, eg. <Link to={ url } />
+        "Hyperlink",
+        { name: "Link", linkAttribute: "to" },
+      ],
+    },
+  },
+  {
+    files: ["**/*.{ts,js,tsx,json}"],
+    rules: {
+      semi: ["error", "always"], // require semicolons ending statements
+      "@typescript-eslint/no-unused-vars": [
+        "warn",
+        {
+          varsIgnorePattern: "^_",
+          argsIgnorePattern: "^_",
+          caughtErrorsIgnorePattern: "^_",
+        },
+      ],
+      "@typescript-eslint/no-magic-numbers": [
+        "error",
+        { ignore: [0, 1, -1, 2] },
+      ],
+      "@typescript-eslint/prefer-literal-enum-member": "off",
+      "@typescript-eslint/prefer-destructuring": [
+        "error",
+        {
+          array: false,
+          object: true,
+        },
+      ],
+      "@typescript-eslint/non-nullable-type-assertion-style": "off",
+    },
+  },
+  {
+    ignores: [
+      "**/node_modules/**",
+      "**/*.json",
+      "**/src/api/_autogen/**",
+      "**/tailwind.config.js",
+      "**/vite.config.ts",
+      "**/tsconfig.json",
+      "**/vite-env.d.ts",
+    ],
+  },
+];

frontend2/public/index.html → frontend2/index.html

@@ -1,31 +1,20 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en" class="h-full bg-gray-100">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <meta name="description" content="Web site created using create-vite" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
+    <link rel="manifest" href="/manifest.json" />
     <title>Battlecode</title>
   </head>
+
   <body class="h-full">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
@@ -39,5 +28,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>