Vue-cli: Asset CDN with PWA plugin

[ryancalhoun]

What problem does this feature solve?

I want to host my app's assets on a CDN with a different origin by setting publicPath to an absolute URL.The reason is that my app's entry-point is Google App Engine, to serve the index. But the digested assets need to be in Cloud Storage so old versions remain available.

I also want to use the PWA plugin to link a manifest.json, but the manifest.json and service worker are required to be on the same origin as the index.

Currently I'm using sed to remove the CDN URL from the index after the app is built.

What does the proposed API look like?

Maybe a config option under pwa, like pwa.publicPath. It could behave exactly like publicPath, but only apply to the manifest.json and service-worker.js. Because of the digesting issue, it would probably make sense to keep the precache-manifests at the app's publicPath so those files could live on the CDN too.

[alexbainbridge]

Hi @ryancalhoun I am struggling with this too

For clarity, this is what I am currently doing. Hopefully this assists if this feature goes to development.

Setting publicPath as where will be, in public

THEN after each build

• in index.html - change all the URL for all assets FROM publicPath, to CDN path.... except for manifest.json that has to be the public path
• in service-worker.js - change the path from publicPath to CDN path
• in precache-manifest - change the path from publicPath to CDN path (for all assets)

i.e. the requirement is some kind of configuration for CDN asset path, thus avoiding all this post build processing.

Thanks!

[Sch3lp]

I think I'm running into the same issue when trying to deploy to (the CDN of) darklang.com.

When I configure publicPath: DARK_STATIC_ASSETS_BASE_URL the resulting index.html has links referencing /DARK_STATIC_ASSETS_BASE_URL instead of just DARK_STATIC_ASSETS_BASE_URL.

But I'm not building a PWA.

[vesper8]

Have either of you figured this out? I'm also using the pwa plugin and want to experiment with loading all css/js assets via bunnycdn. I'm a bit surprised there is almost no one else trying to do this

[Sch3lp]

Just like Ryan, I ended up using sed to string-replace the resulting index.html in a post-build script:

sed -i .bak 's/\/DARK_STATIC_ASSETS_BASE_URL/DARK_STATIC_ASSETS_BASE_URL/g' dist/index.html

_app-root/.env.dark_:
PUBLIC_PATH=DARK_STATIC_ASSETS_BASE_URL

_app-root/package.json_:
"scripts": { "dark": "vue-cli-service build --mode dark", ... }

(probably not necessary, but this is what I currently have in my codebase)
_app-root/vue.config.js_:
publicPath: process.env.PUBLIC_PATH || '/',

[vesper8]

hrm.. thanks for sharing your solution. It feels like there should be a better way to achieve this.. we can't be the only ones wanting to use a CDN to serve our dist folder's css/js/images

have you encountered any problems or anomalies serving your vue-cli pwa via a cdn?