{"plugin":{"id":2,"name":"apply-react","icon":"🛠️","description":"React 18/19 - Client hydration of a static HTML page","longDescription":"### Adding React Client-Side Hydration and Interactivity\n\n* **React Hydration**: Adds client-side hydration and interactivity to static HTML files, enabling dynamic single-page applications with **Static Site Generation (SSG)**.\n* **CDN Ready**: Optimized for Content Delivery Networks (CDNs) to ensure fast and reliable content delivery.\n\n### Key Features\n\n* **File-Based Routing**: Automatic route generation from file structure, making it easy to manage and scale your application.\n* **Hot Module Replacement (HMR)**: Enables fast and efficient development with automatic module replacement.\n* **Client-Side Navigation**: Seamless Single-Page Application (SPA) routing without full page reloads, providing a smooth user experience.\n\n* **Layout**: Layout stacking supported by the built-in RouterHost\n\n### Note\nYou should concider using it with **react-to-html** the developpement is based on that plugin.\n\nFor now the plugin only support hydration. if you use a HTML empty shell it will throw errors.\n**future release feature**","version":"0.2.1","compatibleVersions":"^3.0.0","author":"Justin Halle","ownerId":"c166cdde-5f5c-40e5-a3ff-236652fa88a9","category":"frontend","tags":["react","frontend","cdn"],"published":true,"npmPackage":"frame-master-plugin-apply-react","githubUrl":"https://github.com/shpaw415/frame-master-plugin-apply-react","docsUrl":"https://github.com/shpaw415/frame-master-plugin-apply-react","installation":"bun add frame-master-plugin-apply-react","quickStart":"// src/index.html\n// HTML entrypoint. make sure it is set as entrypoint in the build options\n// skip if you use a plugin making it for you like `react-to-html`\n\n \n \n\n\n// src/client-wrapper.tsx\n// integrated Router Host or use your own\nimport { RouterHost } from \"frame-master-plugin-apply-react/router\";\n\n// it will run client side \n// add your global providers here\nexport default function ClientWrapper({ children }: { children: JSX.Element }) {\n return {children};\n}\n\n// src/pages/index.tsx\n// use hook as you always do.\nexport default function HomePage() {\n const [count, setCount] = useState(0);\n return (\n \n My page count: {count} \n \n \n );\n}\n\n// src/pages/layout.tsx\n// layout will be applied to current route and subroutes\nexport default function MainLayout({children}{children: JSX.Element}) {\n return <>{children};\n}\n","configuration":"// frame-master.config.ts\nimport type { FrameMasterConfig } from \"frame-master/server/types\";\nimport ReactToHtml from \"frame-master-plugin-react-to-html\";\nimport ApplyReact from \"frame-master-plugin-apply-react/plugin\";\n\nconst config: FrameMasterConfig = {\n HTTPServer: { port: 3000 },\n plugins: [\n ApplyReact({\n clientShellPath: \"src/client-wrapper.tsx\",\n style: \"nextjs\",\n route: \"src/pages\",\n })\n ],\n};\n\nexport default config;","upvote":0,"downvote":0,"createdAt":"2025-11-29T01:10:02.000Z","updatedAt":"2025-12-11T20:32:43.000Z","dependencies":[]}}