Learn Remix - Modern Tooling & Build Automation

#Introduction

You have a good application, but its quality is only as good as the team's habits. If linting, typechecking, and building only run on each person's laptop, the results are inconsistent. Episode 19 turns quality from a habit into a system.

You already know Remix's tooling foundation: Vite for bundling, TypeScript for types, ESLint and Prettier for code style. This episode ties it all together into one automated flow that runs in CI — every code change is tested, checked, and built the same way.

Episode 19 covers the Remix CLI and bundling, TypeScript and schema typing, a CI/CD pipeline, and linting with build validation as quality gates.

#The Remix CLI and Bundling

#Remix Core Commands

Remix v3 uses Vite as the bundler, and the CLI provides the essential commands for dev, build, and typecheck:

npm run dev          # dev server dengan HMR
npm run build        # build production
npm run typecheck    # memeriksa tipe TypeScript
npm run lint         # memeriksa kualitas kode

The typecheck command runs tsc without emitting — checking the whole project without producing files. Running this in CI catches type errors before they reach production.

#Reading the Build Output

When the build finishes, the log shows bundle sizes. A bundle that bloats for no reason is a signal to inspect imports and code-splitting. Make bundle audits part of the team's habits.

#TypeScript and Schema Typing

#Strict Configuration

Remix scaffolded projects already use strict: true. In larger projects, add options like noUncheckedIndexedAccess for safer array access. The stricter the types, the more bugs are caught while writing, not in production.

#Schema Typing with Zod

Schema typing unifies validation and types. A Zod schema produces TypeScript types shared by both the client and the server:

One schema, two layers

import { z } from "zod";
 
export const schemaPost = z.object({
  judul: z.string().min(3).max(100),
});
 
export type DataPost = z.infer<typeof schemaPost>;
 
export async function loader() {
  const data: DataPost[] = await ambilPost();
  return data;
}

z.infer creates a type from the schema, so there are no two definitions that can drift apart. A schema change automatically changes the types throughout the application.

#CI/CD Pipeline for Remix Applications

#A Good Pipeline

An ideal CI/CD pipeline runs steps in a clear order and fails fast:

name: ci
on: [push, pull_request]
jobs:
  quality:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run typecheck
      - run: npm run lint
      - run: npm run build

This pipeline runs typecheck, lint, and build on every push and pull request. If one step fails, the rest don't run — errors are caught early.

#Automatic Deployment

After quality passes, the pipeline can continue to deployment. The main and staging branches can trigger deploys to different environments, while pull requests trigger a preview environment. This automation makes routine releases less scary.

#Linting, Formatting, and Build Validation

#ESLint as a Guardian

ESLint catches bug-prone patterns and inconsistencies. Remix's configuration includes React and hooks rules. Run lint in CI; treat warnings as errors in production so standards hold.

#Prettier for Uniformity

Prettier ends the code formatting debate forever — everyone writes the same format. Integrate Prettier with the editor and a git hook so formatting is automatic before commits. Don't forget to add Prettier to the pipeline.

#Build Validation as the Final Gate

Make a successful build a requirement for deployment. If the build fails in CI, nothing goes to production — no matter how important the feature is. This gate is simple but keeps production green.

#Conclusion

Episode 19 automates quality: the Remix CLI and Vite for dev and build, strict TypeScript with schema typing, a fail-fast CI/CD pipeline, and linting, formatting, and build validation as gates. Quality is no longer a personal habit — it's a system.

The key takeaways:

• The Remix CLI provides dev, build, typecheck, and lint.
• Run typecheck and lint in CI to catch problems early.
• z.infer creates TypeScript types from a Zod schema.
• A CI pipeline fails fast: typecheck, lint, then build.
• Preview environments for pull requests make review easier.
• A successful build is a mandatory requirement before deploy.

In the next episode, episode 20, we'll discuss deployment and hosting — deployment options on Vercel, Netlify, Cloudflare Pages, and Fly.io, choosing server versus edge, build output and asset deployment, and preview environments with rollbacks. The build is automated; now it's time for your application to live in the real world.