Feature Flags for your Remix applications
npm install --save @happykit/remix
- Create a free account on happykit.dev
- Create a project
- In your project, go to Keys
- Copy the Development Environment Key
- Create a file called
.envand paste your key there
It should look like this:
HAPPYKIT_FLAGS_ENV_KEY=flags_pub_356397495635411543You can now load your feature flags in your routes:
import { useLoaderData } from "@remix-run/react";
import { getFlags } from "@happykit/remix";
// You can fully type your flags
type AppFlags = {
textColor: string
}
export async function loader() {
// this is how you load flags from happykit
const flagBag = await getFlags<AppFlags>();
// pass them to your application however you like
return { flags: flagBag.flags };
}
export default function Index() {
// you can access your flags on loaderData
const loaderData = useLoaderData<typeof loader>();
return (
<div>
<p style={{ color: loaderData.flags.textColor }}>
You are seeing {loaderData.flags.textColor}
</p>
</div>
);
}See apps/example for an example application.
Check out the pages in apps/example/app like
with-traitswhich shows how to target users by traitswith-userwhich shows how to target individual userswith-visitor-keywhich shows how to target anonymous userswith-everythingwhich shows how to combine it all together
Check out the full documentation on @happykit/remix.
Even though this package is currently extremely simple, it is a great starting point for your feature flags.
Feel free to open an issue in case you have additional feature requests.