Root loader -> import.meta.env for possible values

.env.example

@@ -1,4 +1,3 @@
-BASE_URL=http://localhost:5173
 DB_PATH=db.sqlite3
 LOHI_TOKEN=salmon
 SESSION_SECRET=secret
@@ -23,6 +22,8 @@ STORAGE_URL=
 TWITCH_CLIENT_ID=
 TWITCH_CLIENT_SECRET=
 
-VITE_SKALOP_WS_URL=ws://localhost:5900
 SKALOP_SYSTEM_MESSAGE_URL=http://localhost:5900/system
 SKALOP_TOKEN=secret
+
+VITE_SITE_DOMAIN=http://localhost:5173
+VITE_SKALOP_WS_URL=ws://localhost:5900

app/components/Main.tsx

@@ -6,9 +6,7 @@ import {
 import { SideNav } from "app/components/layout/SideNav";
 import clsx from "clsx";
 import type * as React from "react";
-import { useMatches } from "react-router";
 import { useUser } from "~/features/auth/core/user";
-import type { RootLoaderData } from "~/root";
 
 export const Main = ({
 	children,
@@ -26,10 +24,11 @@ export const Main = ({
 	style?: React.CSSProperties;
 }) => {
 	const error = useRouteError();
-	const data = useMatches()[0]?.data as RootLoaderData | undefined;
 	const user = useUser();
 	const showLeaderboard =
-		data?.publisherId && !user?.patronTier && !isRouteErrorResponse(error);
+		import.meta.env.VITE_PLAYWIRE_PUBLISHER_ID &&
+		!user?.patronTier &&
+		!isRouteErrorResponse(error);
 
 	const location = useLocation();
 	const isFrontPage = location.pathname === "/";

app/components/layout/index.tsx

@@ -48,7 +48,7 @@ export const Layout = React.memo(function Layout({
 	const isFrontPage = location.pathname === "/";
 
 	const showLeaderboard =
-		data?.publisherId &&
+		import.meta.env.VITE_PLAYWIRE_PUBLISHER_ID &&
 		!data?.user?.patronTier &&
 		!location.pathname.includes("plans");
 	return (

app/features/chat/components/Chat.tsx

@@ -324,6 +324,10 @@ export function useChat({
 
 	React.useEffect(() => {
 		if (rooms.length === 0) return;
+		if (!import.meta.env.VITE_SKALOP_WS_URL) {
+			logger.warn("No WS URL provided");
+			return;
+		}
 
 		const url = `${import.meta.env.VITE_SKALOP_WS_URL}?${rooms
 			.map((room) => `room=${room.code}`)

app/features/team/routes/t.$customUrl.roster.tsx

@@ -17,7 +17,6 @@ import { Main } from "~/components/Main";
 import { SubmitButton } from "~/components/SubmitButton";
 import { useUser } from "~/features/auth/core/user";
 import { requireUserId } from "~/features/auth/core/user.server";
-import { useBaseUrl } from "~/hooks/useBaseUrl";
 import type { SendouRouteHandle } from "~/utils/remix";
 import { notFoundIfFalsy, parseRequestPayload, validate } from "~/utils/remix";
 import { makeTitle } from "~/utils/strings";
@@ -143,7 +142,6 @@ export default function ManageTeamRosterPage() {
 function InviteCodeSection() {
 	const { t } = useTranslation(["common", "team"]);
 	const { team } = useLoaderData<typeof loader>();
-	const baseUrl = useBaseUrl();
 	const [, copyToClipboard] = useCopyToClipboard();
 
 	if (isTeamFull(team)) {
@@ -154,7 +152,7 @@ function InviteCodeSection() {
 		);
 	}
 
-	const inviteLink = `${baseUrl}${joinTeamPage({
+	const inviteLink = `${import.meta.env.VITE_SITE_DOMAIN}${joinTeamPage({
 		customUrl: team.customUrl,
 		inviteCode: team.inviteCode,
 	})}`;

app/hooks/useBaseUrl.ts

@@ -1,7 +0,0 @@
-import { useMatches } from "@remix-run/react";
-
-export function useBaseUrl() {
-	const matches = useMatches();
-
-	return (matches[0]?.data as any).baseUrl as string;
-}

app/root.tsx

@@ -89,9 +89,6 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
 		{
 			locale,
 			theme: themeSession.getTheme(),
-			baseUrl: process.env.BASE_URL!,
-			publisherId: process.env.PLAYWIRE_PUBLISHER_ID,
-			websiteId: process.env.PLAYWIRE_WEBSITE_ID,
 			user: user
 				? {
 						username: user.username,
@@ -468,13 +465,18 @@ const Ramp = React.lazy(() => import("./components/ramp/Ramp"));
 function MyRamp({ data }: { data: RootLoaderData | undefined }) {
 	if (
 		!data ||
-		!data.publisherId ||
-		!data.websiteId ||
 		data.user?.patronTier ||
+		!import.meta.env.VITE_PLAYWIRE_PUBLISHER_ID ||
+		!import.meta.env.VITE_PLAYWIRE_WEBSITE_ID ||
 		typeof window === "undefined"
 	) {
 		return null;
 	}
 
-	return <Ramp publisherId={data.publisherId} id={data.websiteId} />;
+	return (
+		<Ramp
+			publisherId={import.meta.env.VITE_PLAYWIRE_PUBLISHER_ID}
+			id={import.meta.env.VITE_PLAYWIRE_WEBSITE_ID}
+		/>
+	);
 }

types/vite.d.ts

@@ -0,0 +1,6 @@
+interface ImportMetaEnv {
+	VITE_SKALOP_WS_URL?: string;
+	VITE_PLAYWIRE_PUBLISHER_ID?: string;
+	VITE_PLAYWIRE_WEBSITE_ID?: string;
+	VITE_SITE_DOMAIN: string;
+}