N Akita's Blog

Remix ​

Directory Structure ​

.
├── app
│   └── root.tsx
├── package.json
├── pnpm-lock.yaml
├── tsconfig.json
└── vite.config.ts

Prepare ​

sh
mkdir remix
cd remix

Install runtime dependencies ​

sh
pnpm add @remix-run/node @remix-run/react @remix-run/serve isbot@4 react react-dom

Install dev dependencies ​

sh
pnpm add -D @remix-run/dev vite @types/react

Vite Config ​

sh
touch vite.config.ts
ts
import { vitePlugin as remix } from '@remix-run/dev'
import { defineConfig } from 'vite'

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

TSConfig ​

json
{
  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "ES2022"],
    "isolatedModules": true,
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "resolveJsonModule": true,
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "baseUrl": ".",
    "noEmit": true,
    "paths": {
      "~/*": ["./app/*"]
    }
  }
}

The Root Route ​

sh
mkdir app
touch app/root.tsx
tsx
import { Links, Meta, Outlet, Scripts } from '@remix-run/react'

export default function App() {
  return (
    <html>
      <head>
        <link rel='icon' href='data:image/x-icon;base64,AA' />
        <Meta />
        <Links />
      </head>
      <body>
        <h1>Hello world!</h1>
        <Outlet />

        <Scripts />
      </body>
    </html>
  )
}

Package.json ​

json
{
  ...
  "scripts": {
    "dev": "remix vite:dev --host"
  }
  ...
}
sh
pnpm dev

Accesse Browser ​

http://localhost:5173

img

SPA Mode ​

ts
import { vitePlugin as remix } from '@remix-run/dev'
import { defineConfig } from 'vite'

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

© nakita-ypm.github.io/blog