Provide an option to tell Sapper to serve its assets from a CDN

[ispyinternet]

If we had an option to instruct sapper to serve the css and js from a different domain we could then offload those assets onto a CDN.

[ispyinternet]

Could we use an environment variable to signal our intention to sapper, something like SAPPER_CDN_DOMAIN and (perhaps also SAPPER_CDN_BASE_PATH)?

The server generated assets would be easy for sapper to rewrite.

Template based assets, what could there be src and href? (for example direct link to download asset), any others?

In both cases could we use a directive?

<a cdn:href="/download.pdf">download me</a>
<img cdn:src="/logo.png" />

[vladejs]

I have a similar situation. I want to load assets via CDN or local depending on NODE_ENV env variable, but don't know how to if that in the template.html file (I know how to put process.env.NODE_ENV inside via webpack though)

[aubergene]

I like this idea. When you say assets are you exclusively talking about files within the assets/ folder?

[ispyinternet]

and the svelte generated javascript chunks, and any webpack generated css you extract too I guess.

[ispyinternet]

@Rich-Harris you probably know about this, but in case not: https://webpack.js.org/concepts/output/#advanced

Mention of CDN configuration. Not sure if this can be leveraged in anyway?

[ispyinternet]

Wonder if this tool can be used?

https://www.npmjs.com/package/cdnizer

[digitalfuel]

I also have a project that I would love to start with sapper but need generated chunks, css etc served from S3 CDN different to the apps domain.

[waspeer]

+1

[swyxio]

this doesnt look like its sapper’s responsibility? you can configure webpack externals for this.

[aubergene]

It would be needed or at least nice when the site is statically generated

[ispyinternet]

as I see the problem, you want to dev to use local assets but you want production to use CDN assets and while it can be argued that the developer could use a bundler to replace the links to user-land assets, i'm not sure how easy / possible it would be to get a bundler to edit the code generated by sapper to 'CDN' the JS / CSS chunks?

Other options as suggested on discord just place a CDN in front of sapper and let it cache / passthrough accordingly

[IlyaSemenov]

I don't want to open a new issue since this one is a good fit. However I'm not sure what you're guys discussing? The relative piece of Sapper's code is hardcoded:

sapper/runtime/src/server/middleware/get_page_handler.ts

Lines 313 to 315 in a52bdb2

	styles = Array.from(css_chunks)
	.map(href => `<link rel="stylesheet" href="client/${href}">`)
	.join('')

sapper/runtime/src/server/middleware/get_page_handler.ts

Line 282 in a52bdb2

const main = `${req.baseUrl}/client/${file}`;

Not only its hardcoded but it's even hardcoded non-uniformly, styles are loaded from client/*.css and scripts from /client/*.js, note the missing slash in the former.

Of course it MUST be fixed, and use some common overridable prefix instead. It's an obvious flaw in the architecture.

See for example how Nuxt handles it: https://nuxtjs.org/api/configuration-build#publicpath

(UPD: didn't want to be rude, not at all. Where I work I do code reviews very often and my mindset is shifted towards finding non-perfect code.)

[antony]

@IlyaSemenov if you configure your CDN to serve /client/, and various filetypes from a CDN - hosting static assets from a CDN is easy to do today, and has been since Sapper's inception.

I do agree that it is a nice feature to allow these to be configured flexibly, but I find your use of the words must and obvious flaw a little dogmatic for my liking.

[ispyinternet]

Just for some posterity on this issue, I did look into a hack by wrapping https://www.npmjs.com/package/cdnizer into a rollup plugin and using various regex to replace the references during the build, but yh, it is very hacky and I didn't quite get the regex to fix some of the references where sapper injects:

<script>__SAPPER__={baseUrl: ....

Still think it would be a nice to have!

[IlyaSemenov]

@antony It's not possible to configure a web server to host e.g. /about at own server (powered by Sapper) and have /client/*** be served by a CDN. If it's the same hostname (www.mysite.com) then it must be the same physical machine that does SSL termination and initial route handling. (That is, unless you put your server behind the CDN fully and have it reverse proxy non-/client/-URLs to Sapper, which is kind of odd setup).

See for example how Nuxt handles it: https://nuxtjs.org/api/configuration-build#publicpath

[antony]

@IlyaSemenov you can (and should) put your entire site behind a CDN. You can then use nginx or similar to determine where particular items are served from.

You can configure how a CDN configures specific paths using your CDN's functionality: https://support.cloudflare.com/hc/en-us/articles/200172316-How-do-I-include-or-exclude-a-specific-URL-from-Cloudflare-s-page-rules-

I use now.sh which does all of this for me, using their Smart CDN.

[vorillaz]

I accidentally opened a new issue #1102. I think that eventually using a configuration file would be a great addition. It’s a similar architecture used by Next.js and Nuxt.js. Eventually, a top-level sapper.config.js could help pass options for building, development and production mode. I am not sure if there are any plans to use a configuration file but I am more than happy to create a PR and move the discussion there.

In a similar manner working with a tailor-made server and passing the baseUrl as an option would be relatively easy. Also, it would be ideal for development and production builds.

Last but not least, a configuration file would ideally work great through a CI/CD pipeline or inside a containerized application, where assets, ports generally speaking environmental variables can get processed.

[finkel]

Just exploring deploying Sapper now, and I would also really like support for specifying a CDN for all the static and generated files.

[antony]

@finkel don't forget that you can just tell cloudflare to serve everything from a CDN, as-is. Zeit Now will automatically CDN everything too. So you have this capability today.

This is a feature I want too, for finer grained control - but at the moment I have assets served from a CDN regardless, with no Sapper config at all.

[IlyaSemenov]

There are obviously so many cases when all-in-one solutions like Cloudflare and Now are not applicable that it eludes me why so many folks suggest it as "the" way to go.

For starters, those are the cases which I'm personally working with:

• intranet sites
• government/regulated sites which must not operate behind a proxy (especially not behind a proxy that operates in a different country!)
• legacy projects with pre-existing URL setup that must be kept (where e.g. the analytics module relies on the fact that static assets access logs are separate from the actual pages)
• large scale projects with custom caching layers (where it would cost a fortune to pay Cloudflare or Zeit Now for traffic)

Another way to look at it is: I can in theory imagine Google reimplementing its frontend in React or Vue.js, but there's no way Google would use Svelte due to how everything is hard-coded.

[finkel]

@antony Thanks. Cloudflare CDN will be a good solution for me.

@IlyaSemenov Agreed that there are lots of other times that Cloudflare might not work, so this could be an important fix for some folks.

[antony]

This will be handled by individual adapters in Kit. The ones that exist so far already handle this. Creating a custom adapter to modify the filesystem layout as required will also be very trivial.

[koenkivits]

If you — like me, an hour ago — don't know wat Kit is: it's a new app development kit that's going to replace Sapper. Rich Harris demoed an early version of it in his talk for Svelte Summit.

Key takeaways:

• uses Snowpack (faster dev experience because it doesn't bundle)
• better hot module replacement
• supports compiling parts of your app as static pages (instead of either the whole app or none of it)
• built-in support for several serverless platforms
• should be fairly straightforward to migrate an existing Sapper app

(I figured I'd post it here since there's not a lot to be found about it on the internet yet)

[datamafia]

Reading through this thread it is clear that Sapper has some work to do. Use of a CDN is the operational norm and requirement. What I glean from the discussion is that Svelte is not ready for primetime. I am still committed, but I can't put clients on this yet (but I want to React and Ng suck). Svelte is by far the best JS framework, via Sapper, I have ever used (I started in when Javascript was created, all the frameworks and helpers...this is still the best dev experience for front end I have ever seen.

Thanks. @antony - Serving from a CDN will help get logical and useful JS FE to the people, up until now JS has been a hot mess. Let's all work towards stability and LTS.

I look forward to Svelte Kit, hoping the refactor is not a kick in the balls.

[antony]

Reading through this thread it is clear that Svelte has some work to do.

This issue relates to Sapper, which is now in maintenance mode, soon to be replaced by Svelte Kit, which handles assets differently (and happily serves from a CDN). Svelte doesn't handle assets at all.