Bootstrapping feature flags makes them available as soon as React and PostHog load on the client side. This enables use cases like routing to different pages on load, all feature flagged content being available on first load, and visual consistency.
To show you how you can bootstrap feature flags, we are going to build a React app with Vite, add PostHog, set up an Express server to server-side render our app, and finally bootstrap our flags from the server to the client.
Make sure you have Node installed, then create a new React app with Vite:
Terminal
npm create vite@latest client -- --template react
Once created, go into the new client folder and install the packages as well as posthog-js and its React wrapper:
Terminal
cd client
npminstall
npm i posthog-js
Next, get your PostHog project API key and instance address from the getting started flow or your project settings and set up environment variables to store them. You can do this by creating a .env.local file in your project root:
Terminal
# .env.local
VITE_PUBLIC_POSTHOG_KEY=<ph_project_api_key>
VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
Next, create your entry point for client-side rendering in src/entry-client.jsx:
If you want, you can run npm run dev to see the app in action.
Create and setup a feature flag
If we want to bootstrap a feature flag, we first need to create it in PostHog. To do this, go to the feature flag tab, create a new flag, set a key (I chose test-flag), set the rollout to 100% of users, and save it.
Once done, you can evaluate your flag in the loaded() method on initialization like this:
This shows us bootstrapping is valuable. On the first load of the site (before the flag is set in cookies), you see undefined in the console even though the flag should return true. This is because the flag isn't loaded yet when you check it, and the flag might not show the right code on the initial load for that user.
Bootstrapping flags solves this.
Set up the React app for server-side rendering
To bootstrap our flags, we fetch the feature flag data on the backend and pass it to the frontend before it loads. This requires server-side rendering our React app.
To do this with Vite, we need:
A server entry point for rendering React on the server
A client entry point for hydrating the app in the browser
An Express server to get feature flags from PostHog and serve the React app
We'll start with the server entry point by creating src/entry-server.jsx:
JSX
// src/entry-server.jsx
importReactfrom'react'
import{ renderToString }from'react-dom/server'
importAppfrom'./App'
exportfunctionrender(){
const html =renderToString(
<React.StrictMode>
<App/>
</React.StrictMode>
)
return html
}
Next, modify your client entry point to support hydration in src/entry-client.jsx:
// If an error is caught, let Vite fix the stack trace for better debugging
vite.ssrFixStacktrace(e);
console.error(e);
next(e);
}
});
app.listen(3000,()=>{
console.log('Server started at http://localhost:3000');
});
}
createServer();
Once you got this all set up, you need a PostHog personal API key. To get one, go to your user settings, click Personal API keys, then Create personal API key, select All access, and then select the Local feature flag evaluation preset.
Your React app will now be server-side rendered with the feature flags data injected into the HTML.
Bootstrapping the feature flags on the client
The last thing we need to do is bootstrap the feature flags on the client. To do this, we'll update our client entry point to use the bootstrapped data:
nodemon --watch server --watch src/entry-server.jsx server/index.js
When you visit http://localhost:3000, you should see that feature flags are loaded immediately on the first page load. Open up the site on an incognito or guest window, and you'll see that the flag returns true on the first load without any delay.
This is feature flag bootstrapping working successfully. From here, you can make the flag redirect to specific pages, control session recordings, or run an A/B test on your home page call to action.