add an iframe to starter page so it looks more refined (#660)

harryhcs · justinvdm · commit 82dbc9ba68fe · 2025-08-26T10:00:09.000+02:00
Update Document component and security headers
- Added CSS module and module preload link to the Document component for iframe styling
- Updated Content Security Policy in headers to allow frame ancestors from 'self' and local dev
- Replaced static content in Home component with an iframe to load external start page.
diff --git a/README.md b/README.md
@@ -15,10 +15,12 @@
 <a href="https://discord.gg/redwoodjs"><img alt="Join the community on Discord" src="https://img.shields.io/badge/Join%20the%20community-blueviolet.svg?style=for-the-badge&logo=Discord&labelColor=000000&logoWidth=20"></a>
 <a href="https://github.com/redwoodjs/sdk/blob/main/LICENSE"><img alt="License" src="https://img.shields.io/github/license/redwoodjs/sdk?style=for-the-badge&labelColor=000000"></a>
 
+
 </div>
 
 ---
 
+
 ## ✨ RedwoodSDK
 
 **RedwoodSDK** is the missing React framework for Cloudflare — bringing SSR, React Server Components, Server Functions, and Realtime APIs to the edge with the power of [Vite](https://vitejs.dev/).
diff --git a/starters/minimal/src/app/Document.tsx b/starters/minimal/src/app/Document.tsx
@@ -1,3 +1,4 @@
+import stylesUrl from "./styles.css?url";
 export const Document: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => (
@@ -7,6 +8,7 @@ export const Document: React.FC<{ children: React.ReactNode }> = ({
       <meta name="viewport" content="width=device-width, initial-scale=1" />
       <title>@redwoodjs/starter-minimal</title>
       <link rel="modulepreload" href="/src/client.tsx" />
+      <link rel="stylesheet" href={stylesUrl} />
     </head>
     <body>
       <div id="root">{children}</div>
diff --git a/starters/minimal/src/app/headers.ts b/starters/minimal/src/app/headers.ts
@@ -26,6 +26,6 @@ export const setCommonHeaders =
     // Defines trusted sources for content loading and script execution:
     response.headers.set(
       "Content-Security-Policy",
-      `default-src 'self'; script-src 'self' 'nonce-${nonce}' https://challenges.cloudflare.com; style-src 'self' 'unsafe-inline'; frame-src https://challenges.cloudflare.com; object-src 'none';`,
+      `default-src 'self'; script-src 'self' 'nonce-${nonce}' https://challenges.cloudflare.com; style-src 'self' 'unsafe-inline'; frame-ancestors 'self'; frame-src 'self' https://challenges.cloudflare.com https://rwsdk.com; object-src 'none';`,
     );
   };
diff --git a/starters/minimal/src/app/pages/Home.tsx b/starters/minimal/src/app/pages/Home.tsx
@@ -2,8 +2,9 @@ import { RequestInfo } from "rwsdk/worker";
 
 export function Home({ ctx }: RequestInfo) {
   return (
-    <div>
-      <h1>Hello World</h1>
-    </div>
+    <iframe
+    style={{ width: "100%", height: "100%", border: "none" }}
+    src="https://rwsdk.com/start"
+  />
   );
 }
diff --git a/starters/minimal/src/app/styles.css b/starters/minimal/src/app/styles.css
@@ -0,0 +1,9 @@
+body {
+  min-height: 100vh;
+  padding: 0;
+}
+
+#root, #hydrate-root {
+  width: 100vw;
+  height: 100vh;
+}
