rootComponent feature, which acts as a wrapper for your entire application:rootComponent// main.wasp
app MyApp {
title: "My app",
// ...
client: {
rootComponent: import Root from "@src/Root.jsx",
}
}// src/Root.jsx
export default function Root({ children }) {
return (
<div>
<header>
<h1>My App</h1>
</header>
{children}
<footer>
<p>My App footer</p>
</footer>
</div>
)
}// src/Layout.jsx
export function Layout({ children }) {
return (
<div className="w-full h-full bg-white">
<div className="min-w-full min-h-[75vh] flex items-center justify-center">
<div className="w-full h-full max-w-sm p-5 bg-white">
<div>{children}</div>
</div>
</div>
</div>
);
}import { Layout } from './Layout'
export function MyPage() {
return (
<Layout>
<div>My page content</div>
</Layout>
);
}