@enhance-eng/sandbox
v0.7.1
Published
Enhance preview bootstrap and tooling package.
Keywords
Readme
@enhance-eng/sandbox
Enhance sandbox library for adding preview functionality to your application.
Supported frameworks: React SPAs, Next.js (App Router), and statically generated sites.
Installation
npm install @enhance-eng/sandboxNext.js (App Router)
Generate the service worker file, then add the EnhanceScripts component to your root layout.
Step 1: Generate the service worker:
npx enhance-sandbox init --publishable-key pk_your_keyThis writes public/enhance-sw.js. Commit the file to your repository.
Step 2: Add the component to your root layout:
// app/layout.tsx
import { EnhanceScripts } from "@enhance-eng/sandbox/next";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
<EnhanceScripts />
</head>
<body>{children}</body>
</html>
);
}The EnhanceScripts component registers the service worker, bootstraps the overlay, and renders scripts natively so React hydrates without mismatch errors.
Vite
Add the plugin to your Vite config:
// vite.config.ts
import { defineConfig } from "vite";
import { enhance } from "@enhance-eng/sandbox/vite";
export default defineConfig({
plugins: [
enhance({
publishableKey: "pk_your_key",
}),
],
});The plugin generates the service worker, serves it in dev, emits it as a build asset, and injects the registration script automatically.
Other Build Tools
For non-Vite, non-Next.js setups, generate the service worker with the CLI, then register it in your app.
Step 1: Generate the service worker:
npx enhance-sandbox init --publishable-key pk_your_keyStep 2: Register it in your application entry point:
import { enhance } from "@enhance-eng/sandbox";
enhance();Existing Service Worker
If your app already uses a service worker (e.g. for offline support or caching), pass its URL with the serviceWorker option so Enhance registers only during playground sessions and falls back to your service worker for normal visitors.
Vite:
enhance({ publishableKey: "pk_your_key", serviceWorker: "/sw.js" });Next.js:
<EnhanceScripts serviceWorker="/sw.js" />Other:
enhance({ serviceWorker: "/sw.js" });