Previewing / uploading exported cables patches
What you will learn:
- How to preview a downloaded cables patch locally in your browser
- How to get around the security warning
Failed to load MyPatch.json…
- Which local web-server you can use for Windows / Mac / Linux
- How to upload a cables patch to your own FTP server
One of the great features of cables is that you can export a patch at any time by downloading a bundled zip-file of your code including all assets. This means that your exported patch is not dependent on the cables server any more and runs independently, on any common webserver.
Because of browser’s security restrictions there are a few things to note tho which will be explained in this article.
Exporting a patch
Export in the cables editor. In some cases you might not want to download the assets (used images, audio files, 3D-models), you can then use
Export without files instead.
When your download is finished unzip the archive, the extracted content will look similar to this:
Previewing an exported patch locally
How not to do it
If you want to preview the exported patch in your web-browser you might think you can just double click the
index.html file to open it with e.g. Chrome. This will not work because of browser security restrictions which will prevent your browser from loading the
MyPatch.json file. The browser window will just be black. When you click
cmd + shift + i to open the browser console / developer tools, you will see an error like this:
Failed to load file:///Users/yourname/Downloads/cables_MyPatch/js/MyPatch.json: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
How to do it
In order to preview the cables patch, we need a local web server, which you can access via the
http-protocol. There are a multitude of options available for each platform, to name a few:
- Anvil (very user-friendly, Mac only)
- XAMPP (harder to use, cross-platform)
- http-server (node.js module, Terminal use required, cross-paltform, easy to use if you know how)
Previewing with Anvil (Mac)
First download and install Anvill, then click on menu bar icon and install the required dependency Pow.
Now you can just drag the patch folder (the root folder including all the extracted files) onto the anvil-icon and anvil will create a local .dev-domain for you. Click the newly created dev-domain and your patch should be visible in your browser.
Previewing with http-server (Node, cross-platform)
npm install http-server -g
This will install the http-server module globally.
Now navigate to the directory of the extracted patch, e.g.
And start the local web server:
You should now see something like:
Starting up http-server, serving ./ Available on: http://127.0.0.1:8080 http://192.168.178.102:8080 Hit CTRL-C to stop the server
Copy the first URL and open it in your browser of choice. Voilà.
Uploading a cables patch to your web server via FTP
The security restrictions we talked about before do not apply for common web-servers, so if you rent webspace somewhere, you can just upload the exported files to your server and it should work right away.
First of all you need a FTP client, some choices are:
Uploading with Cyberduck
After you installed Cyberduck log in to your server and drop the exported folder onto the Cyberduck window. You might want to rename the folder first to lowercase (
Your server filesystem should look something likes this now:
some-other-folders/ ... my-patch/ assets/ … js/ … index.html
Now you should be able to go to http://your-domain.cool/my-patch to see the patch live and independant from the main cables server. In case you don’t see the patch but get a page not found error you need to find out where your root-folder in the file-system is (your domain points to a different folder on the server). If you cannot find it out by yourself ask your web developer friend / web-hosting provider.