I'm trying to get SvelteKit working on Google Cloud Shell (using the terminal, cloud editor, and web preview feature). [Context: I'm just using Cloud Shell as a dev environment due to policies at my work preventing a local install on my corporate laptop. Will then be deploying to Google Cloud Run for production.]. I'm an experienced front end web dev but brand new to Svelte and SvelteKit.
I've tried using npm run build and then either npm run preview or npm run dev, but always get a 404 error in the browser and the following terminal output:
$ npm run preview
> basic-app@0.0.1 preview
> vite preview
➜ Local: http://localhost:4173/
➜ Network: use --host to expose
➜ press h + enter to show help
SvelteKitError: Not found: /
at resolve2 (file:///home/my_google_username/basic-app/.svelte-kit/output/server/index.js:2900:18)
at resolve (file:///home/my_google_username/basic-app/.svelte-kit/output/server/index.js:2732:34)
at #options.hooks.handle (file:///home/my_google_username/basic-app/.svelte-kit/output/server/index.js:2975:71)
at respond (file:///home/my_google_username/basic-app/.svelte-kit/output/server/index.js:2730:43)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
status: 404,
text: 'Not Found'
}
The .svelte-kit folder (in my root) contains no generated HTML or CSS which I've been led to believe it should, and the build folder (also in root) doesn't contain any either (has some generated JS files with random names, deep in the _app subfolder). So looks like the build is not working, but doesn't have any errors. Build output is:
$ npm run build
> ui-expert-chat@0.0.1 build
> vite build
vite v5.2.2 building SSR bundle for production...
✓ 78 modules transformed.
vite v5.2.2 building for production...
✓ 59 modules transformed.
.svelte-kit/output/client/_app/version.json 0.03 kB │ gzip: 0.05 kB
.svelte-kit/output/client/.vite/manifest.json 1.86 kB │ gzip: 0.41 kB
.svelte-kit/output/client/_app/immutable/entry/start.CyzQXPhu.js 0.07 kB │ gzip: 0.08 kB
.svelte-kit/output/client/_app/immutable/nodes/0.f439nqYd.js 0.60 kB │ gzip: 0.39 kB
.svelte-kit/output/client/_app/immutable/nodes/1.VihWjLz3.js 1.02 kB │ gzip: 0.59 kB
.svelte-kit/output/client/_app/immutable/chunks/scheduler.BvLojk_z.js 2.16 kB │ gzip: 1.02 kB
.svelte-kit/output/client/_app/immutable/chunks/index.3yJoD6ZP.js 5.40 kB │ gzip: 2.29 kB
.svelte-kit/output/client/_app/immutable/entry/app.iEQ8A2NK.js 6.00 kB │ gzip: 2.45 kB
.svelte-kit/output/client/_app/immutable/chunks/entry.BAp3pnzt.js 27.34 kB │ gzip: 10.78 kB
✓ built in 821ms
.svelte-kit/output/server/.vite/manifest.json 1.34 kB
.svelte-kit/output/server/entries/pages/_layout.svelte.js 0.24 kB
.svelte-kit/output/server/internal.js 0.31 kB
.svelte-kit/output/server/entries/fallbacks/error.svelte.js 1.18 kB
.svelte-kit/output/server/chunks/ssr.js 3.35 kB
.svelte-kit/output/server/chunks/exports.js 5.96 kB
.svelte-kit/output/server/chunks/internal.js 6.25 kB
.svelte-kit/output/server/index.js 93.24 kB
✓ built in 2.05s
Run npm run preview to preview your production build locally.
> Using @sveltejs/adapter-static
Wrote site to "build"
✔ done
My super-simple code and config files are:
index.svelte
<script>
// to be added
</script>
<main>
<h1>Hello World!</h1>
</main>
<style>
/* You can add CSS styles here */
main {
text-align: center;
padding: 50px;
font-family: Arial, sans-serif;
}
</style>
svelte.config.js
import adapter from '@sveltejs/adapter-static';
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: { adapter: adapter() },
};
export default config;
vite.config.js
import { sveltekit } from '@sveltejs/kit/vite';
/** @type {import('vite').UserConfig} */
const config = {
plugins: [
sveltekit()]
};
export default config;
app.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" sizes="48x48"/>
<link rel="apple-touch-icon" href="%sveltekit.assets%/apple-touch-icon-180x180.png">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#ffffff"> <!-- Adjust color as needed -->
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
layout.html
<script>
</script>
<slot />
installed versions
$npm list vite
basic-app@0.0.1 /home/my_google_username/basic_app
├─┬ @sveltejs/kit@2.5.4
│ ├─┬ @sveltejs/vite-plugin-svelte@3.0.2
│ │ ├─┬ @sveltejs/vite-plugin-svelte-inspector@2.0.0
│ │ │ └── vite@5.2.2 deduped
│ │ ├── vite@5.2.2 deduped
│ │ └─┬ vitefu@0.2.5
│ │ └── vite@5.2.2 deduped
│ └── vite@5.2.2 deduped
├─┬ vite-plugin-pwa@0.19.5
│ └── vite@5.2.2 deduped
└── vite@5.2.2
Not sure where I am going wrong, whether a rookie error in the above files, or some fundamental incompatibility with Google Cloud Shell? Thanks
Posting this as a community wiki so that others can benefit from it.
index.svelte has been deprecated for some time. It should be +page.svelte
You're absolutely right! In recent versions of SvelteKit, index.svelte is deprecated in favor of +page.svelte. This means your main application component should now be named +page.svelte.
Here's why the change was made:
+page.svelte clearly indicates it's the main application page. Flexibility: It allows for future features where you might have multiple entry points besides the main app.