Migrate from CRA -> Vite

.github/workflows/ci.yml

@@ -35,11 +35,9 @@ jobs:
 
       - run: npm ci
 
-      - run: npx eslint src
+      - run: npm run lint
 
-      # TODO: This is not working due to ESM packaging issues. We can fix this
-      # again later probably after we migrate from CRA -> Vite.
-      # - run: npm test
+      - run: npm test
 
   functions:
     name: Cloud Functions

.github/workflows/deploy.yml

@@ -22,7 +22,7 @@ jobs:
         working-directory: functions
 
       - name: Set env
-        run: echo "REACT_APP_VERSION=${GITHUB_REF#refs/tags/v}" >> $GITHUB_ENV
+        run: echo "VITE_SWF_VERSION=${GITHUB_REF#refs/tags/v}" >> $GITHUB_ENV
 
       - run: npm run build
 

.gitignore

@@ -1,11 +1,9 @@
-build/
+node_modules/
+dist/
 .vscode/
 .DS_Store
 
-
-
-######### FIREBASE JUNK #########
-
+# Firebase emulator suite
 /data/
 
 # Logs
@@ -19,57 +17,8 @@ firebase-debug.log*
 # Firebase cache
 .firebase/
 
-# Firebase config
-
-# Uncomment this if you'd like others to create their own Firebase project.
-# For a team working on the same Firebase project(s), it is recommended to leave
-# it commented so all members can deploy to the same project(s) in .firebaserc.
-# .firebaserc
-
 # Runtime data
 pids
 *.pid
 *.seed
 *.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env

.prettierignore

@@ -1,5 +1,6 @@
-build/
+dist/
 
+# Firebase emulator suite
 /data/
 
 /functions/**/*.js

README.md

@@ -29,32 +29,50 @@ new release is created with version number `vA.B.C`.
 
 ## Contributing
 
-This game is in active development, and we welcome contributions from developers
-of all backgrounds. I would recommend talking to us on Discord (link above) or
-submitting an issue if you want to see a new feature added. If you would like to
-help by contributing code, that's great – we would be happy to set up a time to
-chat!
+This game is currently in maintenance mode, and we'll only accept bug fixes. I
+would recommend talking to us on Discord (link above) if you really want to see
+a new feature added. We also have monthly community meetings organized there.
 
 To build the site for development:
 
 - Install Node 20 and npm 10.
 - Run `npm install -g firebase-tools` to globally install the Firebase CLI.
 - Run `npm install` in the root folder to get dependencies.
 - Run `npm install` in the `functions` folder.
-- To start the project, run `npm run dev`. This runs a script, which is
+- To start the project, run `npm run develop`. This runs a script, which is
   responsible for doing several things concurrently:
   - Build the TypeScript cloud functions in watch mode.
   - Start the Firebase Local Emulator Suite.
-  - Start the frontend with React Fast Refresh enabled.
+  - Start the frontend dev server with Vite + React.
+
+The site can be opened at `http://localhost:5173`.
 
 You should also be able to access the Emulator UI at `http://localhost:4000`,
 which contains useful information and allows you to inspect/modify the database
 during development. Changes to client code in `src` should be immediately
 visible, as well as changes to code in `functions`.
 
-Please make all pull requests with new features or bugfixes to the `main`
-branch. We are formatting code using [Prettier](https://prettier.io/), so you
-should run `npm run format` on your code before making a pull request.
+Other useful commands:
+
+```bash
+npm run lint
+npm test
+
+# Bundle the application into static assets.
+npm run build
+npm run build:preview
+
+# Format the codebase with Prettier.
+npm run format
+
+# Run development server targeting setwithfriends-dev project.
+npm run dev -- --mode preview
+
+# Run development server targeting production data. This requires Eric to update
+# the "Browser key (auto created by Firebase)" website restrictions at
+# https://console.cloud.google.com/apis/credentials to allow traffic.
+npm run dev -- --mode production
+```
 
 ## Deployment
 

eslint.config.js

@@ -0,0 +1,41 @@
+import js from "@eslint/js";
+import react from "eslint-plugin-react";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import globals from "globals";
+
+export default [
+  { ignores: ["dist"] },
+  {
+    files: ["**/*.{js,jsx}"],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: "latest",
+        ecmaFeatures: { jsx: true },
+        sourceType: "module",
+      },
+    },
+    settings: { react: { version: "18.3" } },
+    plugins: {
+      react,
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      "no-unused-vars": ["warn", { caughtErrors: "none" }],
+      ...react.configs.recommended.rules,
+      ...react.configs["jsx-runtime"].rules,
+      ...reactHooks.configs.recommended.rules,
+      "react/jsx-no-target-blank": "off",
+      "react/no-unescaped-entities": "off",
+      "react/prop-types": "off",
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+    },
+  },
+];

firebase.json

@@ -3,7 +3,7 @@
     "rules": "database.rules.json"
   },
   "hosting": {
-    "public": "build",
+    "public": "dist",
     "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
     "rewrites": [
       {
@@ -13,10 +13,7 @@
     ]
   },
   "functions": {
-    "predeploy": [
-      "npm --prefix \"$RESOURCE_DIR\" run lint",
-      "npm --prefix \"$RESOURCE_DIR\" run build"
-    ],
+    "predeploy": ["npm --prefix \"$RESOURCE_DIR\" run build"],
     "source": "functions"
   },
   "emulators": {

functions/package.json

@@ -1,7 +1,6 @@
 {
   "name": "functions",
   "scripts": {
-    "lint": "true",
     "build": "tsc",
     "serve": "npm run build && firebase serve --only functions",
     "shell": "npm run build && firebase functions:shell",

functions/tsconfig.json

@@ -6,7 +6,7 @@
     "outDir": "lib",
     "sourceMap": true,
     "strict": true,
-    "target": "ES2020",
+    "target": "ES2022",
     "skipLibCheck": true
   },
   "compileOnSave": true,

public/index.html → index.html

@@ -31,7 +31,7 @@
     />
 
     <link rel="canonical" href="https://setwithfriends.com" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <link
       rel="stylesheet"
       href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
@@ -74,5 +74,7 @@
       </defs>
     </svg>
     <div id="root"></div>
+
+    <script type="module" src="/src/index.js"></script>
   </body>
 </html>