feat: add data hydration support with environment variable configuration

chrisreddington · web-flow · commit f65398713290 · 2025-05-08T18:01:55.000Z
diff --git a/.github/workflows/attest-and-deploy.yml b/.github/workflows/attest-and-deploy.yml
@@ -37,9 +37,11 @@ jobs:
           format: 'spdx-json'
           output-file: 'sbom.spdx.json'
 
-      # Build the site using the build script in package.json
-      - name: Build site
+      # Build the site using the build script in package.json with data hydration enabled
+      - name: Build site with data hydration
         run: npm run build
+        env:
+          VITE_ENABLE_DATA_HYDRATION: 'true'
 
       # Package the build into a tarball so it can be easily verified
       - name: Package the build
diff --git a/.github/workflows/ci-cd.yml b/.github/workflows/ci-cd.yml
@@ -29,8 +29,10 @@ jobs:
     - name: Install dependencies
       run: npm ci
     
-    - name: Build application
+    - name: Build application (without data hydration)
       run: npm run build
+      env:
+        VITE_ENABLE_DATA_HYDRATION: 'false'
     
     - name: Run tests
       run: npm test
diff --git a/README.md b/README.md
@@ -53,9 +53,25 @@ A task management application that allows users to create, organize, and filter
 ### Available Scripts
 
 - `npm start` - Start the development server
-- `npm test` - Run tests with Vitest
+- `npm start:hydrated` - Start the development server with data hydration enabled
 - `npm run build` - Build for production
+- `npm run build:hydrated` - Build for production with data hydration enabled
+- `npm run build:clean` - Build for production with data hydration explicitly disabled
 - `npm run preview` - Preview the production build locally
+- `npm run preview:hydrated` - Preview the production build with data hydration enabled
+- `npm test` - Run tests with Vitest
+
+### Data Hydration
+
+The application supports pre-populating the app with sample data through an optional hydration process:
+
+- Sample data is defined in `src/data/initialData.json`
+- Hydration can be enabled/disabled using the `VITE_ENABLE_DATA_HYDRATION` environment variable
+- Use the convenience scripts for development with hydration:
+  - `npm run start:hydrated` - Development with sample data
+  - `npm run build:hydrated` - Production build with sample data
+  - `npm run build:clean` - Production build without sample data
+- GitHub Actions deployment automatically enables hydration for the production build
 
 ## Architecture
 
diff --git a/package.json b/package.json
@@ -21,8 +21,12 @@
   },
   "scripts": {
     "start": "BROWSER=none WDS_SOCKET_PORT=0 vite --port 3000",
+    "start:hydrated": "VITE_ENABLE_DATA_HYDRATION=true BROWSER=none WDS_SOCKET_PORT=0 vite --port 3000",
     "build": "vite build",
+    "build:hydrated": "VITE_ENABLE_DATA_HYDRATION=true vite build",
+    "build:clean": "VITE_ENABLE_DATA_HYDRATION=false vite build",
     "preview": "vite preview",
+    "preview:hydrated": "VITE_ENABLE_DATA_HYDRATION=true vite preview",
     "test": "vitest",
     "build:css": "tailwindcss build src/index.css -o src/output.css",
     "watch:css": "tailwindcss -i src/index.css -o src/output.css --watch"
diff --git a/src/common/utils/DataHydrationService.js b/src/common/utils/DataHydrationService.js
@@ -34,8 +34,8 @@ export const DataHydrationService = {
    * @returns {boolean}
    */
   shouldHydrate: () => {
-    // You can add logic here to check if hydration should occur
-    // For example, checking if it's the first time the app is run
-    return true;
+    // Check if the VITE_ENABLE_DATA_HYDRATION environment variable is set to 'true'
+    // This allows controlling hydration via build configuration or environment
+    return import.meta.env.VITE_ENABLE_DATA_HYDRATION === 'true';
   }
 };
