Skip to content

Instantly share code, notes, and snippets.

@mstaicu

mstaicu/index.ts

Last active May 2, 2026 21:01
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mstaicu/503289174d375ca434641059698581fc to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mstaicu/503289174d375ca434641059698581fc to your computer and use it in GitHub Desktop.
Download ZIP
Remix Run v3
Raw
index.ts
// package.json
{
"type": "module",
"scripts": {
"build": "esbuild app/pages/register.client.ts app/pages/login.client.ts --bundle --format=esm --outdir=public/assets --entry-names=[name] --minify --sourcemap && esbuild server.ts --bundle --platform=node --format=esm --outfile=dist/server.js --packages=external",
"dev": "esbuild app/pages/register.client.ts app/pages/login.client.ts --bundle --format=esm --outdir=public/assets --entry-names=[name] --sourcemap --watch & NODE_ENV=development tsx watch server.ts",
"start": "node dist/server.js",
"typecheck": "tsc --noEmit"
},
"dependencies": {
"remix": "^3.0.0-beta.0"
},
"devDependencies": {
"@types/node": "^25.6.0",
"esbuild": "^0.28.0",
"tsx": "^4.21.0",
"typescript": "^6.0.3"
}
}
// server.js
import http from "node:http";
import { createRouter } from "remix/fetch-router";
import { get, route } from "remix/fetch-router/routes";
import { html } from "remix/html-template";
import { createRequestListener } from "remix/node-fetch-server";
import { createHtmlResponse } from "remix/response/html";
const CONTENT_BASE_URL =
process.env.CONTENT_BASE_URL ?? "https://example.com/content";
const routes = route({
home: get("/"),
about: get("/about"),
});
const router = createRouter();
router.get(routes.home, () => renderPage("home"));
router.get(routes.about, () => renderPage("about"));
async function renderPage(slug) {
const page = await fetchPage(slug);
if (!page) {
return new Response("Not found", { status: 404 });
}
return createHtmlResponse(
html`<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>${page.title}</title>
<meta name="description" content="${page.description}" />
<style>
body {
margin: 0;
font-family: ui-sans-serif, system-ui, sans-serif;
color: #151515;
background: #ffffff;
}
header,
main {
width: min(100% - 32px, 960px);
margin-inline: auto;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding-block: 24px;
border-bottom: 1px solid #e5e5e5;
}
nav {
display: flex;
gap: 16px;
}
a {
color: inherit;
text-decoration: none;
font-weight: 600;
}
main {
padding-block: 72px;
}
h1 {
max-width: 760px;
margin: 0;
font-size: 56px;
line-height: 1;
}
p {
max-width: 680px;
font-size: 19px;
line-height: 1.65;
color: #444;
}
section {
margin-top: 48px;
}
h2 {
margin-bottom: 8px;
font-size: 28px;
}
</style>
</head>
<body>
<header>
<a href="/">Aperitif</a>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<h1>${page.title}</h1>
<p>${page.description}</p>
${page.sections
.map(
(section) => html`
<section>
<h2>${section.heading}</h2>
<p>${section.body}</p>
</section>
`,
)
.join("")}
</main>
</body>
</html>`,
{
headers: {
"Cache-Control": "public, max-age=60, stale-while-revalidate=300",
},
},
);
}
async function fetchPage(slug) {
const response = await fetch(`${CONTENT_BASE_URL}/pages/${slug}.json`, {
headers: { Accept: "application/json" },
});
if (response.status === 404) return null;
if (!response.ok) throw new Error(`CONTENT_FETCH_FAILED_${response.status}`);
return response.json();
}
const server = http.createServer(
createRequestListener((request) => router.fetch(request)),
);
const port = Number.parseInt(process.env.PORT ?? "3000", 10);
server.listen(port, () => {
console.log(`marketing site listening on http://localhost:${port}`);
});
@mstaicu
Copy link
Copy Markdown
Author

mstaicu commented May 2, 2026

Next next next level

// server.jsx
// @jsxRuntime classic
// @jsx createElement

import http from "node:http";
import { createRouter } from "remix/fetch-router";
import { get, route } from "remix/fetch-router/routes";
import { createRequestListener } from "remix/node-fetch-server";
import { createElement, css } from "remix/ui";
import { renderToStream } from "remix/ui/server";
import { RMX_01 } from "remix/ui/theme";
import { Button } from "remix/ui/button";

const CONTENT_BASE_URL =
  process.env.CONTENT_BASE_URL ?? "https://example.com/content";

const PORT = Number.parseInt(process.env.PORT ?? "3000", 10);
const CACHE_TTL_MS = 60_000;

const routes = route({
  about: get("/about"),
  home: get("/"),
});

const router = createRouter();
const cache = new Map();

router.get(routes.home, () => renderPage("home"));
router.get(routes.about, () => renderPage("about"));

async function renderPage(slug) {
  try {
    const page = await getPage(slug);

    if (!page) {
      return renderDocument({
        page: {
          description: "Page not found.",
          sections: [],
          title: "Page not found",
        },
        status: 404,
      });
    }

    return renderDocument({ page, status: 200 });
  } catch (error) {
    console.error(error);

    return renderDocument({
      page: {
        description: "Content is temporarily unavailable.",
        sections: [],
        title: "Content unavailable",
      },
      status: 502,
    });
  }
}

function renderDocument({ page, status }) {
  return new Response(renderToStream(<Document page={page} />), {
    headers: {
      "Cache-Control":
        status === 200
          ? "public, max-age=60, stale-while-revalidate=300"
          : "no-store",
      "Content-Type": "text/html; charset=utf-8",
    },
    status,
  });
}

async function getPage(slug) {
  const cached = cache.get(slug);

  if (cached && cached.expiresAt > Date.now()) {
    return cached.page;
  }

  const response = await fetch(`${CONTENT_BASE_URL}/pages/${slug}.json`, {
    headers: { Accept: "application/json" },
  });

  if (response.status === 404) return null;
  if (!response.ok) throw new Error(`CONTENT_FETCH_FAILED_${response.status}`);

  const page = normalizePage(await response.json());

  cache.set(slug, {
    expiresAt: Date.now() + CACHE_TTL_MS,
    page,
  });

  return page;
}

function normalizePage(page) {
  return {
    description: String(page.description ?? ""),
    sections: Array.isArray(page.sections)
      ? page.sections.map((section) => ({
          body: String(section.body ?? ""),
          heading: String(section.heading ?? ""),
        }))
      : [],
    title: String(page.title ?? "Untitled"),
  };
}

function Document({ page }) {
  return (
    <html lang="en">
      <head>
        <RMX_01 />
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>{page.title}</title>
        <meta name="description" content={page.description} />
      </head>
      <body mix={bodyStyle}>
        <Header />
        <main mix={mainStyle}>
          <Hero page={page} />
          <Sections sections={page.sections} />
        </main>
      </body>
    </html>
  );
}

function Header() {
  return (
    <header mix={headerStyle}>
      <a href="/" mix={brandStyle}>
        Aperitif
      </a>
      <nav aria-label="Main navigation" mix={navStyle}>
        <a href="/">Home</a>
        <a href="/about">About</a>
      </nav>
    </header>
  );
}

function Hero({ page }) {
  return (
    <section mix={heroStyle}>
      <p mix={eyebrowStyle}>Aperitif</p>
      <h1 mix={titleStyle}>{page.title}</h1>
      <p mix={leadStyle}>{page.description}</p>
      <p>
        <Button tone="primary">Start a conversation</Button>
      </p>
    </section>
  );
}

function Sections({ sections }) {
  if (sections.length === 0) return null;

  return (
    <section mix={sectionsStyle}>
      {sections.map((section) => (
        <article key={section.heading} mix={articleStyle}>
          <h2>{section.heading}</h2>
          <p>{section.body}</p>
        </article>
      ))}
    </section>
  );
}

const bodyStyle = css({
  margin: 0,
  backgroundColor: "#ffffff",
  color: "#151515",
  fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif",
});

const headerStyle = css({
  alignItems: "center",
  borderBottom: "1px solid #e7e7e7",
  display: "flex",
  justifyContent: "space-between",
  marginInline: "auto",
  paddingBlock: "24px",
  width: "min(100% - 32px, 1080px)",
  "@media (max-width: 640px)": {
    alignItems: "flex-start",
    flexDirection: "column",
    gap: "16px",
  },
});

const brandStyle = css({
  color: "inherit",
  fontWeight: 750,
  textDecoration: "none",
});

const navStyle = css({
  display: "flex",
  gap: "18px",
  "& a": {
    color: "inherit",
    fontWeight: 650,
    textDecoration: "none",
  },
});

const mainStyle = css({
  marginInline: "auto",
  paddingBlock: "72px",
  width: "min(100% - 32px, 1080px)",
});

const heroStyle = css({
  maxWidth: "820px",
});

const eyebrowStyle = css({
  color: "#6b5a44",
  fontSize: "13px",
  fontWeight: 800,
  letterSpacing: "0.08em",
  margin: "0 0 14px",
  textTransform: "uppercase",
});

const titleStyle = css({
  fontSize: "64px",
  lineHeight: "0.95",
  margin: 0,
  "@media (max-width: 640px)": {
    fontSize: "44px",
  },
});

const leadStyle = css({
  color: "#444",
  fontSize: "20px",
  lineHeight: "1.65",
  marginTop: "24px",
  maxWidth: "720px",
});

const sectionsStyle = css({
  display: "grid",
  gap: "28px",
  gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))",
  marginTop: "64px",
});

const articleStyle = css({
  borderTop: "1px solid #e7e7e7",
  paddingTop: "24px",
  "& h2": {
    fontSize: "24px",
    margin: "0 0 10px",
  },
  "& p": {
    color: "#4b4b4b",
    lineHeight: "1.7",
    margin: 0,
  },
});

const server = http.createServer(
  createRequestListener((request) => router.fetch(request)),
);

server.listen(PORT, () => {
  console.log(`marketing site listening on http://localhost:${PORT}`);
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment