47 lines
1.6 KiB
TypeScript
47 lines
1.6 KiB
TypeScript
import { createFileRoute } from "@tanstack/react-router";
|
|
import { useEffect, useState } from "react";
|
|
|
|
export const Route = createFileRoute("/")({
|
|
component: Home,
|
|
});
|
|
|
|
// Public URL of the backend, injected at build time via Vite.
|
|
// Falls back to localhost for `vite dev`.
|
|
const API_URL = import.meta.env.VITE_API_URL ?? "http://localhost:3000";
|
|
|
|
type Hello = { message: string; timestamp: string };
|
|
|
|
function Home() {
|
|
const [data, setData] = useState<Hello | null>(null);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
fetch(`${API_URL}/api/hello`)
|
|
.then((r) => {
|
|
if (!r.ok) throw new Error(`HTTP ${r.status}`);
|
|
return r.json() as Promise<Hello>;
|
|
})
|
|
.then(setData)
|
|
.catch((e) => setError(String(e)));
|
|
}, []);
|
|
|
|
return (
|
|
<main style={{ fontFamily: "system-ui, sans-serif", padding: "2rem", maxWidth: 640, margin: "0 auto" }}>
|
|
<h1>test-app-stack</h1>
|
|
<p>TanStack Start frontend talking to an ElysiaJS (Bun) backend.</p>
|
|
|
|
<section style={{ marginTop: "1.5rem", padding: "1rem", border: "1px solid #ddd", borderRadius: 8 }}>
|
|
<h2 style={{ marginTop: 0 }}>Backend connection</h2>
|
|
<p><strong>API URL:</strong> <code>{API_URL}</code></p>
|
|
{error && <p style={{ color: "crimson" }}>❌ {error}</p>}
|
|
{!error && !data && <p>Connecting…</p>}
|
|
{data && (
|
|
<>
|
|
<p>✅ <strong>{data.message}</strong></p>
|
|
<p style={{ color: "#666", fontSize: "0.85rem" }}>at {data.timestamp}</p>
|
|
</>
|
|
)}
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|