Tutorial 01

Install the realtime layer

Add LiveRPC to an existing SvelteKit app that runs on adapter-node.

Outcome

You will install the package, add the Vite plugin, wrap adapter-node, and create src/hooks.socket.ts for connection setup.

Install

Pick your package manager

Install the package first, then run init. The command updates Vite, wraps the Node adapter, and creates src/hooks.socket.ts if your app does not have one yet.

What this tutorial is building

The next pages build one chat route at src/routes/rooms/[roomId]. The server file chat.socket.ts lives beside +page.svelte, and the page imports the browser client generated from that file.

Terms

Install command

Select copies the matching setup snippet.

# Install the package in your SvelteKit app.
pnpm add liverpc

# Patch Vite and create src/hooks.socket.ts if needed.
pnpm exec liverpc init

# Pull in any package.json changes created by init.
pnpm install

Result: Your app now has the package dependency and the root integration files needed before a .socket.ts file can be imported from a page.

Note: The runtime targets a long-lived Node process because Socket.IO needs a server that can keep connections open.

Checkpoint

Run your normal SvelteKit check command and confirm a src/hooks.socket.ts file exists.

Next step

Vite

Let LiveRPC handle .socket.ts page imports

Pages import the sibling .socket.ts file directly. The LiveRPC Vite plugin changes that import into browser code before SvelteKit compiles the page.

Why the plugin runs before SvelteKit

The page will later import ./chat.socket as if it were normal TypeScript. The file itself is server code, so LiveRPC must replace the import before SvelteKit sends code to the browser.

Terms

Code focus: This is the only global wiring needed before the tutorial moves into src/routes/rooms/[roomId].

Lives in

vite.config.ts and svelte.config.js

root build setup and Node runtime setup · These files apply to the whole app. They let Svelte pages import sibling .socket.ts files and let the built Node server keep Socket.IO connections open.

Route map

vite.config.ts <- add realtime() before sveltekit()

svelte.config.js <- wrap adapter-node

typescript vite.config.ts · transform order

import { sveltekit } from '@sveltejs/kit/vite';
import { realtime } from 'liverpc/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    // Run first so page imports from .socket.ts become browser client code.
    realtime({ adapter: 'node' }),

    // SvelteKit now sees a normal browser module for the page import.
    sveltekit()
  ]
});

Lives in

vite.config.ts and svelte.config.js

root build setup and Node runtime setup · These files apply to the whole app. They let Svelte pages import sibling .socket.ts files and let the built Node server keep Socket.IO connections open.

Route map

vite.config.ts <- add realtime() before sveltekit()

svelte.config.js <- wrap adapter-node

javascript svelte.config.js · Node adapter wrapper

import adapter from 'liverpc/adapter-node';

export default {
  kit: {
    // Wrap adapter-node so the Socket.IO server is attached at runtime.
    adapter: adapter()
  }
};

Result: The app can now import .socket.ts files from Svelte pages and run the Socket.IO server from adapter-node output.

Checkpoint

Build once. If an unsupported adapter is configured, the build should fail before deployment.

Next: Contract

Run the safe realtime lab