BREAKING CHANGE: Switch to vite with electron-forge

.eslintrc.js → .eslintrc.cjs

@@ -10,6 +10,7 @@ module.exports = {
     "eslint:recommended",
     "plugin:react/recommended",
     "plugin:import/recommended",
+    "plugin:import/electron",
     "prettier",
   ],
   parserOptions: {
@@ -22,14 +23,8 @@ module.exports = {
     "import/order": "warn",
   },
   settings: {
-    react: {
-      version: "detect",
-    },
-    "import/resolver": {
-      node: {
-        extensions: [".js", ".jsx"],
-      },
-    },
+    react: { version: "detect" },
+    "import/resolver": { node: { extensions: [".js", ".jsx"] } },
   },
   overrides: [{ files: ["*.jsx", "*.js"] }],
 };

.github/workflows/firebase-hosting-merge.yml

@@ -2,7 +2,7 @@
 # https://github.com/firebase/firebase-tools
 
 name: Deploy to Firebase Hosting on merge
-"on":
+on:
   push:
     branches:
       - main
@@ -11,10 +11,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - run: npm ci && npm run build:firebase
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
-          repoToken: "${{ secrets.GITHUB_TOKEN }}"
-          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_CCV_HONEYCOMB }}"
+          repoToken: ${{ secrets.GITHUB_TOKEN }}
+          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_CCV_HONEYCOMB }}
           channelId: live
           projectId: ccv-honeycomb

.github/workflows/firebase-hosting-pull-request.yml

@@ -2,20 +2,19 @@
 # https://github.com/firebase/firebase-tools
 
 name: Deploy to Firebase Hosting on PR
-"on": pull_request
+on: pull_request
 permissions:
   checks: write
   contents: read
   pull-requests: write
 jobs:
   build_and_preview:
-    if: "${{ github.event.pull_request.head.repo.full_name == github.repository }}"
+    if: ${{ github.event.pull_request.head.repo.full_name == github.repository }}
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - run: npm ci && npm run build:firebase
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
-          repoToken: "${{ secrets.GITHUB_TOKEN }}"
-          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_CCV_HONEYCOMB }}"
+          repoToken: ${{ secrets.GITHUB_TOKEN }}
+          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_CCV_HONEYCOMB }}
           projectId: ccv-honeycomb

.github/workflows/pull_request.yml

@@ -22,7 +22,7 @@ jobs:
       - name: ⬇️ Checkout repo
         uses: actions/checkout@v4
       - name: ⎔ Setup node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version-file: .nvmrc
           cache: npm

.github/workflows/release.yml

@@ -30,7 +30,7 @@ jobs:
       - name: ⬇️ Checkout repo
         uses: actions/checkout@v4
       - name: ⎔ Setup node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version-file: .nvmrc
           cache: npm
@@ -52,16 +52,16 @@ jobs:
           path: ./env
           mode: ${{matrix.setting}}
 
-      # Package the app installers
-      - name: 📦 Package app installer - Windows
+      # Package the app and make the installers
+      - name: 📦 Make app installer - Windows
         if: startsWith(matrix.os, 'windows')
-        run: npm run package:windows
-      - name: 📦 Package app installer - Mac
+        run: npm run make:windows
+      - name: 📦 Make app installer - Mac
         if: startsWith(matrix.os, 'mac')
-        run: npm run package:mac
-      - name: 📦 Package app installer - Linux
+        run: npm run make:mac
+      - name: 📦 Make app installer - Linux
         if: startsWith(matrix.os, 'ubuntu')
-        run: npm run package:linux
+        run: npm run make:linux
 
       # Get package info
       - name: Get package name and version
@@ -72,6 +72,7 @@ jobs:
         shell: bash
 
       # Upload installers to GitHub release
+      # TODO @brown-ccv #247: Use the Publish command: https://www.electronforge.io/cli#publish
       - name: ⬆ Upload installer to release - Windows
         if: startsWith(matrix.os, 'windows')
         uses: svenstaro/upload-release-action@v2
@@ -96,35 +97,3 @@ jobs:
           asset_name: ${{ steps.package_info.outputs.name }}-${{ steps.package_info.outputs.version }}-${{ matrix.setting }}-amd64.deb
           tag: ${{ github.ref }}
           repo_token: ${{ secrets.GITHUB_TOKEN }}
-
-  deploy-gh-pages:
-    name: Deploy to GH Pages
-    runs-on: ubuntu-latest
-    steps:
-      # Set up runner
-      - name: ⬇️ Checkout repo
-        uses: actions/checkout@v4
-      - name: ⎔ Setup node
-        uses: actions/setup-node@v3
-        with:
-          node-version-file: .nvmrc
-          cache: npm
-      - name: 🐍 Setup Python
-        uses: actions/setup-python@v4
-        with:
-          python-version: "3.10"
-
-      # Install dependencies
-      - name: 📥 Install Dependencies
-        run: npm ci
-
-      # Build the app
-      - name: ⚒ Build
-        run: npm run build
-
-      # Deploy the app to GitHub Pages
-      - name: 🚀 Deploy to GH Pages
-        uses: peaceiris/actions-gh-pages@v3
-        with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./build

.github/workflows/workflow-package.yml

@@ -44,7 +44,7 @@ jobs:
         uses: actions/checkout@v4
 
       - name: ⎔ Setup node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version-file: .nvmrc
           cache: npm
@@ -66,16 +66,16 @@ jobs:
           path: ./env
           mode: ${{github.event.inputs.setting}}
 
-      # Package the app installers
-      - name: 📦 Package app installer - Windows
+      # Package the app and make the installers
+      - name: 📦 Make app installer - Windows
         if: startsWith(matrix.os, 'windows')
-        run: npm run package:windows
-      - name: 📦 Package app installer - Mac
+        run: npm run make:windows
+      - name: 📦 Make app installer - Mac
         if: startsWith(matrix.os, 'mac')
-        run: npm run package:mac
-      - name: 📦 Package app installer - Linux
+        run: npm run make:mac
+      - name: 📦 Make app installer - Linux
         if: startsWith(matrix.os, 'ubuntu')
-        run: npm run package:linux
+        run: npm run make:linux
 
       # Get package info
       - name: Get package name and version
@@ -86,6 +86,7 @@ jobs:
         shell: bash
 
       # Upload installers to github action
+      # TODO @brown-ccv #247: Can we use the publish command here?
       - name: ⬆ Upload installer - Windows
         uses: actions/upload-artifact@v3
         if: startsWith(matrix.os, 'windows')

.gitignore

@@ -2,15 +2,19 @@
 
 # Dependencies
 /node_modules
-Brewfile.lock.json
 /.pnp
 .pnp.js
 .vite
 
+# Cache
+.npm
+.eslintcache
+
 # Testing
 /coverage
 
 # Production
+.vite
 /build
 /dist
 /out
@@ -19,6 +23,7 @@ Brewfile.lock.json
 /.vscode
 
 # Logs
+logs
 *.log
 *.log*
 
@@ -27,10 +32,10 @@ public/config/version.json
 public/version.json
 Brewfile.lock.json
 
-# Firebase private key
+# Secrets
 **/firebase-service-account.json
 
-# Live data
+# Data
 **/participant_responses
 
 # Misc

.prettierrc.js

@@ -2,7 +2,7 @@
  * This file defines specific rules for Prettier. It adjusts their default settings.
  * We recommend these settings if your lab does not have specific style standards.
  */
-module.exports = {
+export default {
   printWidth: 100, // Sets the maximum line size to 100 (default is 80)
   quoteProps: "as-needed", // Add quotes around props as needed
   trailingComma: "es5", // Add a trailing comma to all es5 modules

env/.env.clinic

@@ -1,3 +1,3 @@
-REACT_APP_USE_EEG="true"
-REACT_APP_USE_PHOTODIODE="true"
-REACT_APP_VOLUME="true"
+VITE_USE_EEG="true"
+VITE_USE_PHOTODIODE="true"
+VITE_VOLUME="true"

env/.env.firebase

@@ -1,7 +1,7 @@
-REACT_APP_FIREBASE="true"
-REACT_APP_API_KEY="AIzaSyB6C2nVXk__dqxdyyROFEC-ue50O_OsjTE"
-REACT_APP_AUTH_DOMAIN="ccv-honeycomb.firebaseapp.com"
-REACT_APP_PROJECT_ID="ccv-honeycomb"
-REACT_APP_STORAGE_BUCKET="ccv-honeycomb.appspot.com"
-REACT_APP_MESSAGING_SENDER_ID="449496296276"
-REACT_APP_APP_ID="1:449496296276:web:0479c82b8b068ca9e6b6c1"
+VITE_FIREBASE="true"
+VITE_API_KEY="AIzaSyB6C2nVXk__dqxdyyROFEC-ue50O_OsjTE"
+VITE_AUTH_DOMAIN="ccv-honeycomb.firebaseapp.com"
+VITE_PROJECT_ID="ccv-honeycomb"
+VITE_STORAGE_BUCKET="ccv-honeycomb.appspot.com"
+VITE_MESSAGING_SENDER_ID="449496296276"
+VITE_APP_ID="1:449496296276:web:0479c82b8b068ca9e6b6c1"

env/.env.video

@@ -1 +1 @@
-REACT_APP_VIDEO="true"
+VITE_VIDEO="true"

firebase.json

@@ -4,14 +4,15 @@
     "indexes": "firestore.indexes.json"
   },
   "hosting": {
-    "public": "build",
-    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
+    "public": "dist",
     "rewrites": [
       {
         "source": "**",
         "destination": "/index.html"
       }
-    ]
+    ],
+    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
+    "predeploy": ["npm ci", "npm run build:firebase"]
   },
   "emulators": {
     "firestore": {

forge.config.js

@@ -1,15 +1,27 @@
-/**
- * Configuration file for Electron Forge
- */
-module.exports = {
+import { FuseV1Options, FuseVersion } from "@electron/fuses";
+
+/** Configuration file for Electron Forge */
+export default {
   packagerConfig: {
     asar: true,
     icon: "assets/icons/icon",
   },
   makers: [
     {
-      // zip files
-      name: "@electron-forge/maker-zip",
+      // Windows Distribution
+      name: "@electron-forge/maker-squirrel",
+      config: {
+        iconUrl: "https://raw.githubusercontent.com/brown-ccv/honeycomb/main/assets/icons/icon.ico",
+        setupIcon: "assets/icons/icon.ico",
+      },
+    },
+    {
+      // Mac Distribution
+      name: "@electron-forge/maker-dmg",
+      config: {
+        icon: "assets/icons/icon.icns",
+        overwrite: true,
+      },
     },
     {
       // Linux Distribution
@@ -21,21 +33,37 @@ module.exports = {
       },
     },
     {
-      // Mac Distribution
-      name: "@electron-forge/maker-dmg",
+      // zip files
+      name: "@electron-forge/maker-zip",
+    },
+  ],
+  plugins: [
+    { name: "@electron-forge/plugin-auto-unpack-natives", config: {} },
+    {
+      name: "@electron-forge/plugin-vite",
       config: {
-        icon: "assets/icons/icon.icns",
-        overwrite: true,
+        build: [
+          // Build files that use the main config
+          { entry: "src/electron/main.js", config: "vite.main.config.js" },
+          // Build files that use the preload config
+          { entry: "src/Electron/preload.js", config: "vite.preload.config.js" },
+        ],
+        renderer: [{ name: "main_window", config: "vite.renderer.config.js" }],
       },
     },
     {
-      // Windows Distribution
-      name: "@electron-forge/maker-squirrel",
+      name: "@electron-forge/plugin-fuses",
       config: {
-        iconUrl: "https://raw.githubusercontent.com/brown-ccv/honeycomb/main/assets/icons/icon.ico",
-        setupIcon: "assets/icons/icon.ico",
+        version: FuseVersion.V1,
+        [FuseV1Options.RunAsNode]: false, // Disables ELECTRON_RUN_AS_NODE
+        [FuseV1Options.GrantFileProtocolExtraPrivileges]: true, // Grants the file protocol extra privileges (for the built application)
+        [FuseV1Options.EnableCookieEncryption]: false, // Disables cookie encryption
+        [FuseV1Options.EnableNodeOptionsEnvironmentVariable]: false, // Disables the NODE_OPTIONS environment variable
+        [FuseV1Options.EnableNodeCliInspectArguments]: false, // Disables the --inspect and --inspect-brk family of CLI options
+        [FuseV1Options.EnableEmbeddedAsarIntegrityValidation]: true, // Enforces validation of the app.asar archive on macOS
+        [FuseV1Options.OnlyLoadAppFromAsar]: true, // Enforces that Electron will only load your app from "app.asar" instead of its normal search paths
+        [FuseV1Options.LoadBrowserProcessSpecificV8Snapshot]: true, // Loads V8 Snapshot from `browser_v8_context_snapshot.bin` for the browser process
       },
     },
   ],
-  plugins: [{ name: "@electron-forge/plugin-auto-unpack-natives", config: {} }],
 };