From b454064fed88098fb54d427e2bbbd7ec2fe272ec Mon Sep 17 00:00:00 2001
From: Tyler Dixon <tylerdixon@google.com>
Date: Tue, 7 Jul 2026 15:24:41 -0700
Subject: [PATCH 1/5] fix: update example to install reactfire from npm instead
 of local tarball

Allows CodeSandbox and other cloud sandbox environments to import the
example directly from GitHub without failing on the missing local .tgz file.
---
 example/package.json | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/example/package.json b/example/package.json
index b0267b8f..0204f355 100644
--- a/example/package.json
+++ b/example/package.json
@@ -9,23 +9,23 @@
   },
   "dependencies": {
     "firebase": "^9.0.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
-    "reactfire": "file:../reactfire-4.0.1.tgz",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "reactfire": "latest",
     "rollup-plugin-visualizer": "^5.7.1"
   },
   "browserslist": [
     "last 1 Chrome version"
   ],
   "devDependencies": {
-    "@types/react": "^18.0.15",
-    "@types/react-dom": "^18.0.6",
-    "@vitejs/plugin-react": "^2.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@vitejs/plugin-react": "^4.0.0",
     "autoprefixer": "^10.4.8",
     "babel-preset-env": "^1.7.0",
     "postcss": "^8.4.14",
     "tailwindcss": "^3.1.7",
-    "typescript": "^4.7.4",
-    "vite": "^3.2.7"
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0"
   }
 }

From a64863c330cb5769d223214c651c4a39b0eb1997 Mon Sep 17 00:00:00 2001
From: Tyler Dixon <tylerdixon@google.com>
Date: Tue, 7 Jul 2026 15:27:33 -0700
Subject: [PATCH 2/5] fix: add CodeSandbox tasks config to auto-start Vite dev
 server

---
 example/.codesandbox/tasks.json | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 example/.codesandbox/tasks.json

diff --git a/example/.codesandbox/tasks.json b/example/.codesandbox/tasks.json
new file mode 100644
index 00000000..a77a2f92
--- /dev/null
+++ b/example/.codesandbox/tasks.json
@@ -0,0 +1,18 @@
+{
+  "setupTasks": [
+    {
+      "name": "Install dependencies",
+      "command": "npm install"
+    }
+  ],
+  "tasks": {
+    "dev": {
+      "name": "Start dev server",
+      "command": "npm start",
+      "runAtStart": true,
+      "preview": {
+        "port": 5173
+      }
+    }
+  }
+}

From 5ab4471d2ea059a2fe9891a6618d8274d53b4556 Mon Sep 17 00:00:00 2001
From: Tyler Dixon <tylerdixon@google.com>
Date: Tue, 7 Jul 2026 15:29:34 -0700
Subject: [PATCH 3/5] fix: allow all hosts in Vite dev server for CodeSandbox
 preview

---
 example/vite.config.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/example/vite.config.js b/example/vite.config.js
index 4ccac774..50ff2c77 100644
--- a/example/vite.config.js
+++ b/example/vite.config.js
@@ -10,4 +10,7 @@ export default defineConfig({
     // Helps make sure we aren't pulling in extra deps
     visualizer({ template: 'treemap' }),
   ],
+  server: {
+    allowedHosts: ['all'],
+  },
 });

From 2f51b44e714dece092501d7cd83e83c957de3490 Mon Sep 17 00:00:00 2001
From: Tyler Dixon <tylerdixon@google.com>
Date: Tue, 7 Jul 2026 15:37:18 -0700
Subject: [PATCH 4/5] fix: use allowedHosts: true for Vite 5 compatibility

---
 example/vite.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/example/vite.config.js b/example/vite.config.js
index 50ff2c77..da770990 100644
--- a/example/vite.config.js
+++ b/example/vite.config.js
@@ -11,6 +11,6 @@ export default defineConfig({
     visualizer({ template: 'treemap' }),
   ],
   server: {
-    allowedHosts: ['all'],
+    allowedHosts: true,
   },
 });

From d8dbd04ec4ce00d728834babfb112326f0fdae66 Mon Sep 17 00:00:00 2001
From: Tyler Dixon <tylerdixon@google.com>
Date: Tue, 7 Jul 2026 15:40:30 -0700
Subject: [PATCH 5/5] docs: update live demo link from StackBlitz to
 CodeSandbox

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 92e98e56..304792dd 100644
--- a/README.md
+++ b/README.md
@@ -35,7 +35,7 @@ Depending on your targeted platforms you may need to install polyfills. The most
 ## Example use
 
 Check out the
-[live version on StackBlitz](https://stackblitz.com/fork/reactfire-v4-sample)!
+[live version on CodeSandbox](https://codesandbox.io/s/github/FirebaseExtended/reactfire/tree/main/example)!
 
 ```jsx
 import React from 'react';