reverse proxy for uploads

src/app.d.ts

@@ -1,6 +1,6 @@
 // See https://svelte.dev/docs/kit/types#app.d.ts
 
-import type { Strapi } from "$lib/server/strapi";
+import type { Strapi } from '$lib/server/strapi';
 
 // for information about these interfaces
 declare global {

src/hooks.server.ts

@@ -1,30 +1,22 @@
-import { env } from "$env/dynamic/private";
+import { env } from '$env/dynamic/private';
-import { Strapi } from "$lib/server/strapi";
+import { Strapi } from '$lib/server/strapi';
-import type { Handle, HandleServerError } from "@sveltejs/kit";
+import type { Handle, HandleServerError } from '@sveltejs/kit';
-import { randomUUID } from "crypto";
+import { randomUUID } from 'crypto';
 
-export const handleError: HandleServerError = async ({
+export const handleError: HandleServerError = async ({ error, event, message, status }) => {
-	error,
-	event,
-	message,
-	status,
-}) => {
 	const errorId = randomUUID();
 
 	console.error(error, { errorId, event, message, status });
 
 	return {
-		message: "An Internal Error Occurred",
+		message: 'An Internal Error Occurred',
-		errorId,
+		errorId
 	};
 };
 
 export const handle: Handle = async ({ event, resolve }) => {
 	event.locals = {
-		strapi: new Strapi(
+		strapi: new Strapi(`http://${env.STRAPI_HOST}:${env.STRAPI_PORT}`, env.STRAPI_TOKEN)
-			`http://${env.STRAPI_HOST}:${env.STRAPI_PORT}`,
-			env.STRAPI_TOKEN,
-		),
 	};
 
 	const response = await resolve(event);

src/lib/server/strapi/index.ts

@@ -1,31 +1,33 @@
-import { strapi, type StrapiClient } from "@strapi/client";
+import { strapi, type StrapiClient } from '@strapi/client';
 
 export class Strapi {
+	public readonly api: string;
+	public readonly uploads: string;
+
 	private readonly client: StrapiClient;
 
-	constructor(
+	constructor(url: string, auth: string) {
-		public readonly url: string,
+		this.api = `${url}/api`;
-		auth: string,
+		this.uploads = `${url}/uploads`;
-	) {
 		this.client = strapi({
-			baseURL: `${url}/api`,
+			baseURL: this.api,
-			auth: auth,
+			auth: auth
 		});
 	}
 
 	async Blogs() {
-		const blogs = this.client.collection("blogs");
+		const blogs = this.client.collection('blogs');
 
 		return await blogs.find({
-			populate: ["Header", "Topics"],
+			populate: ['Header', 'Topics']
 		});
 	}
 
 	async Blog(id: string) {
-		const blogs = this.client.collection("blogs");
+		const blogs = this.client.collection('blogs');
 
 		return await blogs.findOne(id, {
-			populate: ["Header", "Topics"],
+			populate: ['Header', 'Topics']
 		});
 	}
 }

src/routes/blog/+page.server.ts

@@ -1,5 +1,5 @@
-import { error } from "@sveltejs/kit";
+import { error } from '@sveltejs/kit';
-import type { PageServerLoad } from "./$types";
+import type { PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async ({ locals }) => {
 	const { strapi } = locals;
@@ -12,20 +12,20 @@ export const load: PageServerLoad = async ({ locals }) => {
 				id: post.documentId,
 				image: {
 					url: post.Header.formats.medium.url,
-					alt: post.Header.alternativeText,
+					alt: post.Header.alternativeText
 				},
 				title: post.Title,
 				body: post.Body,
 				topics: post.Topics.map((topic: { id: string; Topic: string }) => ({
 					id: topic.id,
-					name: topic.Topic,
+					name: topic.Topic
 				})),
-				published: post.publishedAt,
+				published: post.publishedAt
 			})),
-			meta,
+			meta
 		};
 	} catch (err) {
-		console.log("Uh-oh!");
+		console.log('Uh-oh!');
 		error(500, err.message);
 	}
 };

src/routes/blog/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { env } from '$env/dynamic/public';
 	import BlogCard from '$lib/components/BlogCard.svelte';
 	import type { PageProps } from './$types';
 
@@ -16,7 +15,7 @@
 	{#each posts as post (post.id)}
 		<BlogCard
 			id={post.id}
-			img={`${env.PUBLIC_STRAPI_HOST}${post.image.url}`}
+			img={post.image.url}
 			img-alt={post.image.alt}
 			title={post.title}
 			published={post.published}

src/routes/blog/[slug]/+page.server.ts

@@ -1,4 +1,4 @@
-import type { PageServerLoad } from "./$types";
+import type { PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async ({ locals, params }) => {
 	const { slug } = params;
@@ -12,16 +12,16 @@ export const load: PageServerLoad = async ({ locals, params }) => {
 			image: {
 				url: post.Header.url,
 				alt: post.Header.alternativeText,
-				caption: post.Header.caption,
+				caption: post.Header.caption
 			},
 			title: post.Title,
 			body: post.Body,
 			topics: post.Topics.map((topic: { id: string; Topic: string }) => ({
 				id: topic.id,
-				name: topic.Topic,
+				name: topic.Topic
 			})),
-			published: post.publishedAt,
+			published: post.publishedAt
 		},
-		meta,
+		meta
 	};
 };

src/routes/blog/[slug]/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { env } from '$env/dynamic/public';
 	import dayjs from 'dayjs';
 	import { compile } from 'mdsvex';
 	import type { PageProps } from './$types';
@@ -14,11 +13,7 @@
 		<p class="text-gray-500">{dayjs(post.published).format('DD MMMM YYYY')}</p>
 		<h1 class="text-4xl font-light">{post.title}</h1>
 	</div>
-	<img
+	<img class="aspect-4/2 w-full object-cover" src={post.image.url} alt={post.image.alt} />
-		class="aspect-4/2 w-full object-cover"
-		src={`${env.PUBLIC_STRAPI_HOST}${post.image.url}`}
-		alt={post.image.alt}
-	/>
 	<div class="w-full max-w-5xl px-4">
 		{#await compile(post.body)}
 			<div class="skeleton h-48 w-full"></div>

src/routes/uploads/[slug]/+server.ts

@@ -0,0 +1,8 @@
+import type { RequestHandler } from './$types';
+
+export const GET: RequestHandler = async ({ locals, params }) => {
+	const { slug } = params;
+
+	const response = await fetch(`${locals.strapi.uploads}/${slug}`);
+	return response;
+};