Appearance

Remix ​

You should create route components under app/routes/ as the entry points of your Remix application. Your Remix code should be linted using ESLint with the recommended configuration for React.

Entry file ​

The solution files for this template are:

  • app/root.jsx — the root layout that wraps every route. It includes <Meta />, <Links />, <Outlet />, <ScrollRestoration />, and <Scripts /> from @remix-run/react.
  • app/routes/_index.jsx — the index route component rendered at /.
  • vite.config.js — the Vite config wiring the @remix-run/dev plugin (preloaded, read-only).

Additional routes follow Remix's filesystem conventions (app/routes/about.jsx, app/routes/posts.$slug.jsx, etc.).

Version ​

Running on Node.js v22.0.0 with React 18.

Supported languages ​

Javascript

Testing framework ​

Vitest

Special reminders and implementation details ​

  • The root component must render <Outlet /> — that's where child routes mount. It must also include <Links /> and <Scripts /> for CSS and JS to load.
  • Data loading lives in loader exports (server-side) and mutations live in action exports. Use useLoaderData() and useActionData() in your component to read those values.
  • The seeded test imports the route component directly and renders it with @testing-library/react. For routes that use useLoaderData, you'll typically test them via a router-aware helper or by extracting the component logic into a plain function.

Example with React Testing Library: ​

jsx
import { render, screen } from '@testing-library/react';
import Index from './app/routes/_index';

describe('Index route', () => {
  test("renders 'Hello, World!'", () => {
    render(<Index />);
    expect(screen.getByText('Hello, World!')).toBeInTheDocument();
  });
});

Included libraries ​

How to debug ​

Debugging Remix is similar to debugging React. Use console.log() inside components, loaders, or actions to inspect values at runtime. Logs from loader and action functions appear in the server terminal (they run on Node), while logs inside the component body appear in both: server during SSR, browser after hydration.

Steps to Debug Using Console Logs ​

  1. Identify the Problem Area: Decide whether the issue lives in the route component, the loader (data fetching), or the action (mutations).

  2. Insert console.log() Statements: Add log calls before and after suspicious code. Loader/action logs go to the terminal; event-handler logs go to the browser console.

  3. Check the Results Output of your tests

  4. Use Debug Icon in Preview Area: Click on the debug icon in the Preview area to check the console output, or open your browser console.

  5. Analyze the Output: Compare logs against the rendered UI to spot wrong loader data, failed mutations, or unexpected re-renders.

Here's an example of how to use console.log() for debugging in a Remix route:

jsx
import { useLoaderData } from '@remix-run/react';

export async function loader() {
  const items = await fetch('https://example.com/api/items').then((response) => response.json());
  console.log('Loader fetched items:', items); // logs in the terminal
  return { items };
}

export default function Index() {
  const { items } = useLoaderData();
  console.log('Component received items:', items); // server log on SSR, browser log on hydration

  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}