Remix quickstart

1. Install `hypertune`

Once you have a Remix application ready, install Hypertune's JavaScript SDK:

npm install hypertune

yarn add hypertune

pnpm add hypertune

2. Set environment variables

Define the following environment variables in your .env file:

.env

HYPERTUNE_TOKEN=token
HYPERTUNE_FRAMEWORK=remix
HYPERTUNE_OUTPUT_DIRECTORY_PATH=app/generated

Replace token with your main project token which you can find in the Settings tab of your project.

3. Generate the client

Generate a type-safe client to access your flags by running:

npx hypertune

yarn hypertune

pnpm hypertune

4. Use the client

Add a new file called getHypertune.server.ts that exports a getHypertune function:

app/lib/getHypertune.server.ts

import { createSource } from '~/generated/hypertune'

const hypertuneSource = createSource({
  token: process.env.HYPERTUNE_TOKEN!,
})

export default async function getHypertune() {
  await hypertuneSource.initIfNeeded() // Check for flag updates

  return hypertuneSource.root({
    args: {
      context: {
        environment: process.env.NODE_ENV,
        user: {
          id: 'e23cc9a8-0287-40aa-8500-6802df91e56a',
          name: 'Example User',
          email: '[email protected]',
        },
      },
    },
  })
}

To access flags in loader during server-side rendering, use the getHypertune function:

app/routes/ssr.tsx

import { json } from '@remix-run/node'
import { useLoaderData } from '@remix-run/react'
import getHypertune from '~/lib/getHypertune.server'

export async function loader() {
  const hypertune = await getHypertune()

  const exampleFlag = hypertune.exampleFlag({ fallback: false })

  return json({ exampleFlag })
}

export default function Page() {
  const { exampleFlag } = useLoaderData<typeof loader>()

  return <div>Example Flag: {exampleFlag}</div>
}

To access flags in the browser during client-side rendering, first wrap your root layout with the generated <HypertuneProvider> component in app/root.tsx:

app/root.tsx

import { json } from '@remix-run/node'
import {
  useLoaderData,
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from '@remix-run/react'
import { DehydratedState } from './generated/hypertune'
import { HypertuneProvider } from '~/generated/hypertune.react'
import getHypertune from '~/lib/getHypertune.server'

export async function loader() {
  const hypertune = await getHypertune()

  const token = process.env.HYPERTUNE_TOKEN!
  const dehydratedState = hypertune.dehydrate()
  const rootArgs = hypertune.getRootArgs()

  return json({ token, dehydratedState, rootArgs })
}

export default function App() {
  const { token, dehydratedState, rootArgs } =
    useLoaderData<typeof loader>()

  return (
    <HypertuneProvider
      createSourceOptions={{ token }}
      dehydratedState={dehydratedState as DehydratedState}
      rootArgs={rootArgs}
    >
      <html lang="en">
        <head>
          <Meta />
          <Links />
        </head>
        <body>
          <Outlet />
          <ScrollRestoration />
          <Scripts />
        </body>
      </html>
    </HypertuneProvider>
  )
}

Then use the generated useHypertune hook:

app/components/ClientComponent.tsx

import { useHypertune } from '~/generated/hypertune.react'

export default function ClientComponent() {
  const hypertune = useHypertune()

  const exampleFlag = hypertune.exampleFlag({ fallback: false })

  return <div>Example Flag: {String(exampleFlag)}</div>
}

Notes

Hydration: Passing dehydratedState from the server instantly hydrates the SDK in the browser. This ensures you can use flags on the first render with no layout shift, flicker, or delay. If omitted, the SDK will initialize in the background and trigger a re-render once ready.
Root Args: Passing rootArgs from the server lets you reuse the root args from getHypertune on the server. This is optional — you can also construct root args on the client.
Content Security Policy: If you use a CSP, add the following to your connect-src directive: https://edge.hypertune.com https://gcp.fasthorse.workers.dev. This enables reporting of flag evaluations, experiment exposures, and analytics events.

The Hypertune Toolbar lets you view and override feature flags directly in your frontend. Follow the guide to add it to your app.

6. (Optional) Include a build-time snapshot

To improve reliability, you can include a snapshot of your flag logic in the generated client at build time. The SDK will instantly initialize from the snapshot first before fetching the latest flag logic from Hypertune Edge.

Add the following environment variable to your .env file:

HYPERTUNE_INCLUDE_INIT_DATA=true

Then regenerate the client.

You can keep the snapshot fresh by setting up a webhook to regenerate the client on every Hypertune commit. In this case, you don't need to initialize from Hypertune Edge at all, eliminating network latency and bandwidth, improving both performance and efficiency.

Next steps

Now you can update the logic for exampleFlag from the Hypertune UI without updating your code or waiting for a new build, deployment, or app release.

To add a new flag, create it in the Hypertune UI then regenerate the client.

PreviousVue quickstart NextGatsby quickstart

Last updated 11 days ago

1. Install hypertune