vitepress icon indicating copy to clipboard operation
vitepress copied to clipboard

feat: add `assetsBase` config to support serving assets from CDN

Open nilennoct opened this issue 1 year ago ā€¢ 13 comments

Add the publicPath site config to support serving assets from CDN.

For example, we can deploy the pages to https://www.example.com/ and the assets to https://cdn.example.com/assets/ with the following config:

export default {
  base: '/',
  publicPath: 'https://cdn.example.com/assets/',
}

When running vitepress preview, use an additional middleware to redirect the non-default asset requests to the files under assets directory.

May resolve #736 and #2144

nilennoct avatar Jun 02 '23 05:06 nilennoct

One question regarding the middleware part, do people have use cases where they will be using an internal publicPath?

PS: Not sure about the naming too, publicPath might sound confusing in some instances. Like if we stick with Vite's terminology here https://vitejs.dev/guide/build.html#advanced-base-options then we are adding this to hashed assets not public / generated html files. Might be better to rename this to assetsPath or assetsBase? šŸ¤”

brc-dd avatar Jun 06 '23 20:06 brc-dd

Sure, such use case is rare. But in mine, we deploy the assets to CDN in production environment while together in test environment. For example:

export default {
  base: '/app-name/',
  publicPath:
    process.env.DEPLOY_ENV === 'production'
      ? 'https://cdn.example.com/assets/app-name/'
      : '/assets/app-name/'
}

It is necessary to add the middleware if we want to locally preview the test environment build.

As to the naming of publicPath, in fact I used assetsBase at the beginning and renamed later. Vite provides the experimental.renderBuiltUrl option to support advanced assets base, which is similar to publicPath in webpack.

I will rename it to assetsBase and point out the relationship with publicPath for better DX.

nilennoct avatar Jun 07 '23 03:06 nilennoct

By the way, the new middleware is only used when the assetsBase is configured and different from the default.

nilennoct avatar Jun 07 '23 03:06 nilennoct

Rebased.

nilennoct avatar Jun 13 '23 12:06 nilennoct

I had the same problem and look forward to its release

niuweili avatar Jun 20 '23 07:06 niuweili

I'm also interested in this and look forward to its release.

treardon17 avatar Sep 07 '23 20:09 treardon17

Looking forward to its release.

Red-Asuka avatar Sep 25 '23 01:09 Red-Asuka

Looking forward to it very much

MyPrototypeWhat avatar Oct 12 '23 07:10 MyPrototypeWhat

Rebased on main branch and all commits squashed.

And fix formatting.

nilennoct avatar Nov 28 '23 03:11 nilennoct

ä»€ä¹ˆę—¶å€™ę‰ä¼šåˆå¹¶

virskor avatar Apr 19 '24 02:04 virskor

Looking forward to its release.

IceEnd avatar May 31 '24 07:05 IceEnd

You can first use overrides to experience this feature: image

IceEnd avatar Jun 03 '24 03:06 IceEnd

Thank you all for hard work and contributions! I wanted to check in on this PR as this feature is crucial for us to use the tool in our production environment.

Is there anything I can do to help move this forward? Any feedback or additional changes needed? Iā€™m more than happy to assist in any way possible.

Amorites avatar Jun 18 '24 08:06 Amorites

maybe you can use renderBuiltUrl

however, it seems that renderBuiltUrl is not working properly in VitePress.

lisonge avatar Jul 14 '24 12:07 lisonge

An example of a configuration code that changes the VitePress resource URLs to absolute URLs

I use this configuration code to speed up the access to static resources. You can refer to it

https://github.com/gkd-kit/docs/blob/main/docs/.vitepress/plugins/mirror.ts

image


Additionally, if you do not want to modify the VitePress configuration code, another solution is to use a service worker to implement resource redirection.

lisonge avatar Jul 14 '24 14:07 lisonge