Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1541

How to Properly Read a Static File in SvelteKit Using a Server-Side Load Function?

$
0
0

I am working on a SvelteKit project where I want to dynamically render HTML content based on a route parameter (e.g., /2023, /2022). I have static HTML files (2012.html, 2013.html, etc.) stored in the src/assets directory, and I'm trying to read them in the +page.server.ts file using the fetch API.

folder archtecuter

What I Am Trying to Achieve

For each route like /2023 or /2022, I want to dynamically load an HTML file corresponding to the year from the server and render it on the page. For example, navigating to /2023 should fetch 2023.html from the src/assets or any folder and display its content. I just would like to avoid using static/ folder because I dont want to expose html like that and i do want users to visit proper svelte page.

My Setup

Here is my server-side load function in +page.server.ts:

import type { PageServerLoad } from './$types';export const load: PageServerLoad = async ({ params, fetch }) => {  try {    // Use fetch to get the HTML content from the server    console.log(params.year) //works e.g."2012"    const {year} = params    const response = await fetch(`src/assets/${year}.html`); // what is the proper method to get file?    // Check if the response is OK (status 200-299)    if (!response.ok) {      console.error(`Error fetching the HTML file: ${response.status} ${response.statusText}`);      return { dom: { html: '' } };    }    // Read the response as text    const html = await response.text();    // Log the HTML content for debugging    console.log('HTML content:', html);    return {      dom: { html },    };  } catch (error) {    console.error('Error reading the HTML file:', error);    return {      dom: { html: '' }, // Return empty string on any error    };  }};

And my corresponding Svelte page component +page.svelte looks like this:

<script lang="ts">  import type { PageData } from './$types';  export let data: PageData;</script><pre>{JSON.stringify(data, null, 2)}</pre>

The Problem

When I try to access any of the routes, I consistently get a 500 Internal Server Error. Here are the logs I receive on each reload:

Error fetching the HTML file: 500 Internal Server ErrorError fetching the HTML file: 500 Internal Server Error2:28:49 AM [vite] page reload src/routes/[year]/+page.server.tsError fetching the HTML file: 500 Internal Server Error

Viewing all articles
Browse latest Browse all 1541

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>