Remix Hono SPA

Directory Structure

.
├── app
│   ├── root.tsx
│   └── routes
│       └── _index.tsx
├── package.json
├── server
│   └── index.ts
├── tsconfig.json
└── vite.config.ts

Install

pnpm

pnpm add hono hono-remix-adapter

app/root.tsx

Outlet

<Outlet>を使用することにより、親ルートの一致する子ルートをレンダリング。

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>
        <Outlet />

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

app/routes/_index.tsx

tsx

import type { MetaFunction } from '@remix-run/node'
import { useState } from 'react'
import { hc } from 'hono/client'
import { AppType } from 'server'

export const meta: MetaFunction = () => {
  return [{ title: 'Remix Hono🔥 SPA' }, { name: 'description', content: 'Welcome to Remix Hono🔥 SPA' }]
}

export default function Index() {
  const [message, setMessage] = useState('')

  const onSubmit = async () => {
    const client = hc<AppType>('/')
    const res = await client.api.$get()
    const data = await res.json()
    setMessage(data.message)
  }
  return (
    <>
      <h1>Remix + Hono🔥 SPA</h1>
      <button onClick={onSubmit}>Get Message</button>
      <h1>{message}</h1>
    </>
  )
}

server/index.ts

import { Hono } from 'hono'

const app = new Hono()

const routes = app.get('/api', (c) => {
  return c.json({ message: 'Remix + Hono🔥' })
})

export type AppType = typeof routes

export default app

Remix Hono SPA ​

Directory Structure ​

Install ​

app/root.tsx ​

app/routes/_index.tsx ​

server/index.ts ​

Remix Hono SPA

Directory Structure

Install

app/root.tsx

app/routes/_index.tsx

server/index.ts