Cloudflare Developers•4mo ago

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

2 Replies

ScottF•4mo ago

Hey there! My team currently does this and it's extremely simple. We use the officially supported github actions workflow (https://github.com/cloudflare/pages-action?tab=readme-ov-file#usage). In CI just build your project using whatever build/bundling software you want and then point the action config to the output folder via the directory param

GitHub

GitHub - cloudflare/pages-action

Contribute to cloudflare/pages-action development by creating an account on GitHub.

sten•4mo ago

That's sounds super simple! I'll definitely do that. Thanks @ScottF

Gaming

Programming

How to serve javascript files (as third party lib)