I have a SvelteKit app using dynamic routes.
When I build with adapter-node
, and then run npm run preview
, the website works correctly locally.
However, once deployed to my web server when I visit /bootcamp
, params
returns as {}
and url.pathname
returns //bootcamp
(notice additional leading slash).
Here is how I deployed:
Uploaded the
/build
folder andpackage.json
to the/courses
subfolder of my website https://www.valuespreadsheet.com, and installed the dependencies usingnpm install
.Used the SPanel NodeJS Manager to deploy a NodeJS app on port 3000.
Ran
node build
to run the appVisited https://www.valuespreadsheet.com/courses/bootcamp, and was presented with a Svelte 500 error page. In my terminal I saw the console logs as mentioned earlier:
params: {}
andurl.pathname: //bootcamp
Here is a partial snippet from my +layout.svelte.ts
file:
/** @type {import('./$types').LayoutServerLoad} */
export async function load({ url, params }) {
console.log("Request URL:", url.pathname);
console.log("Layout params", params)
Here is my svelte.config.js
file:
import adapter from '@sveltejs/adapter-node';
import { vitePreprocess } from '@sveltejs/kit/vite';
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
preprocess: vitePreprocess(),
kit: {
adapter: adapter(),
alias: {
'$routes': './src/routes',
'$routes/*': './src/routes/*',
},
},
paths: {
base: '/courses',
relative: false,
},
};
export default config;
Already tried changing the base
and relative
values in the config, which seemed to have no effect at all.
If it is of any help, my server is Apache based.
I already wasted multiple hours on this. What can possibly be the problem?
Have you checked your
ORIGIN
environment variable?https://kit.svelte.dev/docs/adapter-node#environment-variables-origin-protocolheader-and-hostheader
I encountered a similar issue, when I had a trailing slash there. Removing the trailing slash from
.env
worked for me.