@virke/remix-adapter

Remix server adapter for Virke/Fastly Compute.

Features

• Static assets → Object Storage (served free via VCL)
• SSR routes → Fastly Compute service (StarlingMonkey Wasm)
• Virke bindings available in loaders and actions: context.virke.db, context.virke.kv, context.virke.os3

Installation

bun add -D @virke/remix-adapter
bun add @virke/runtime

Configuration

1. Configure Vite

In vite.config.ts:

import { vitePlugin as remix } from '@remix-run/dev'
import { defineConfig } from 'vite'
import { virkeRemixConfig } from '@virke/remix-adapter'

export default defineConfig({
  plugins: [
    remix({
      ...virkeRemixConfig({
        buildDirectory: 'build/client',     // Static assets
        serverBuildPath: 'build/server/index.js',  // SSR bundle
        publicPath: '/assets/'
      })
    })
  ]
})

2. Initialize Virke bindings

Create app/virke.server.ts:

import { initVirke } from '@virke/remix-adapter'

export const virke = initVirke({
  db: 'my-database',    // Virke DB name
  kv: 'my_kv_store',    // KV Store resource link name
  os3: 'my-bucket'      // Object Storage bucket
})

3. Create Fastly Compute entry point

Create build/server/server.js (or use the generator):

/// <reference types="@fastly/js-compute" />

import * as build from './index.js'
import { createRequestHandler } from '@virke/remix-adapter/server'
import { virke } from './virke.server.js'

const handleRequest = createRequestHandler({
  build,
  mode: process.env.NODE_ENV || 'production',
  getLoadContext: async () => ({ virke })
})

addEventListener('fetch', (event) => {
  event.respondWith(handleRequest(event.request))
})

Using Virke Bindings

Access Virke bindings through the loader/action context:

In loaders

app/routes/_index.tsx:

import { json } from '@remix-run/node'
import { useLoaderData } from '@remix-run/react'
import type { LoaderFunctionArgs } from '@remix-run/node'

export const loader = async ({ context }: LoaderFunctionArgs) => {
  const { virke } = context as { virke: ReturnType<typeof initVirke> }

  const users = await virke.db.query("SELECT * FROM users")
  const settings = await virke.kv.getJson("app:settings")

  return json({ users, settings })
}

export default function Index() {
  const { users, settings } = useLoaderData<typeof loader>()

  return (
    <div>
      <h1>Users</h1>
      <pre>{JSON.stringify(users, null, 2)}</pre>
    </div>
  )
}

In actions

app/routes/upload.tsx:

import { json } from '@remix-run/node'
import type { ActionFunctionArgs } from '@remix-run/node'

export const action = async ({ request, context }: ActionFunctionArgs) => {
  const { virke } = context as { virke: ReturnType<typeof initVirke> }

  const formData = await request.formData()
  const file = formData.get('file')

  if (file instanceof File) {
    const buffer = await file.arrayBuffer()
    await virke.os3.put(`uploads/${file.name}`, buffer, file.type)
    return json({ success: true })
  }

  return json({ error: 'No file provided' }, { status: 400 })
}

Deployment

1. Build the app

bun run build

2. Copy virke.server.ts to build output

cp app/virke.server.ts build/server/virke.server.js

3. Deploy static assets to Object Storage

virke deploy static build/client

4. Deploy SSR server to Fastly Compute

cd build/server
fastly compute build
fastly compute deploy

Build Helper

You can use the generateFastlyEntry helper to create the Compute entry point programmatically:

import { generateFastlyEntry } from '@virke/remix-adapter'
import { writeFileSync } from 'fs'
import { join } from 'path'

const { entryPoint, packageJson, fastlyToml, serverDir } = generateFastlyEntry()

writeFileSync(join(serverDir, 'server.js'), entryPoint)
writeFileSync(join(serverDir, 'package.json'), packageJson)
writeFileSync(join(serverDir, 'fastly.toml'), fastlyToml)

TypeScript Support

Add to remix.env.d.ts:

import type { VirkeDB, VirkeKV, VirkeOS3 } from '@virke/runtime'

declare module '@remix-run/server-runtime' {
  export interface AppLoadContext {
    virke: {
      db: VirkeDB
      kv: VirkeKV
      os3: VirkeOS3
    }
  }
}

Architecture

• Static files (CSS, JS, images) are uploaded to Fastly Object Storage and served via free VCL service
• SSR routes run on a dedicated Fastly Compute service using StarlingMonkey (JS runtime compiled to Wasm)
• Virke bindings provide access to Virke DB (SQL), Virke KV (key-value), and Virke OS3 (object storage)

License

MIT