Project Structure

Learn where do modules and components belong to.

├── node_modules/
├── src/
│   ├── app/ — Directory for Oxide routes.
│   ├── lib/ — Directory for your application's library.
│   ├── routers/ — Directory for ORPC routers.
│   ├── app.css — Main styling entry.
│   ├── app.svelte — Main app component.
│   ├── client.ts — Client side app entry.
│   └── server.ts — Server side app entry.
├── .gitignore
├── .prettierrc
├── package.json
├── README.md
├── tsconfig.json
└── vite.config.ts

src/app/ - Routes directory

The src/app directory is the heart of your full-stack application. You should add there all the view and API routes.

src/lib/ - Application's library directory

The src/lib directory is where you should put your reusable UI components and utilities.

src/routers/ - Routers directory

The src/routers directory is where you should add all ORPC routers to be automatically served unter /rpc path.

// src/routers/example.ts
import { os } from "@orpc/server";

export default {
  ping: os.handler(() => "pong"),
};

Then in your Svelte views and loaders you'll be able to:

// src/app/example.svelte
<script lang="ts" module>
  import { client } from '$orpc'

  // Server side loading
  export async function load() {
    return {
      ping: await client.example.ping()
    }
  }
</script>

<script lang="ts">
  import { client } from '$orpc'
  import { onMount } from 'svelte'

  let { data } = $props()

  let ping = $state<string>(data.ping)

  // Client side fetching
  onMount(() => {
    client.example.ping().then((result) => {
      ping = result
    })
  })
</script>