cloakingx@guard:~
man cloaking-x.integrations.reactIntegration Guide

React (Vite / CRA)

A React single-page app has one HTML shell — paste the snippet into that file, before your bundle even loads.

1. Open index.html — your project root (Vite)

Note
Vite is the current standard for new React apps, and its HTML shell lives at index.html in the project root. Still on the legacy Create React App? Use public/index.html instead — everything below is identical either way.

2. Paste as the very first lines inside <head>

html
<!-- index.html — Vite (project root) -->
<!-- Legacy Create React App? Use public/index.html instead — the code below is identical. -->
<!DOCTYPE html>
<html>
  <head>
    <!-- ✅ PASTE HERE — must be the very first lines inside <head> -->
    <style id="YOUR_PRE_HIDE_ID">html,body{visibility:hidden!important;background:#fff!important}</style>
    <script>setTimeout(function(){var e=document.getElementById('YOUR_PRE_HIDE_ID');if(e&&e.parentNode)e.parentNode.removeChild(e);},10000);</script>
    <script src="https://cloakingx.com/a/YOUR_ASSET_TOKEN.js" data-s="YOUR_STREAM_ID" onerror="var e=document.getElementById('YOUR_PRE_HIDE_ID');if(e&&e.parentNode)e.parentNode.removeChild(e);"></script>

    <meta charset="utf-8" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

YOUR_STREAM_ID, YOUR_ASSET_TOKEN, and YOUR_PRE_HIDE_ID are placeholders — get the real, pre-filled snippet from your dashboard's Integration page.

3. Rebuild and deploy

Note
Run npm run build then deploy. The style executes before React even mounts — no flash possible.