In the documentation for Remix it seems like there are layout files we can use for specific routes.
But I am trying to make a global layout, where I want to put my providers, so I don't have to pass the supabase instance that I create in root.tsx to every single provider manually, and use use the Outlet context inside the providers. Thus I want a global layout file.
import { cssBundleHref } from "@remix-run/css-bundle";
import type { LinksFunction, LoaderFunctionArgs } from "@remix-run/node";
import {
Links,
LiveReload,
Meta,
Outlet,
Scripts,
ScrollRestoration,
useLoaderData,
} from "@remix-run/react";
import { createBrowserClient } from "@supabase/ssr";
import { useState } from "react";
import { Database } from "@supabase/database.types";
export async function loader({}: LoaderFunctionArgs) {
return {
env: {
SUPABASE_URL: process.env.SUPABASE_URL!,
SUPABASE_ANON_KEY: process.env.SUPABASE_ANON_KEY!,
},
};
}
export const links: LinksFunction = () => [
...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
];
export default function App() {
const { env } = useLoaderData<typeof loader>();
const [supabase] = useState(() =>
createBrowserClient<Database>(env.SUPABASE_URL, env.SUPABASE_ANON_KEY)
);
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body>
<Outlet context={{ supabase }} />
<ScrollRestoration />
<Scripts />
<LiveReload />
</body>
</html>
);
}
I am struggling to actually find anything on google and the remix documentation that is remotely close to this. ChatGPT said something about app/routes/__layout.tsx but that does not work seemingly.
Is there actually no root layout file.. Outside the root.tsx file in remix v2?
It would be lovely to just be able to use const { supabase } = useOutletContext<{ supabase: SupabaseClient<Database>; }>(); inside my providers if I can create a "global layout" that is not root.tsx