CD
Cloudflare Developers•11mo ago
sten

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
ScottF•11mo 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
stenOP•11mo ago
That's sounds super simple! I'll definitely do that. Thanks @ScottF

Did you find this page helpful?