Devex: Console.log an explanation of CORS issues to clarify why, e.g., zips from GitHub urls cant be downloaded

[helgatheviking]

I have a little snippet I would like to install to make my plugin's playground preview look nicer. So I pushed it to github and created a zip release for it.

I've added a step to my blueprint.json that attempts to install the plugin from a URL resource:

        {
            "step": "installPlugin",
            "pluginZipFile": {
                "resource": "url",
                "url": "https:\/\/github.com\/helgatheviking\/simple-user-listing-demo-avatars\/releases\/download\/1.0.0\/simple-user-listing-demo-avatars.1.0.0.zip"
            },
            "options": {
                "activate": true
            }
        },

But the playground fails even though I have networking turned on

"features": {
        "networking": true
    },

here's the error I see in the console (which looks like a networking failure)

Uncaught (in promise) Error: Error when executing the blueprint step #2 ({"step":"installPlugin","pluginZipFile":{"resource":"url","url":"https://github.com/helgatheviking/simple-user-listing-demo-avatars/releases/download/1.0.0/simple-user-listing-demo-avatars.1.0.0.zip"},"options":{"activate":true}}) : NetworkError when attempting to fetch resource.
    run https://playground.wordpress.net/assets/config-e3ffca93.js:624
    runBlueprintSteps https://playground.wordpress.net/assets/config-e3ffca93.js:624
    startPlaygroundWeb https://playground.wordpress.net/assets/config-e3ffca93.js:628
    RP https://playground.wordpress.net/assets/main-86fb9d4a.js:32
    sl https://playground.wordpress.net/assets/client-a736c30d.js:40
    Gn https://playground.wordpress.net/assets/client-a736c30d.js:40
    gd https://playground.wordpress.net/assets/client-a736c30d.js:40
    E https://playground.wordpress.net/assets/client-a736c30d.js:25
    ot https://playground.wordpress.net/assets/client-a736c30d.js:25
    EventHandlerNonNull* https://playground.wordpress.net/assets/client-a736c30d.js:25
    <anonymous> https://playground.wordpress.net/assets/client-a736c30d.js:25
Caused by: TypeError: NetworkError when attempting to fetch resource.

[adamziel]

@helgatheviking you can load files using the https://raw.githubusercontent.com/ URL. The culprit are CORS header – the site must serve Access-Control-Allow-Origin: * and github.com doesn't do that. But raw.githubusercontent.com does. Unfortunately, the latter doesn't support serving releases :-( But if you upload that zip as a file to the repo, you'll be able to load it.

Also – I just wrote this guide on Blueprints. It might help you and I would be very interested in your feedback:

WordPress/blueprints#5

[adamziel]

Actually, let's reuse this issue to explain the downloading issue right in the error message in the console.

[helgatheviking]

Ah ok. I didn't know there would be a difference. That's not ideal, but doable to get this working.

What about uploading a single file:

https://raw.githubusercontent.com/helgatheviking/simple-user-listing-demo-avatars/trunk/simple-user-listing-demo-avatars.php

is that possible?

[adamziel]

It is! Check that crash course for details on how to do it, it won't be the installPlugin step

[helgatheviking]

Got it working!