Im trying to build SvelteKit
project and host it on a server with nginx
, using @sveltejs/adapter-static
. The app works fine when developing locally but when build it and upload it im getting 500 JSON.parse: unexpected character at line 1 column 1 of the JSON data
for some of the routes.
The routes in problem are sourcing their data from a json
file (part of the project).
My folder structure is:
src/
├── data/
│ └── my_data.json
└── routes/
├── api/
│ └── something.json.js
└── area/
└── [method].svelte
something.json.js
import * as siteData from "../data/my_data.json";
export async function GET({ url }) {
const param = url.searchParams.get("method");
const body = siteData[param];
return {
body
}
})
[method].svelte
<script context="module">
export const load = async ({ params, fetch }) => {
const response = await fetch(`/api/something.json?method=${params.method}`);
const posts = await response.json();
return {
props: {
posts
}
};
};
</script>
<script>
export let posts;
</script>
<div>
<!-- do something with "data" here -->
</div>
svelte.config.js
import adapter from '@sveltejs/adapter-static';
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
adapter: adapter({
pages: 'build',
assets: 'build',
fallback: 'index.html',
precompress: false
})
}
};
export default config;
nginx.conf
http {
server {
listen 80;
include /etc/nginx/mime.types;
location / {
root /usr/share/nginx/html;
try_files $uri $uri/index.html $uri.html /index.html;
}
}
}
With this setup:
My (wild) guesses:
- this will never work because there is no actual back-end to handle the endpoint code
nginx
misconfiguration when trying to call/serve/api/something.json