Remix

The Remix setup is largely the same as the React integration guide, except it goes further into how to add to the Remix framework's app root component.

Install

bash

npm install @qwik.dev/partytown
yarn add @qwik.dev/partytown
pnpm install @qwik.dev/partytown

Configure

The <Partytown/> component is imported from the @qwik.dev/partytown/react submodule. The config properties are JSX props.

The following is an example of including the <Partytown/> component in the app's root component. Notice the <Partytown/> component is in the <head> and before the <Meta/> component. The example below is setting the forward config for Google Tag Manager.

jsx

import { Partytown } from "@qwik.dev/partytown/react";
import { Links, Meta, Outlet } from "@remix-run/react";

export default function App() {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <Partytown debug={true} forward={["dataLayer.push"]} />
        <Meta />
        <Links />
      </head>
      <body>...</body>
    </html>
  );
}

Partytown Script

Add the type="text/partytown" prop for each script that should run from a web worker. The example below is using the React specific way of inlining a script with dangerouslySetInnerHTML.

jsx

<Partytown debug={true} forward={['dataLayer.push']} />
<script
  type="text/partytown"
  dangerouslySetInnerHTML={{
    __html: '// inlined third-party script',
  }}
/>

Copy Library Files

Copy library files to public/~partytown. How the files are copied or served from your site is up to each site's setup. A partytown copylib CLI copy task has been provided for convenience which helps copy the Partytown library files to the public directory. Below is an example of creating a "partytown" NPM script which could run before the build:

json

"scripts": {
  "build": "npm run partytown && cross-env NODE_ENV=production remix build",
  "partytown": "partytown copylib public/~partytown"
}