Using IPX with solid-start

January 27, 2024 at 9:36 PM

Imge optimization library integration with solid start.

IPX is an image optimization tool from the unjs team. unjs/ipx It powers nuxtjs' Image component if you're familiar. Having an image service like ipx is a very nice tool to have for a website where you serve user generated content or cms content. You can use the image option filters to resize or reformat images for faster page load. Integrating ipx in a solidstart app is quite straightforward.

1. Create a new route directory for image processing. I used /img/

2. create the solid route handler [...ipx].ts

3. setup the route handler to pass the request on to the ipx image service

[...ipx].ts

import { APIEvent } from "@solidjs/start/server/types";
import { createIPX, ipxFSStorage, ipxHttpStorage, createIPXH3App } from "ipx";

import { toWebHandler } from "h3";

const ipx = createIPX({
	storage: ipxFSStorage({ dir: "./uploads" }),
	httpStorage: ipxHttpStorage({ domains: ["localhost:3000"] }),
});

const handler = toWebHandler(createIPXH3App(ipx));

export const GET = (e: APIEvent) => {
	const parts = e.request.url.split(e.request.headers.get("host") + "/img");
	return handler(
		new Request(parts[0] + e.request.headers.get("host") + parts[1])
	);
};

Because we want our images to be nested under the /img/ route we have to do some work to remove that part of the request to ipx as it doesn't understand it that way.

Now you can put files in the uploads folder and generate urls like /img/w_200/test.jpg and test.jpg from the uploads folder will be returned with width 200.