01
Install the packages
pnpm add @pact/react @pact/web @pact/runtime02
Install the bootstrap
This is the enforcement boundary. Keep it server-rendered and before optional code.
typescript
import { renderPactBootstrap } from '@pact/web'
const pactBootstrap = renderPactBootstrap({
siteKey: 'site_live_your_key',
src: '/pact.js',
apiBase: '/v1',
})
// Render pactBootstrap as trusted HTML at the start of <head>.
// It must appear before analytics, advertising, or other optional code.03
Wire React Router / Remix
tsx
import { Links, Meta, Outlet, Scripts } from 'react-router'
import { PACT_BOOTSTRAP } from '@pact/web'
import { PactProvider } from '@pact/react'
export default function Root() {
return <html lang="en">
<head>
<Meta /><Links />
<script id="pact-bootstrap" data-tenant="site_live_your_key"
data-src="/pact.js" data-api="/v1"
dangerouslySetInnerHTML={{ __html: PACT_BOOTSTRAP }} />
</head>
<body><PactProvider><Outlet /></PactProvider><Scripts /></body>
</html>
}