Remix: Building Full-Stack React Apps

# Create a new Remix project
npx create-remix@latest my-remix-app

# Navigate into the project
cd my-remix-app

# Install dependencies (if not already done)
npm install

# Start the development server
npm run dev

my-remix-app/
├── app/
│   ├── root.tsx          # Root layout (html, head, body)
│   ├── entry.client.tsx  # Client-side hydration entry
│   ├── entry.server.tsx  # Server-side rendering entry
│   └── routes/
│       ├── _index.tsx    # Matches /
│       ├── about.tsx     # Matches /about
│       ├── blog._index.tsx    # Matches /blog
│       └── blog.$slug.tsx     # Matches /blog/:slug
├── public/               # Static assets
├── remix.config.js       # Remix configuration
└── package.json

import {
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";

export default function App() {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />    {/* Renders meta tags from route loaders */}
        <Links />  {/* Renders link tags (CSS, etc.) */}
      </head>
      <body>
        <Outlet />          {/* Renders the matched route */}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import type { LoaderFunctionArgs } from "@remix-run/node";

// Runs on the server; never shipped to the browser
export async function loader({ params }: LoaderFunctionArgs) {
  const post = await db.post.findUnique({
    where: { slug: params.slug },
    include: { author: true, tags: true },
  });

  if (!post) {
    throw new Response("Post Not Found", { status: 404 });
  }

  return json({ post });
}

// The component receives data through useLoaderData: no useEffect, no loading state
export default function BlogPost() {
  const { post } = useLoaderData<typeof loader>();

  return (
    <article>
      <h1>{post.title}</h1>
      <p>By {post.author.name}</p>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  );
}

// app/routes/dashboard.tsx: layout loader
export async function loader() {
  const user = await getUser();           // Runs in parallel ⚡
  return json({ user });
}

// app/routes/dashboard._index.tsx: child loader
export async function loader() {
  const stats = await getDashboardStats(); // Runs in parallel ⚡
  return json({ stats });
}

// app/routes/dashboard.sidebar.tsx: sibling loader
export async function loader() {
  const notifications = await getNotifications(); // Runs in parallel ⚡
  return json({ notifications });
}

// All three loaders fire simultaneously.
// Total wait time = slowest single loader, not sum of all.

import { Outlet, NavLink } from "@remix-run/react";
import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";

export async function loader() {
  const user = await getCurrentUser();
  return json({ user });
}

export default function DashboardLayout() {
  const { user } = useLoaderData<typeof loader>();

  return (
    <div className="dashboard">
      <aside className="sidebar">
        <p>Welcome, {user.name}</p>
        <nav>
          <NavLink to="/dashboard"
            className={({ isActive }) => isActive ? "active" : ""}>
            Overview
          </NavLink>
          <NavLink to="/dashboard/settings">Settings</NavLink>
          <NavLink to="/dashboard/billing">Billing</NavLink>
        </nav>
      </aside>
      <main>
        <Outlet />  {/* Child route renders here */}
      </main>
    </div>
  );
}

import { json, redirect } from "@remix-run/node";
import { Form, useLoaderData } from "@remix-run/react";
import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node";

export async function loader({ request }: LoaderFunctionArgs) {
  const user = await getCurrentUser(request);
  return json({ user });
}

export async function action({ request }: ActionFunctionArgs) {
  const formData = await request.formData();
  const name  = formData.get("name")  as string;
  const email = formData.get("email") as string;

  await updateUser({ name, email });
  return redirect("/dashboard/settings?saved=true");
}

export default function DashboardSettings() {
  const { user } = useLoaderData<typeof loader>();

  return (
    <section>
      <h2>Account Settings</h2>
      <Form method="post">
        <label>
          Name
          <input name="name" defaultValue={user.name} />
        </label>
        <label>
          Email
          <input name="email" type="email" defaultValue={user.email} />
        </label>
        <button type="submit">Save Changes</button>
      </Form>
    </section>
  );
}

import { useRouteError, isRouteErrorResponse, Link } from "@remix-run/react";

export async function loader({ params }: LoaderFunctionArgs) {
  const post = await db.post.findUnique({ where: { slug: params.slug } });

  if (!post) {
    // Throwing a Response is the idiomatic Remix way to trigger a 404
    throw new Response("Post not found", { status: 404 });
  }

  return json({ post });
}

// This ErrorBoundary replaces ONLY the blog.$slug route segment
// The nav, sidebar, and footer layouts remain intact
export function ErrorBoundary() {
  const error = useRouteError();

  if (isRouteErrorResponse(error)) {
    return (
      <div className="error-page">
        <h1>{error.status} - {error.statusText}</h1>
        <p>{error.data}</p>
        <Link to="/blog">← Back to Blog</Link>
      </div>
    );
  }

  // Unexpected runtime error
  const message = error instanceof Error ? error.message : "Unknown error";
  return (
    <div className="error-page">
      <h1>Something went wrong</h1>
      <p>{message}</p>
    </div>
  );
}

import type { MetaFunction } from "@remix-run/node";

export const meta: MetaFunction<typeof loader> = ({ data }) => {
  if (!data?.post) {
    return [{ title: "Post Not Found | My Blog" }];
  }
  return [
    { title: `${data.post.title} | My Blog` },
    { name: "description", content: data.post.excerpt },
    { property: "og:title", content: data.post.title },
    { property: "og:image", content: data.post.coverImage },
  ];
};