🏠 back to Observable

CORS header for "download code" URLs

Would it be possible to add an Access-Control-Allow-Origin: * header to the “Download code” API endpoint, so the package can be used as a dependency in a CodeSandbox project (where dependencies are fetched by the browser)?

This one, for example: https://api.observablehq.com/@observablehq/how-to-embed-a-notebook-in-a-react-app@440.tgz?v=3

Hi @aeaton, that’s a great idea!
I remember seeing the (Add dependency via tar.gz upload or URL) issue solved on CodeSandbox. Still, I did not succeed in making examples using Observablehq notebooks due to the same CORS problem.

There is an example of the Observable runtime being implemented as an interpreter that can include dependencies via the browser here: Storyboard (githack.com)

GitHUb: Visualization/packages/observable-md at trunk · hpcc-systems/Visualization (github.com)

I have ran into the CORS issue with the .tgz links too, here is a serverless proxy solution

Just update the url to point to the right notebook and you get a ?v=3 archive

https://webcode.run/notebooks/@endpointservices/tzg/@tomlarkworthy/animated-kirigami.tgz

Implementation is

This has finally meant I can get offline notebooks working properly!

This is done! Just deployed. Please try it out.

5 Likes

I see the response header! Thanks @visnup :smiley:

I know its off topic, but any chance of an “upload notebook” feature?

Or some programmatic way to generate a notebook via api.