Privacy & External Requests

Blockly, the engine underneath Morphic Blocks, needs a few images and sounds: the trash can, the zoom controls, the drag cursors and the click and delete sounds. On its own, Blockly loads them from Google’s server (blockly-demo.appspot.com), so every browser that opens the site contacts it.

Morphic Blocks loads them from your own site instead: blockly-media/ next to the page. Wherever a privacy policy applies, at a university or a school for example, no visitor’s browser contacts another server.

Copy the media

Blockly’s media comes with the package. A bundler plugin copies it into public/blockly-media/ whenever dev or build starts, with no script line:

vite.config.ts

import blocklyMedia from "morphic-blocks/vite";

export default { plugins: [blocklyMedia()] };

The same plugin comes for webpack, Rspack, Rollup and esbuild: morphic-blocks/webpack, /rspack, /rollup and /esbuild. For another folder, pass it: blocklyMedia({ folder: "static/blockly-media" }), relative to where the bundler runs.

With Parcel, Turbopack (Next.js) or no bundler, the morphic-blocks command does the same; run it before dev and build:

{
  "scripts": {
    "dev": "morphic-blocks copy-media public/blockly-media && vite",
    "build": "morphic-blocks copy-media public/blockly-media && vite build"
  }
}

Both copy only when the folder is new or Blockly was updated, so running them every time costs nothing. The copy is generated, so add public/blockly-media/ to your .gitignore.

public/ is the folder Vite serves as is; Next.js uses public/ too. With another bundler, copy to whichever folder it serves unchanged. The relative path blockly-media/ also works when your app lives under a subpath.

Without the copy, icons are missing and sounds stay silent; nothing else breaks, and the browser console shows a warning that says what to run. The toolbox tiles use the same media, and never load sounds.

Media from elsewhere

blockly.media points Blockly to another folder or server:

await engine.mount({
  workspaceContainer: document.getElementById("workspace")!,
  blockly: { media: "assets/blockly/" },
});

To use Google’s copy, as Blockly does on its own, set media: "https://blockly-demo.appspot.com/static/media/". Visitors’ browsers then contact Google’s server.

Without sounds

To leave out the sounds altogether, turn them off:

blockly: { sounds: false }

Check it

Open your app, then your browser’s developer tools, and go to the Network tab. Filter for appspot, then drag, drop and delete a block and use the zoom controls. The list stays empty.