Remix

Plugin Details

Plugin Type:

Method Handler
Transport:

HTTP
Works with:

Remix

Prim+RPC supports Remix by defining an API route. You may also choose to use Remix with an Express server, for which Prim+RPC also has a plugin. The first step is to create some function the server that you’d like to expose to the client:

app
functions
index.ts

export function hello() {
	return "Hi from Prim+RPC!"
}
hello.rpc = true
 
export default hello

You may configure Prim+RPC with Remix by using a catch-all route in your app directory. You may name this route anything that you’d like, just remember to set the corresponding Prim+RPC prefix option to match:

app
routes
prim.$
route.ts

import { createPrimServer } from "@doseofted/prim-rpc"
import { primRemix } from "@doseofted/prim-rpc-plugins/remix"
import * as module from "../../functions"
 
const prim = createPrimServer({ module })
 
export const { loader, action } = primRemix({ prim })

You may choose to name your route app/routes/prim.$/route.ts or app/routes/prim.$.ts, both are valid route names in Remix.

Your Prim+RPC server is now set up! Remix is a fullstack framework that can run on both server and client, which means the Prim+RPC client may be called on the server as well as the client.

On the server, you can avoid a network request from the client by conditionally passing the module. Below is an example of how you may do so, using the Fetch API method plugin:

app
routes
prim.$
client.ts

import { createPrimClient } from "@doseofted/prim-rpc"
import { createMethodPlugin } from "@doseofted/prim-rpc-plugins/browser"
import type * as Module from "../../functions"
 
const endpoint = import.meta.env.SSR ? undefined : "/prim"
const module = import.meta.env.SSR ? import("../../functions") : null
const methodPlugin = createMethodPlugin()
export const client = createPrimClient<Promise<typeof Module>>({ endpoint, module, methodPlugin })

Now this exported client may used from anywhere in your project. We’ll demonstrate usage of the client from both the server and the client.

app
routes
_index.tsx

import { useState, useEffect } from "react"
import { client } from "./prim.$/client"
import type { LoaderFunction } from "@remix-run/node"
 
export const loader: LoaderFunction = async () => {
	const greeting = await client.hello()
	return { greeting }
}
 
export default function Page() {
	const { greeting: greetingServer } = useLoaderData<typeof loader>()
	const [greetingClient, setGreetingClient] = useState("")
	useEffect(() => {
		client.hello().then(given => setGreetingClient(given))
	}, [])
	return (
		<div>
			<p>Server rendered: {greetingServer}</p>
			<p>Client rendered: {greetingClient}</p>
		</div>
	)
}

Now we are all set up!

You may also choose a compatible method plugin:

Axios (planned) Capacitor (planned) Fetch API

Report an Issue

No sections available.

Prim+RPC : a project by Ted Klingenberg