I had a project made in Sapper and attempting to recreate it in sveltekit.
Unfortunately I'm unable to use my expressjs server code I have because I'm unable to get vite to start the app using my own custom expressjs server.
I created a sveltekit using the npm create svelte@latest nodeserver
I read and followed the instruction provided in the docs HERE
Navigated to the project root and entered "npm run dev"
The kit app started and in my homepage there is a button to click and a fetch request will fire. I get error that the resource not found. It seems that vite try to find the resource in BUILD/.... which the vite server. My server is located in the main folder - named it myserver.js - and I don't understand how vite will know that I want to use a custom server if I don't add a flag or anything in the configuration file.
There is no mention of anything in the doc related to how to set it up. No online tutorial that talk about it. All the online resource, skip that part and just start the app.
My server code imported the handler.js from the build folder as mentioned in the docs
import {handler} from './build/handler.js';
import express from 'express';
const app = express();
app.get("/", (req, res)=>{
console.log("====server index====")
res.end("homeok")
})
// add a route that lives separately from the SvelteKit app
app.get('/healthcheck', (req, res) => {
res.json({"letsgo":"server is here in healthcheck"});
});
// let SvelteKit handle everything else, including serving prerendered pages and static assets
app.use(handler);
app.get("/expresskit", (req, res)=>{
res.json({"expresskit" : "expresskit is saying hi"})
})
app.listen(3000, () => {
console.log('listening on port 3000');
});
Then added this to package.json to start the server
"start" : "node ./server"
My home page in +page.svelte has a button and a fetch function
<script>
import Counter from './Counter.svelte';
import welcome from '$lib/images/svelte-welcome.webp';
import welcome_fallback from '$lib/images/svelte-welcome.png';
async function getexpresskit(){
let response = await fetch('http://localhost:3000/expresskit')
let serverdata = await response.json()
console.log("-------------", serverdata)
} //end getexpresskit
</script>
<svelte:head>
<title>Home</title>
<meta name="description" content="Svelte demo app" />
</svelte:head>
<button on:click={getexpresskit}>get expresskit</button>
I left everything at the minimum. I didn't change anything.
It should work out of the box but it is giving me an error when click the button:
Access to fetch at 'http://localhost:3000/expresskit' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
fetcher.js?v=bb1e8107:54 GET http://localhost:3000/expresskit net::ERR_FAILED 404 (Not Found)
window.fetch @ fetcher.js?v=bb1e8107:54
getexpresskit @ +page.svelte:9
fetcher.js?v=bb1e8107:54 Uncaught (in promise) TypeError: Failed to fetch
at window.fetch (fetcher.js?v=bb1e8107:54:10)
The server is producing this cors error:
localhost/:1 Access to fetch at 'http://localhost:3000/expresskit' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
:3000/expresskit:1 Failed to load resource: net::ERR_FAILED
fetcher.js?v=bb1e8107:54 Uncaught (in promise) TypeError: Failed to fetch
at window.fetch (fetcher.js?v=bb1e8107:54:10)
at HTMLButtonElement.getexpresskit (+page.svelte:9:23)
And in my server console I get this error
Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'D:\mycode\sveltekit\previousapps\customnodeserver\nodeserver\build\server\chunks\0-940abe3b.js' imported from D:\mycode\sveltekit\previousapps\customnodeserver\nodeserver\build\server\manifest.js
It indicates that the dev is looking for the server in the build folder but my server is in the main folder not in the build folder.
I started the app by typing : npm run dev and started the server by typing npm start
What am I doing wrong?