Project structure overview in Remix

Introduction

Knowing the project structure helps you find and organize your files easily. It makes building and maintaining your app simpler.

When starting a new Remix app and you want to understand where to put your code.

When you need to add a new page or feature and want to know the right folder to use.

When debugging or updating your app and you want to quickly locate files.

When collaborating with others so everyone follows the same structure.

When learning Remix to understand how it organizes routes, components, and assets.

Syntax

Remix

my-remix-app/
├── app/
│   ├── routes/
│   ├── components/
│   ├── styles/
│   ├── entry.client.tsx
│   ├── entry.server.tsx
│   └── root.tsx
├── public/
├── remix.config.js
├── package.json
└── tsconfig.json

The app/ folder holds most of your code like pages and components.

The routes/ folder inside app/ maps URLs to files automatically.

Examples

This file creates the homepage at URL /.

Remix

app/routes/index.tsx

Reusable navigation bar component used across pages.

Remix

app/components/NavBar.tsx

Static files like images and icons go here and are served directly.

Remix

public/favicon.ico

Sample Program

This is a simple homepage component inside app/routes/index.tsx. It uses a loader to fetch data and displays a welcome message.

Remix

import type { LoaderFunction } from '@remix-run/node';
import { json } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';

export const loader: LoaderFunction = async () => {
  return json({ message: 'Welcome to Remix!' });
};

export default function Index() {
  const data = useLoaderData<typeof loader>();
  return (
    <main>
      <h1>{data.message}</h1>
      <p>This is the homepage from <code>app/routes/index.tsx</code>.</p>
    </main>
  );
}

Important Notes

Files inside app/routes/ automatically become pages based on their file name and folder.

Use public/ for images, fonts, and other static assets accessible by URL.

Keep components in app/components/ to reuse UI parts easily.

Summary

Remix projects have a clear folder structure to organize code and assets.

app/routes/ controls your app's pages and URLs.

Understanding this structure helps you build and maintain Remix apps smoothly.