sten Posts - Answer Overflow

sten

Explore posts from servers

•Created by sten on 2/5/2024 in #pages-help

How to serve javascript files (as third party lib)

I am currently implementing a widget to be embedded as a third party library on websites. I am developing it with Vanilla Svelte and rollup.js. This is my rollup config.

export default {
input: 'src/embed.ts',
output: [
  {
    name: 'widget',
    format: 'iife',
    file: './dist/widget.js',
    sourcemap: true
  },
  {
    file: './dist/bundle.min.js',
    format: 'iife',
    name: 'version',
    plugins: [terser()]
  }
],
plugins: [
  json(),
  svelte({ preprocess: sveltePreprocess(), emitCss: false }),
  resolve({ browser: true, dedupe: ['svelte'] }),
  commonjs(),
  typescript({ sourceMap: true, inlineSources: false, exclude: ['main.ts'] })
]
};

export default {
input: 'src/embed.ts',
output: [
  {
    name: 'widget',
    format: 'iife',
    file: './dist/widget.js',
    sourcemap: true
  },
  {
    file: './dist/bundle.min.js',
    format: 'iife',
    name: 'version',
    plugins: [terser()]
  }
],
plugins: [
  json(),
  svelte({ preprocess: sveltePreprocess(), emitCss: false }),
  resolve({ browser: true, dedupe: ['svelte'] }),
  commonjs(),
  typescript({ sourceMap: true, inlineSources: false, exclude: ['main.ts'] })
]
};

Question: how can I serve the bundle.min.js through Cloudflare as a CDN? I am assuming it should be possible with Pages Direct Upload? Idea is to be able to include the script like this later on:

 <script src="CDN.../bundle.min.js" defer></script>

 <script src="CDN.../bundle.min.js" defer></script>

Would be awesome if someone could point me in the right direction

3 replies

CDCloudflare Developers

•Created by sten on 12/23/2023 in #pages-help

Deploying with cloudflare/pages-action but cannot locate sveltekit build directory

I am currently setting up a build script with https://github.com/cloudflare/pages-action I am using @sveltejs/adapter-cloudflare as my adapter as well which says the build directory is .sveltekit/cloudflare. However, github actions cannot find that directory. Docs here says: https://developers.cloudflare.com/pages/framework-guides/deploy-a-svelte-site/

@sveltejs/adapter-static Only produces client-side static assets (no server-side rendering) and is compatible with Cloudflare Pages. Review the official SvelteKit documentation for instructions on how to set up the adapter. Keep in mind that if you decide to use this adapter, the build directory, instead of .svelte-kit/cloudflare, becomes build. You must also configure your Cloudflare Pages application’s build directory accordingly.

Which means .sveltekit/cloudflare should be correct.

6 replies

CDCloudflare Developers

•Created by sten on 11/30/2023 in #pages-help

Build error when using adapter-cloudflare-workers

I am currently trying to deploy a sveltekit website with Cloudflare workers using Cloudflare KV. I've followed this guide https://kit.svelte.dev/docs/adapter-cloudflare-workers I tried building with @sveltejs/adapter-cloudflare:2.3.3 and that works fine, however event.platform.env does not contain Cloudflare KV, even though the .toml file is specified along with the app.d.ts

  npmPackages:
    @sveltejs/adapter-auto: ^2.0.0 => 2.1.1
    @sveltejs/adapter-cloudflare: ^2.3.3 => 2.3.3
    @sveltejs/adapter-cloudflare-workers: ^1.2.1 => 1.2.1
    @sveltejs/kit: ^1.27.6 => 1.27.6
    svelte: ^4.0.5 => 4.2.7
    vite: ^4.4.2 => 4.5.0

wrangler.toml file

name = "sveltekit-app"
compatibility_date = "2021-11-12"
account_id = "id"
workers_dev = true
main = "./.cloudflare/worker.js"
site.bucket = "./.cloudflare/public"
build.command = "npm run build"
kv_namespaces = [
    { binding = "KV_1", id = "id", preview_id = "preview" },
    { binding = "KV_2", id = "id", preview_id = "preview" }
]

app.d.ts
// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
    namespace App {
        // interface Error {}
        interface Locals {
            user: GithubUser;
            KV_1: KVNamespace;
            KV_2: KVNamespace;
        }
        interface Platform {
            env?: {
            KV_1: KVNamespace;
            KV_2: KVNamespace;
            };
        }
    }
    declare namespace svelteHTML {
        interface HTMLAttributes<T> {
            'on:outclick'?: CompositionEventHandler<T>;
        }
    }
}

export {};

  npmPackages:
    @sveltejs/adapter-auto: ^2.0.0 => 2.1.1
    @sveltejs/adapter-cloudflare: ^2.3.3 => 2.3.3
    @sveltejs/adapter-cloudflare-workers: ^1.2.1 => 1.2.1
    @sveltejs/kit: ^1.27.6 => 1.27.6
    svelte: ^4.0.5 => 4.2.7
    vite: ^4.4.2 => 4.5.0

wrangler.toml file

name = "sveltekit-app"
compatibility_date = "2021-11-12"
account_id = "id"
workers_dev = true
main = "./.cloudflare/worker.js"
site.bucket = "./.cloudflare/public"
build.command = "npm run build"
kv_namespaces = [
    { binding = "KV_1", id = "id", preview_id = "preview" },
    { binding = "KV_2", id = "id", preview_id = "preview" }
]

app.d.ts
// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
    namespace App {
        // interface Error {}
        interface Locals {
            user: GithubUser;
            KV_1: KVNamespace;
            KV_2: KVNamespace;
        }
        interface Platform {
            env?: {
            KV_1: KVNamespace;
            KV_2: KVNamespace;
            };
        }
    }
    declare namespace svelteHTML {
        interface HTMLAttributes<T> {
            'on:outclick'?: CompositionEventHandler<T>;
        }
    }
}

export {};

Anyone have any clue?

3 replies

CDCloudflare Developers

•Created by sten on 11/29/2023 in #workers-help

Workers not logging objects

Tried to log an exception that was thrown but all it logged was: How can we debug better in workers?

    {
      "message": [
        "mylog",
        "[object Object]"
      ],
      "level": "log",
      "timestamp": 1701263872409
    },

    {
      "message": [
        "mylog",
        "[object Object]"
      ],
      "level": "log",
      "timestamp": 1701263872409
    },

By using JSON.stringifiyit printed out empty object "{}",

4 replies

CDCloudflare Developers

•Created by sten on 10/5/2023 in #workers-help

How do you write to Cloudflare KV when developing locally with wrangler dev?

I remember that you could write directly to Cloudflare KV's namespace when running wrangler dev locally.

name = "project_name"
main = "src/index.js"
compatibility_date = "2022-10-06"
type = "webpack"

account_id = "account_id..."
workers_dev = true

kv_namespaces = [
    { binding = "namespace_name", id = "id..." }
]

[env.staging]
kv_namespaces = [
    { binding = "namespace_name", id = "id..." }
]

[env.production]
kv_namespaces = [
    { binding = "namespace_name", id = "id..." }
]

name = "project_name"
main = "src/index.js"
compatibility_date = "2022-10-06"
type = "webpack"

account_id = "account_id..."
workers_dev = true

kv_namespaces = [
    { binding = "namespace_name", id = "id..." }
]

[env.staging]
kv_namespaces = [
    { binding = "namespace_name", id = "id..." }
]

[env.production]
kv_namespaces = [
    { binding = "namespace_name", id = "id..." }
]

This is what my wrangler.toml looks like. I am currently running by calling wrangler dev. I have logged in with wrangler. It was a while ago since I did this, maybe an update have come or so. Right now it writes to local cache at .wrangler/kv

10 replies

Gaming

Programming