How to use vitejs with a CDN

[jachin84]

The simple question I have is how do I use vitejs with my own CDN. The longer question needs a bit of context.

Our SPA is using Vue and our backend is .NET. Our build process builds artifacts for both the SPA and backend and sends them to Octopus. Octopus then creates releases to move the artifacts through the various environments such as dev, test, staging or production.

The SPA artifacts are deployed to Azure. When we access our App (app.domain.com) assets are downloaded as expect and everything is great.

Recently we tried to place all static files on a CDN (cdn.domain.com//, where is the environment name) such that the app is still hosted at app.domain.com but all the static assets are pulled from cdn.domain.com. How can this be accomplished? I've seen the information on https://vitejs.dev/guide/build.html#public-base-path however this sets the base path at build time. We need the base path to by dynamic so that we can move the generated package through our various environments which have slightly different CDN Urls. Does that make sense?

[pdsuwwz]

Hi, Do you mean replacing some assets files with CDN in a production environment?

Such as:

import Logo from '../assets/logo.png'

After:

import Logo from 'https://cdn.abcdef.dev/logo.png'

If I understand correctly, then you may need to use @rollup/plugin-replace

Let's try:

vite.config.js

import replacePlugin from '@rollup/plugin-replace'

const cdnReplaces = {
  'from \'../assets/Logo.png\'': 'from \'https://cdn.abcdef.dev/logo.png\'',
  preventAssignment: true,
  delimiters: ['', '']
}

export default defineConfig({
  // ...
  build: {
    rollupOptions: {
      plugins: [
        replacePlugin(cdnReplaces)
      ]
    }
  }
})

[josephabrahams]

@jachin84 Did you ever figure out a solution to injecting a CDN url at runtime?

[Priestch]

@josephabrahams You can see if the experimental renderBuiltUrl https://vitejs.dev/guide/build.html#advanced-base-options helps, I deployed a project to CDN using this option recently.

[fomo-owner]

Sure we can implement it using renderBuiltUrl
How to have a fallback in case some cdn request fails
In my case, I'm using Cloudfront backed by a private S3. lets say one random asset is not present in s3. How do I fetch it from CDN instead?