Learn Remix - Starting a Remix Project

#Introduction

The first two episodes built understanding. From this episode on, you'll be typing yourself. The end goal is simple: a working Remix project, neatly organized, and ready to be filled with the concepts that follow.

Remix uses the official create-remix scaffolder to build the project skeleton. The interesting part: the scaffolding result is minimal — not a giant boilerplate with hundreds of files, but a slim structure you can understand file by file. This aligns with Remix's philosophy of emphasizing flow understanding over layered abstraction.

Episode 3 takes you from empty to a running project: creating the project, reading the folder structure, running the dev server, then tidying up the TypeScript, ESLint, and Prettier configuration.

#Creating a Project with npx create-remix

#Running the Wizard

Open your terminal, navigate to the folder where you keep your projects, then run the following command:

Create a new Remix project

npx create-remix@latest belajar-remix-app

The npx create-remix@latest belajar-remix-app command downloads the scaffolder and shows an interactive wizard. npx ensures you use the latest version, so you don't need to install the scaffolder globally.

#Important Wizard Choices

The wizard will ask several options that affect the project structure:

Deploy target: choose your target platform. For local learning, the Node.js-based or self-hosted option is most comfortable. Other adapters will be discussed in episode 20.
TypeScript or JavaScript: choose TypeScript to get type safety from the start — this is Remix's official recommendation.
Whether to install dependencies immediately: choose yes, or run npm install manually after scaffolding finishes.

Tip

Note down the answers you choose. The difference in choices only determines which adapter file is generated — the core structure like app/routes stays the same regardless of platform.

#Folder Structure and Initial Configuration

#Reading the Project Structure

After scaffolding finishes, open the generated folder:

Project structure from scaffolding

belajar-remix-app/
  app/
    routes/
    entry.client.tsx
    entry.server.tsx
    root.tsx
  public/
  .eslintrc.cjs
  .prettierrc
  package.json
  tsconfig.json
  vite.config.ts

Notice there's no remix.config.js — since Remix v3, configuration uses vite.config.ts. The files entry.client.tsx and entry.server.tsx are the application's entry points in the browser and on the server.

#vite.config.ts

Open vite.config.ts. Its contents are concise: the Remix plugin and the experimental server declaration if used.

Minimal vite.config.ts

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
 
export default defineConfig({
  plugins: [remix(), tsconfigPaths()],
});

This configuration tells Vite to use the Remix plugin as the main bundler. The remix() plugin from @remix-run/dev manages the entire build, dev server, and route manifest.

#Running the Dev Server and Hot Reload

#Starting the Dev Server

With dependencies installed, run the following command:

Run the dev server

npm run dev

After a few seconds, Vite will set up the server and display a URL. Open http://localhost:3000 in your browser. If the Remix welcome page appears, your project is running correctly.

#Hot Module Replacement

Change some text on the home page, for example in app/routes/_index.tsx, then save. The browser updates immediately without a full reload. This is Hot Module Replacement (HMR) at work: module changes are sent to the browser in real time, while the unchanged page state is preserved.

This Vite-based Remix dev server also handles server-side file changes — loaders, actions, and other server modules are reloaded automatically. No need to restart the server manually.

#TypeScript, ESLint, and Prettier

#TypeScript in Strict Mode

The scaffolding project already uses TypeScript with strict: true in tsconfig.json. strict: true forces you to write types explicitly, so bugs in loaders, actions, and component props are caught at writing time. The habit of typing all data that comes out of a loader will pay off greatly in episodes 10 and 18.

tsconfig.json extract

{
  "compilerOptions": {
    "strict": true,
    "jsx": "react-jsx",
    "types": ["@remix-run/node"]
  },
  "include": ["**/*.ts", "**/*.tsx"]
}

#ESLint and Prettier

The scaffolder provides an ESLint configuration based on Remix's eslint-config-react-app. Run checks and automatic fixes through the available scripts:

Lint and format

npm run lint
npx prettier --write .

The npm run lint command checks for potential bugs and inconsistent patterns, while npx prettier --write . tidies up formatting across all files. Get into the habit of running both before committing — clean lint and formatting will make code review easier in team projects.

#Conclusion

Episode 3 completes the setup: a Vite-based Remix v3 project is now running with a dev server, the folder structure is understood, and TypeScript, ESLint, and Prettier are ready to accompany development. The technical foundation is now truly ready.

The key takeaways:

npx create-remix@latest nama-app builds a project through an interactive wizard.
The core structure lives in app/routes, app/root.tsx, and the entry files.
Build configuration lives in vite.config.ts, not remix.config.js.
npm run dev runs the dev server with HMR for both client and server.
TypeScript with strict mode is active from scaffolding.
Run npm run lint and npx prettier --write . before committing.

In the next episode, episode 4, we'll discuss routing and nested routes — Remix routing basics, layout sharing with Outlet, dynamic routes and catch-all routes, advanced route conventions, and navigation with Link and NavLink. This is where the folder structure we just created starts showing its strength.