How to host a sveltekit app #345

burggraf · 2023-11-30T04:06:02Z

burggraf
Nov 30, 2023

I've compiled my sveltekit app with npm run build and I can deploy the app to places like Cloudflare or Vercel, but I'd like to host the application by copying it to pb_public. It's all static html, css, and js so it should work just fine. But alas, it doesn't work, I just get a bunch of errors such as this:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

Can this be solved on Pockethost?

Note this works fine when running Pocketbase on localhost and navigating to http://127.0.0.1/8090.

benallfree · 2023-11-30T15:16:08Z

benallfree
Nov 30, 2023
Maintainer

This might be a bug. PocketHost is supposed to just be proxying requests to the PocketBase instance, but perhaps something is not working right.

1 reply

burggraf Dec 1, 2023
Author

This still isn't working. Is there something I can do to help troubleshoot this? I have a test project up at pockethost (pbsveltic).

benallfree · 2023-12-01T17:54:40Z

benallfree
Dec 1, 2023
Maintainer

@burggraf I just ran a test at https://receive-empty.pockethost.io and it appears content types are being served correctly.

<!-- index.html -->
<html>
  <head>
    <script src="./test.js"></script>
  </head>
  <body>
    Hello world
  </body>
</html>

// test.js
alert('hi')

0 replies

burggraf · 2023-12-01T18:06:35Z

burggraf
Dec 1, 2023
Author

Here's the generated Sveltekit code for index.html. See anything that would cause a problem here?

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<link rel="icon" href="./favicon.png" />
	<base href="/" />
	<meta name="viewport"
		content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<meta name="description" content="Supababase, Svelte, Ionic">

	<meta name="format-detection" content="telephone=no" />
	<meta name="msapplication-tap-highlight" content="no" />
	<meta name="msapplication-TileColor" content="#da532c">

	<!-- add to homescreen for ios    -->
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />

	<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
	<link rel="icon" type="image/png" sizes="32x32" href="/icon-32.png">
	<link rel="icon" type="image/png" sizes="16x16" href="/icon-16.png">
	<link rel="alternate icon" href="/icon-16.png" type="image/png" sizes="16x16">
	<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
	<link rel="manifest" href="/manifest.webmanifest">

	<meta name="theme-color" content="#ffffff">

	<title>pbsveltic</title>
	
		<link rel="modulepreload" href="./_app/immutable/entry/start.70590b59.js">
		<link rel="modulepreload" href="./_app/immutable/chunks/index.d3b119eb.js">
		<link rel="modulepreload" href="./_app/immutable/chunks/singletons.71b92667.js">
		<link rel="modulepreload" href="./_app/immutable/chunks/index.9e10f726.js">
		<link rel="modulepreload" href="./_app/immutable/entry/app.6db3f8f2.js">
		<link rel="modulepreload" href="./_app/immutable/chunks/preload-helper.a4192956.js">
</head>

<body>
	<div>
			<script>
				{
					__sveltekit_ovqhlg = {
						base: new URL(".", location).pathname.slice(0, -1),
						env: {}
					};

					const element = document.currentScript.parentElement;

					Promise.all([
						import("./_app/immutable/entry/start.70590b59.js"),
						import("./_app/immutable/entry/app.6db3f8f2.js")
					]).then(([kit, app]) => {
						kit.start(app, element);
					});
				}
			</script>
		</div>
</body>

</html>

1 reply

burggraf Dec 1, 2023
Author

First error:

start.70590b59.js:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

benallfree · 2023-12-01T18:36:04Z

benallfree
Dec 1, 2023
Maintainer

Yes, I just was able to reproduce the same thing.

The error you are getting means that the file is not found. PocketBase serves static content in SSG mode, so you'll never get a 404 because it'll return index.html in the case of any 404.

I spotted an issue with the FTP server where in some cases files were failing to upload due to Cloudflare rate limiting. I fixed it by making the FTP server connect directly to the mothership PocketBase instance using a local address rather than going through Cloudflare to connect. This took care of the rate limiting errors and now everything is working for me.

0 replies

benallfree · 2023-12-01T18:36:15Z

benallfree
Dec 1, 2023
Maintainer

Please try uploading your files again.

0 replies

burggraf · 2023-12-01T20:14:25Z

burggraf
Dec 1, 2023
Author

It's working now! I've been using FileZilla to upload since the command-line ftp hasn't been working due to an expired certificate. Thanks for the quick resolution. Very cool.

1 reply

benallfree Dec 1, 2023
Maintainer

What client? My CLI ftp works.

burggraf · 2023-12-01T21:09:39Z

burggraf
Dec 1, 2023
Author

I'm using macos 14.1.1 command-line ftp under bash (ftp (GNU inetutils) 2.4). I always get the following (even if the password is correct):
ftp ftp://user%40host.com@ftp.sfo-1.pockethost.io

Connected to ftp.sfo-1.pockethost.io.
220 Ready
331 Username okay, awaiting password
Password: 
530 Invalid username or password
ftp: Login failed.

I'm assuming this is due to the expired cert, but it could be something else.

1 reply

benallfree Dec 1, 2023
Maintainer

I think it's something else, because I'm on OSX using the ftp CLI and it works.

burggraf · 2023-12-01T21:13:24Z

burggraf
Dec 1, 2023
Author

Ok, oddly enough the ftp client under Ubuntu Server 23.04 works fine.

0 replies

burggraf · 2023-12-01T22:25:02Z

burggraf
Dec 1, 2023
Author

Ok, this works:
ftp "user@host.com"@ftp.sfo-1.pockethost.io
This does not:
ftp ftp://user%40host.com@ftp.sfo-1.pockethost.io
This does not:
ftp user%40host.com@ftp.sfo-1.pockethost.io

1 reply

benallfree Dec 2, 2023
Maintainer

Ooo, good discovery! I'll update it.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to host a sveltekit app #345

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 9 comments 5 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

How to host a sveltekit app #345

burggraf Nov 30, 2023

Replies: 9 comments · 5 replies

benallfree Nov 30, 2023 Maintainer

burggraf Dec 1, 2023 Author

benallfree Dec 1, 2023 Maintainer

burggraf Dec 1, 2023 Author

burggraf Dec 1, 2023 Author

benallfree Dec 1, 2023 Maintainer

benallfree Dec 1, 2023 Maintainer

burggraf Dec 1, 2023 Author

benallfree Dec 1, 2023 Maintainer

burggraf Dec 1, 2023 Author

benallfree Dec 1, 2023 Maintainer

burggraf Dec 1, 2023 Author

burggraf Dec 1, 2023 Author

benallfree Dec 2, 2023 Maintainer

burggraf
Nov 30, 2023

Replies: 9 comments 5 replies

benallfree
Nov 30, 2023
Maintainer

burggraf Dec 1, 2023
Author

benallfree
Dec 1, 2023
Maintainer

burggraf
Dec 1, 2023
Author

burggraf Dec 1, 2023
Author

benallfree
Dec 1, 2023
Maintainer

benallfree
Dec 1, 2023
Maintainer

burggraf
Dec 1, 2023
Author

benallfree Dec 1, 2023
Maintainer

burggraf
Dec 1, 2023
Author

benallfree Dec 1, 2023
Maintainer

burggraf
Dec 1, 2023
Author

burggraf
Dec 1, 2023
Author

benallfree Dec 2, 2023
Maintainer