+
+## Flagsmith with Remix
+
+- 📖 [Flagsmith docs](https://docs.flagsmith.com)
+- 📖 [Remix docs](https://remix.run/docs)
+
+## Prerequsities
+
+- Rename `.env.test` file to `.env`
+- Update `FLAGSMITH_ENVIRONMENT_ID` variable with your environment ID
+- Check the `routes/_index.tsx` file to see the usage
+
+**Note:** The example is using `test_feature` feature flag with a value. If you want to test the repository as it is, then please make sure that you have created a feature flag with the same name through your Flagsmith Dashboard for the environment you are testing for.
+
+## Development
+
+Run the dev server:
+
+```shellscript
+npm run dev
+```
+
+## Deployment
+
+First, build your app for production:
+
+```sh
+npm run build
+```
+
+Then run the app in production mode:
+
+```sh
+npm start
+```
+
+
diff --git a/remix/app/entry.client.tsx b/remix/app/entry.client.tsx
new file mode 100644
index 0000000..94d5dc0
--- /dev/null
+++ b/remix/app/entry.client.tsx
@@ -0,0 +1,18 @@
+/**
+ * By default, Remix will handle hydrating your app on the client for you.
+ * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
+ * For more information, see https://remix.run/file-conventions/entry.client
+ */
+
+import { RemixBrowser } from "@remix-run/react";
+import { startTransition, StrictMode } from "react";
+import { hydrateRoot } from "react-dom/client";
+
+startTransition(() => {
+ hydrateRoot(
+ document,
+
+
+ );
+}
+
+const resources = [
+ {
+ href: "https://remix.run/start/quickstart",
+ text: "Quick Start (5 min)",
+ icon: (
+
+ ),
+ },
+ {
+ href: "https://remix.run/start/tutorial",
+ text: "Tutorial (30 min)",
+ icon: (
+
+ ),
+ },
+ {
+ href: "https://remix.run/docs",
+ text: "Remix Docs",
+ icon: (
+
+ ),
+ },
+ {
+ href: "https://rmx.as/discord",
+ text: "Join Discord",
+ icon: (
+
+ ),
+ },
+];
diff --git a/remix/app/tailwind.css b/remix/app/tailwind.css
new file mode 100644
index 0000000..303fe15
--- /dev/null
+++ b/remix/app/tailwind.css
@@ -0,0 +1,12 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html,
+body {
+ @apply bg-white dark:bg-gray-950;
+
+ @media (prefers-color-scheme: dark) {
+ color-scheme: dark;
+ }
+}
diff --git a/remix/app/utils/flagsmith.server.ts b/remix/app/utils/flagsmith.server.ts
new file mode 100644
index 0000000..07e58bf
--- /dev/null
+++ b/remix/app/utils/flagsmith.server.ts
@@ -0,0 +1,42 @@
+import { Flagsmith } from "flagsmith-nodejs";
+
+// Initialize Flagsmith client for server-side usage
+export const flagsmithClient = new Flagsmith({
+ environmentKey: process.env.FLAGSMITH_ENVIRONMENT_ID || "",
+});
+
+/**
+ * Utility function to get the state of a feature flag.
+ * @param {string} flagName - The name of the feature flag.
+ * @returns {Promise
+
+
+ {testFeature?.status && (
+
+
+ )}
+
+
+ + Welcome to Remix +
+
+ 
+ 
+
+
+
+ {testFeature?.value}
+