Remix

https://v2.remix.run/docs
Admin
Remix is a full-stack web framework that lets you focus on the user experience, delivering...
Tokens:278,019
Snippets:2,101
Trust Score:9.9
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Create a new Remix project from a community example

Source: https://v2.remix.run/docs/guides/templates

Use the `--template` flag with a community example from the `remix-run/examples` repository to install a working example.

```bash
npx create-remix@latest --template remix-run/examples/basic

```

--------------------------------

### Start the Remix app

Source: https://v2.remix.run/docs/start/tutorial

These commands install dependencies and start the development server. After running, open http://localhost:5173 to see the app.

```bash
# cd into the app directory
cd {wherever you put the app}

# install dependencies if you haven't already
npm install

# start the server
npm run dev
```

--------------------------------

### Manual Project Setup and Dependency Installation

Source: https://v2.remix.run/docs/start/quickstart

Manually create a project directory, initialize npm, and install the required runtime and development dependencies.

```bash
mkdir my-remix-app
cd my-remix-app
npm init -y

# install runtime dependencies
npm i @remix-run/node @remix-run/react @remix-run/serve isbot@4 react@18 react-dom@18

# install dev dependencies
npm i -D @remix-run/dev vite
```

--------------------------------

### Install remark-frontmatter and remark-mdx-frontmatter

Source: https://v2.remix.run/docs/guides/vite

Install the Remark frontmatter plugins.

```bash
npm install -D remark-frontmatter remark-mdx-frontmatter

```

--------------------------------

### Install and initialize source-map-support

Source: https://v2.remix.run/docs/start/v2

Install and initialize source-map-support manually when using a custom app server with Remix v2. The import and install call are required in your server entry point.

```bash
npm i source-map-support

```

```javascript
import sourceMapSupport from "source-map-support";

sourceMapSupport.install();

```

--------------------------------

### Install @remix-run/routes-option-adapter

Source: https://v2.remix.run/docs/start/future-flags

Install the adapter package to convert existing Remix routes options into React Router RouteConfig.

```bash
npm install -D @remix-run/routes-option-adapter
```

--------------------------------

### Install mkcert

Source: https://v2.remix.run/docs/guides/local-tls

Installs mkcert, a tool for creating locally trusted certificates.

```bash
mkcert -install

```

--------------------------------

### Install Autoprefixer

Source: https://v2.remix.run/docs/styling/postcss

Install the Autoprefixer PostCSS plugin as a dev dependency.

```bash
npm install -D autoprefixer

```

--------------------------------

### Install @vanilla-extract/vite-plugin

Source: https://v2.remix.run/docs/guides/vite

Install the official Vanilla Extract plugin for Vite.

```bash
npm install -D @vanilla-extract/vite-plugin

```

--------------------------------

### remix dev configuration example

Source: https://v2.remix.run/docs/other-api/dev

Example remix.config.js showing dev options: manual mode, TLS key and certificate. Options priority: flags, config, defaults.

```javascript
/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  dev: {
    // ...any other options you want to set go here...
    manual: true,
    tlsKey: "./key.pem",
    tlsCert: "./cert.pem",
  },
};

```

--------------------------------

### Start the dev server

Source: https://v2.remix.run/docs/start/quickstart

Runs npm run dev to start the development server with Vite middleware, enabling immediate feedback on changes.

```bash
npm run dev
```

--------------------------------

### Install @remix-run/route-config

Source: https://v2.remix.run/docs/start/future-flags

Install the package that provides the RouteConfig type and helpers for configuring routes in code.

```bash
npm install -D @remix-run/route-config
```

--------------------------------

### Install and Configure @remix-run/fs-routes

Source: https://v2.remix.run/docs/start/future-flags

Install the file system routes package and use flatRoutes in your routes.ts file to maintain file-based routing.

```bash
npm install -D @remix-run/fs-routes
```

```typescript
import { flatRoutes } from "@remix-run/fs-routes";

export default flatRoutes();
```

--------------------------------

### Install @remix-run/css-bundle for CSS bundling

Source: https://v2.remix.run/docs/guides/migrating-react-router-app

Installs the `@remix-run/css-bundle` package to enable CSS bundling support for CSS Modules, Vanilla Extract, and CSS side effect imports.

```bash
npm install @remix-run/css-bundle
```

--------------------------------

### Generate Remix tutorial template

Source: https://v2.remix.run/docs/start/tutorial

Run this command to create a new Remix project using the tutorial template. It includes CSS and a data model to focus on Remix.

```bash
npx create-remix@latest --template remix-run/remix/templates/remix-tutorial
```

--------------------------------

### CSS side effect import example

Source: https://v2.remix.run/docs/styling/css-imports

Example of a module using a CSS side effect import. This pattern is used by some NPM packages to declare CSS dependencies. Requires CSS bundling setup in your application.

```javascript
import "./menu-button.css";

export function MenuButton() {
  return <button data-menu-button>{/* ... */}</button>;
}

```

--------------------------------

### Run remix-serve with default command

Source: https://v2.remix.run/docs/other-api/serve

Basic command to start the Remix App Server with a server build path.

```bash
remix-serve <server-build-path>
# e.g.
remix-serve build/index.js

```

--------------------------------

### Update to latest v2.x

Source: https://v2.remix.run/docs/start/future-flags

Install the latest minor version of Remix v2 packages to get the latest future flags and deprecation warnings.

```bash
npm install @remix-run/{dev,react,node,etc.}@2

```

--------------------------------

### Module side effects persist in development

Source: https://v2.remix.run/docs/other-api/serve

Module side effects remain in place in development. This example shows a setInterval that starts when the module is imported.

```typescript
import { json } from "@remix-run/node"; // or cloudflare/deno

// this starts running the moment the module is imported
setInterval(() => {
  console.log(Date.now());
}, 1000);

export async function loader() {
  // ...
}

```

--------------------------------

### Create Remix app with Express template using npx create-remix@latest --template remix-run/remix/templates/express

Source: https://v2.remix.run/docs/guides/deployment

Run this command to create a new Remix app from the Express starter template. The --template flag accepts a URL to one of the Remix starter templates. After initializing, read the template's README.md for deployment steps. Remix runs on your server but is not your server, so you can customize the configuration.

```shell
npx create-remix@latest --template remix-run/remix/templates/express

```

--------------------------------

### navigation.formMethod example

Source: https://v2.remix.run/docs/hooks/use-navigation

Shows the two ways to set navigation.formMethod: via a <Form> method prop or via the submit function. Defaults to "get" if not specified.

```tsx
// set from either one of these
<Form method="get" />;
submit(formData, { method: "get" });
```

--------------------------------

### create-remix --template examples

Source: https://v2.remix.run/docs/other-api/create-remix

Shows valid template formats including GitHub repo shorthand, URLs, remote tarballs, and local paths.

```bash
npx create-remix@latest ./my-app --template remix-run/grunge-stack
npx create-remix@latest ./my-app --template remix-run/remix/templates/remix
npx create-remix@latest ./my-app --template remix-run/examples/basic
npx create-remix@latest ./my-app --template :username/:repo
npx create-remix@latest ./my-app --template :username/:repo/:directory
npx create-remix@latest ./my-app --template https://github.com/:username/:repo
npx create-remix@latest ./my-app --template https://github.com/:username/:repo/tree/:branch
npx create-remix@latest ./my-app --template https://github.com/:username/:repo/tree/:branch/:directory
npx create-remix@latest ./my-app --template https://github.com/:username/:repo/archive/refs/tags/:tag.tar.gz
npx create-remix@latest ./my-app --template https://github.com/:username/:repo/releases/latest/download/:tag.tar.gz
npx create-remix@latest ./my-app --template https://example.com/remix-template.tar.gz
npx create-remix@latest ./my-app --template ./path/to/remix-template
npx create-remix@latest ./my-app --template ./path/to/remix-template.tar.gz

```

--------------------------------

### Example URLs generated by GET form with checkboxes

Source: https://v2.remix.run/docs/guides/data-writes

Shows the possible URL query strings the browser produces when the user selects different checkboxes in the preceding form.

```text
/search?brand=nike&color=black
/search?brand=nike&brand=reebok&color=white
```

--------------------------------

### NewProject form component

Source: https://v2.remix.run/docs/guides/data-writes

A basic HTML form for creating a project, using `method="post"` and `action="/projects/new"`. This is the starting point for the mutation example.

```tsx
export default function NewProject() {
  return (
    <form method="post" action="/projects/new">
      <p>
        <label>
          Name: <input name="name" type="text" />
        </label>
      </p>
      <p>
        <label>
          Description:
          <br />
          <textarea name="description" />
        </label>
      </p>
      <p>
        <button type="submit">Create</button>
      </p>
    </form>
  );
}
```

--------------------------------

### Install Express, Remix adapter, and cross-env

Source: https://v2.remix.run/docs/start/quickstart

Installs the Express server and the Remix Express adapter, removes the default remix-serve package, and sets up cross-env for running in production mode. Run this before creating the Express server for your Remix Vite build.

```bash
npm i express@4 @remix-run/express cross-env

# not going to use this anymore
npm uninstall @remix-run/serve

```

--------------------------------

### Show create-remix help

Source: https://v2.remix.run/docs/other-api/create-remix

Displays a full list of available commands and flags for create-remix.

```bash
npx create-remix@latest --help

```

--------------------------------

### Express server with HTTPS using key.pem and cert.pem

Source: https://v2.remix.run/docs/guides/local-tls

Example of setting up an Express server with HTTPS using the generated key and certificate. Replace the placeholder paths and add your app setup.

```javascript
import fs from "node:fs";
import https from "node:https";
import path from "node:path";

import express from "express";

const BUILD_DIR = path.resolve(__dirname, "build");
const build = require(BUILD_DIR);

const app = express();

// ... code setting up your express app goes here ...

const server = https.createServer(
  {
    key: fs.readFileSync("path/to/key.pem"),
    cert: fs.readFileSync("path/to/cert.pem"),
  },
  app
);

const port = 3000;
server.listen(port, () => {
  // ... code to run after your server is running goes here ...
});

```

--------------------------------

### Invoke create-remix with different package managers

Source: https://v2.remix.run/docs/other-api/create-remix

Shows how to run create-remix using npm, Yarn, pnpm, or Bun for managing the installation process.

```bash
npm create remix@latest <projectDir>
# or
yarn create remix@latest <projectDir>
# or
pnpm create remix@latest <projectDir>
# or
bunx create-remix@latest <projectDir>

```

--------------------------------

### Custom app server with broadcastDevReady

Source: https://v2.remix.run/docs/other-api/dev

Example Express server setup that calls broadcastDevReady when the server is ready. For CloudFlare, use logDevReady instead because broadcastDevReady uses fetch which is not supported outside request handling.

```javascript
import path from "node:path";

import { broadcastDevReady } from "@remix-run/node";
import express from "express";

const BUILD_DIR = path.resolve(__dirname, "build");
const build = require(BUILD_DIR);

const app = express();

// ... code for setting up your express app goes here ...

app.all("*", createRequestHandler({ build }));

const port = 3000;
app.listen(port, () => {
  console.log(`👉 http://localhost:${port}`);

  if (process.env.NODE_ENV === "development") {
    broadcastDevReady(build);
  }
});

```

--------------------------------

### useFormAction usage example

Source: https://v2.remix.run/docs/hooks/use-form-action

Shows how to import and use useFormAction to get the closest route URL and a URL with an appended action like 'destroy'. The first call returns the closest route URL, the second appends 'destroy'.

```javascript
import { useFormAction } from "@remix-run/react";

function SomeComponent() {
  // closest route URL
  const action = useFormAction();

  // closest route URL + "destroy"
  const destroyAction = useFormAction("destroy");
}

```

--------------------------------

### Update package.json scripts to use Remix commands

Source: https://v2.remix.run/docs/guides/migrating-react-router-app

Replace your existing build and dev scripts with Remix CLI commands. The 'start' script uses 'remix-serve' to run the built server. After this change, the app is server-rendered and builds much faster.

```json
{
  "scripts": {
    "build": "remix build",
    "dev": "remix dev",
    "start": "remix-serve build/index.js",
    "typecheck": "tsc"
  }
}

```

--------------------------------

### createRequestHandler with Express

Source: https://v2.remix.run/docs/other-api/adapter

Full example with Express. The handler must handle all verbs (GET, POST, etc.) and passes the build directory output from `remix build` and `remix dev`. `getLoadContext` returns an object available as `context` in loaders and actions.

```javascript
const {
  createRequestHandler,
} = require("@remix-run/express");
const express = require("express");

const app = express();

// needs to handle all verbs (GET, POST, etc.)
app.all(
  "*",
  createRequestHandler({
    // `remix build` and `remix dev` output files to a build directory, you need
    // to pass that build to the request handler
    build: require("./build"),

    // Return anything you want here to be available as `context` in your
    // loaders and actions. This is where you can bridge the gap between Remix
    // and your server
    getLoadContext(req, res) {
      return {};
    },
  })
);

```

--------------------------------

### Define breadcrumbs in route handles

Source: https://v2.remix.run/docs/guides/breadcrumbs

Define a breadcrumb attribute on the route's handle. The first example shows a parent route breadcrumb linking to /parent, and the second shows a child route breadcrumb linking to /parent/child. The attribute name is arbitrary; this guide uses 'breadcrumb'.

```tsx
export const handle = {
  breadcrumb: () => <Link to="/parent">Some Route</Link>,
};

```

```tsx
export const handle = {
  breadcrumb: () => (
    <Link to="/parent/child">Child Route</Link>
  ),
};

```

--------------------------------

### Asset import example

Source: https://v2.remix.run/docs/guides/migrating-react-router-app

Shows how assets like images are typically imported in bundlers like Create React App, returning a string filepath.

```javascript
import logo from "./logo.png";

export function Logo() {
  return <img src={logo} alt="My logo" />;
}

```

--------------------------------

### Use a community Remix stack with create-remix --template

Source: https://v2.remix.run/docs/guides/templates

Run this command to create a new Remix app using a community stack, where :username/:repo is the GitHub username and repository. Remember to tag your stack with the remix-stack topic if you share it.

```bash
npx create-remix@latest --template :username/:repo

```

--------------------------------

### Define and use local env vars with remix dev

Source: https://v2.remix.run/docs/guides/envvars

Local development environment variable setup with remix dev. Create an .env file in the project root)Skip it — just wait. Then define your secrets in .env format. They become available in loaders/actions via process.env after starting the dev server. Do not commit .env to git because it contains secrets.

```bash
touch .env

```

```env
SOME_SECRET=super-secret

```

```javascript
export async function loader() {
  console.log(process.env.SOME_SECRET);
}

```

--------------------------------

### Install @mdx-js/rollup

Source: https://v2.remix.run/docs/guides/vite

Install the official MDX Rollup plugin.

```bash
npm install -D @mdx-js/rollup

```

--------------------------------

### Create project with a template

Source: https://v2.remix.run/docs/other-api/create-remix

Uses the --template flag to create the application based on a different setup, such as a GitHub repo or URL.

```bash
npx create-remix@latest --template <templateUrl>

```

--------------------------------

### Run app with remix-serve

Source: https://v2.remix.run/docs/start/quickstart

Runs the built app with remix-serve. Note the dash in remix-serve. The app will be available at http://localhost:3000.

```bash
# note the dash!
npx remix-serve build/server/index.js

```

--------------------------------

### Routes with clientLoader and serverLoader

Source: https://v2.remix.run/docs/guides/single-fetch

Example route files for /a/b/c showing loaders for a, b, and c, where c exports a clientLoader that calls serverLoader after some async work. This demonstrates how routes with clientLoader opt out of the initial single fetch.

```tsx
// routes/a.tsx
export function loader() {
  return { data: "A" };
}

// routes/a.b.tsx
export function loader() {
  return { data: "B" };
}

// routes/a.b.c.tsx
export function loader() {
  return { data: "C" };
}

export function clientLoader({ serverLoader }) {
  await doSomeStuff();
  const data = await serverLoader();
  return { data };
}

```

--------------------------------

### Install global Node polyfills in Vite config

Source: https://v2.remix.run/docs/guides/vite

Install global Node polyfills by calling installGlobals at the top of the Vite config, since the Remix Vite plugin does not install them automatically.

```ts
import { vitePlugin as remix } from "@remix-run/dev";
+import { installGlobals } from "@remix-run/node";
import { defineConfig } from "vite";

+installGlobals();

export default defineConfig({
  plugins: [remix()],
});

```

--------------------------------

### Setting Up the Signup Form with Form component

Source: https://v2.remix.run/docs/guides/form-validation

Creates a basic signup form using the Form component from Remix with email and password inputs and a submit button.

```tsx
import { Form } from "@remix-run/react";

export default function Signup() {
  return (
    <Form method="post">
      <p>
        <input type="email" name="email" />
      </p>

      <p>
        <input type="password" name="password" />
      </p>

      <button type="submit">Sign Up</button>
    </Form>
  );
}

```

--------------------------------

### Call installGlobals for custom app server

Source: https://v2.remix.run/docs/start/v2

Install the fetch globals for your app server. If you are using remix-serve, this is not required; if you use a custom server, call this at startup.

```javascript
import { installGlobals } from "@remix-run/node";

installGlobals();
```

--------------------------------

### Install concurrently

Source: https://v2.remix.run/docs/styling/postcss

Install the `concurrently` package to run multiple npm scripts in parallel.

```bash
npm add -D concurrently

```

--------------------------------

### Install SASS

Source: https://v2.remix.run/docs/styling/postcss

Install the SASS tool to generate CSS files from SASS/LESS files.

```bash
npm add -D sass

```

--------------------------------

### Install Vite as a development dependency

Source: https://v2.remix.run/docs/guides/vite

Install Vite as a development dependency for the Remix app.

```bash
npm install -D vite

```

--------------------------------

### Initialize Remix with CLI

Source: https://v2.remix.run/docs/start/quickstart

Use the create-remix CLI to initialize a batteries-included project.

```bash
npx create-remix@latest
```

--------------------------------

### Initialize app/routes.ts

Source: https://v2.remix.run/docs/start/future-flags

Create the app/routes.ts file and export an empty array to verify the configuration is being picked up.

```bash
touch app/routes.ts
```

```typescript
import type { RouteConfig } from "@remix-run/route-config";

export default [] satisfies RouteConfig;
```
Tokens:
Raw