Urami

Appearance

Solid Start ​

Example

Here're the steps to integrate Urami with Solid Start.

Install ​

There're 2 packages need to be installed in order to use Urami with SvelteKit. @urami/core for server endpoints, and @urami/solid for client-side components.

Additionally, you need to install sharp as well. This is because @urami/core uses sharp to optimize images, and it's a peer dependency so it won't installed by default.

sh
$ npm add @urami/core @urami/solid sharp
$ npm add @urami/core @urami/solid sharp
sh
$ pnpm add @urami/core @urami/solid sharp
$ pnpm add @urami/core @urami/solid sharp
sh
$ yarn add @urami/core @urami/solid sharp
$ yarn add @urami/core @urami/solid sharp
sh
$ bun add @urami/core @urami/solid sharp
$ bun add @urami/core @urami/solid sharp

Server endpoints ​

At directory src/routes/api/_image.ts, which is a server endpoint for Urami. This endpoint will be used to serve optimized images.

js
import { createRequestHandler } from "@urami/core";

const handler = createRequestHandler({
  remoteDomains: ["demo.rayriffy.com"],
});

export const GET = ({ request }) => handler(request);
import { createRequestHandler } from "@urami/core";

const handler = createRequestHandler({
  remoteDomains: ["demo.rayriffy.com"],
});

export const GET = ({ request }) => handler(request);
ts
import { createRequestHandler } from "@urami/core";

import type { APIEvent } from "solid-start/api";

const handler = createRequestHandler({
  remoteDomains: ["demo.rayriffy.com"],
});

export const GET = ({ request }: APIEvent) => handler(request);
import { createRequestHandler } from "@urami/core";

import type { APIEvent } from "solid-start/api";

const handler = createRequestHandler({
  remoteDomains: ["demo.rayriffy.com"],
});

export const GET = ({ request }: APIEvent) => handler(request);

For server configuration, please refer to Configuration.

Client-side component ​

Import Image component from @urami/solid and use it like next/image.

tsx
// index.jsx
import Image from "@urami/solid";

export default function Page() {
  return (
    <Image
      src="https://demo.rayriffy.com/tom-scott.jpg"
      width={801}
      height={801}
      alt="Tom Scott"
      class="rounded-xl shadow-md"
    />
  );
}
// index.jsx
import Image from "@urami/solid";

export default function Page() {
  return (
    <Image
      src="https://demo.rayriffy.com/tom-scott.jpg"
      width={801}
      height={801}
      alt="Tom Scott"
      class="rounded-xl shadow-md"
    />
  );
}

For client-side configuration, please refer to Solid.