Scratch 3.0 as a self-contained desktop application
Find a file
Christopher Willis-Ford 01ae8ad2e8 chore(deps): add missing dependencies used in webpack.makeConfig.js
This was meant as a step toward supporting "npm ln scratch-gui" but it
turns out that's pretty far away. Still, it's better to be honest about
the dependencies.
2023-04-07 11:24:30 -07:00
.circleci ci: large size wasn't worth it for Windows 2023-04-04 16:10:00 -07:00
.github Update CONTRIBUTING.md 2020-06-09 17:04:00 -04:00
buildResources add entitlements suggested by Electron 2020-05-13 17:15:07 -07:00
fastlane make a lane specifically for CircleCI 2022-01-31 14:37:30 -08:00
scripts use provisionprofiles from Fastlane Match 2022-01-27 16:44:13 -08:00
src work around Electron dialog title bug 2021-11-10 07:04:31 -08:00
.editorconfig Use eslint-config-scratch 2018-09-27 14:28:23 -07:00
.eslintignore Use eslint-config-scratch 2018-09-27 14:28:23 -07:00
.eslintrc.js Add media library assets, fetch script 2018-10-19 15:19:41 -07:00
.gitattributes move About window styling into a CSS file 2020-10-06 14:34:01 -07:00
.gitignore add match actions to Fastfile 2022-01-27 16:44:13 -08:00
.npmignore Initial commit 2018-09-06 11:20:27 -07:00
electron-builder.yaml use provisionprofiles from Fastlane Match 2022-01-27 16:44:13 -08:00
electron-webpack.json5 assume direct control of webpack config 2020-08-11 17:17:15 -07:00
LICENSE Update LICENSE 2019-03-06 12:59:20 -05:00
package-lock.json chore(deps): add missing dependencies used in webpack.makeConfig.js 2023-04-07 11:24:30 -07:00
package.json chore(deps): add missing dependencies used in webpack.makeConfig.js 2023-04-07 11:24:30 -07:00
README.md add release instructions to README.md 2021-05-06 11:49:46 -07:00
renovate.json5 chore: try Renovate 'transitiveRemediation' flag 2023-04-05 07:34:03 -07:00
TRADEMARK Update TRADEMARK 2019-03-06 12:59:41 -05:00
webpack.main.js assume direct control of webpack config 2020-08-11 17:17:15 -07:00
webpack.makeConfig.js chore(deps): add missing dependencies used in webpack.makeConfig.js 2023-04-07 11:24:30 -07:00
webpack.renderer.js during webpack, find modules using require.resolve 2020-09-30 09:32:54 -07:00

scratch-desktop

Scratch 3.0 as a standalone desktop application

Developer Instructions

Releasing a new version

Let's assume that you want to make a new release, version 3.999.0, corresponding to scratch-gui version 0.1.0-prerelease.20yymmdd.

  1. Merge scratch-gui:
    1. cd scratch-gui
    2. git pull --all --tags
    3. git checkout scratch-desktop
    4. git merge 0.1.0-prerelease.20yymmdd
    5. Resolve conflicts if necessary
    6. git tag scratch-desktop-v3.999.0
    7. git push
    8. git push --tags
  2. Prep scratch-desktop:
    1. cd scratch-desktop
    2. git pull --all --tags
    3. git checkout develop
    4. npm install --save-dev 'scratch-gui@github:LLK/scratch-gui#scratch-desktop-v3.999.0'
    5. git add package.json package-lock.json
    6. Make sure the app works, the diffs look reasonable, etc.
    7. git commit -m "bump scratch-gui to scratch-desktop-v3.999.0"
    8. npm version 3.999.0
    9. git push
    10. git push --tags
  3. Wait for the CI build and collect the release from the build artifacts

A note about scratch-gui

Eventually, the scratch-desktop branch of the Scratch GUI repository will be merged with that repository's main development line. For now, though, the scratch-desktop branch holds a few changes that are necessary for the Scratch app to function correctly but are not yet merged into the main development branch. If you only intend to build or work on the scratch-desktop repository then you can ignore this, but if you intend to work on scratch-gui as well, make sure you use the scratch-desktop branch there.

Previously it was necessary to explicitly build scratch-gui before building scratch-desktop. This is no longer necessary and the related build scripts, such as build-gui, have been removed.

Prepare media library assets

In the scratch-desktop directory, run npm run fetch. Re-run this any time you update scratch-gui or make any other changes which might affect the media libraries.

Run in development mode

npm start

Make a packaged build

npm run dist

Node that on macOS this will require installing various certificates.

Signing the NSIS installer (Windows, non-store)

This section is relevant only to members of the Scratch Team.

By default all Windows installers are unsigned. An APPX package for the Microsoft Store shouldn't be signed: it will be signed automatically as part of the store submission process. On the other hand, the non-Store NSIS installer should be signed.

To generate a signed NSIS installer:

  1. Acquire our latest digital signing certificate and save it on your computer as a p12 file.
  2. Set WIN_CSC_LINK to the path to your certificate file. For maximum compatibility I use forward slashes.
    • CMD: set WIN_CSC_LINK=C:/Users/You/Somewhere/Certificate.p12
    • PowerShell: $env:WIN_CSC_LINK = "C:/Users/You/Somewhere/Certificate.p12"
  3. Set WIN_CSC_KEY_PASSWORD to the password string associated with your P12 file.
    • CMD: set WIN_CSC_KEY_PASSWORD=superSecret
    • PowerShell: $env:WIN_CSC_KEY_PASSWORD = "superSecret"
  4. Build the NSIS installer only: building the APPX installer will fail if these environment variables are set.
    • npm run dist -- -w nsis

Workaround for code signing issue in macOS

Sometimes the macOS build process will result in a build which crashes on startup. If this happens, check in Console for an entry similar to this:

failed to parse entitlements for Scratch[12345]: OSUnserializeXML: syntax error near line 1

This appears to be an issue with codesign itself. Rebooting your computer and trying to build again might help. Yes, really.

See this issue for more detail: https://github.com/electron/electron-osx-sign/issues/218

Make a semi-packaged build

This will simulate a packaged build without actually packaging it: instead the files will be copied to a subdirectory of dist.

npm run dist:dir

Debugging

You can debug the renderer process by opening the Chromium development console. This should be the same keyboard shortcut as Chrome on your platform. This won't work on a packaged build.

You can debug the main process the same way as any Node.js process. I like to use Visual Studio Code with a configuration like this:

    "launch": {
        "version": "0.2.0",
        "configurations": [
            {
                "name": "Desktop",
                "type": "node",
                "request": "launch",
                "cwd": "${workspaceFolder:scratch-desktop}",
                "runtimeExecutable": "npm",
                "autoAttachChildProcesses": true,
                "runtimeArgs": ["start", "--"],
                "protocol": "inspector",
                "skipFiles": [
                    // it seems like skipFiles only reliably works with 1 entry :(
                    //"<node_internals>/**",
                    "${workspaceFolder:scratch-desktop}/node_modules/electron/dist/resources/*.asar/**"
                ],
                "sourceMaps": true,
                "timeout": 30000,
                "outputCapture": "std"
            }
        ]
    },

Resetting the Telemetry System

This application includes a telemetry system which is only active if the user opts in. When testing this system, it's sometimes helpful to reset it by deleting the telemetry.json file.

The location of this file depends on your operating system and whether or not you're running a packaged build. Running from npm start or equivalent is a non-packaged build.

In addition, macOS may store the file in one of two places depending on the OS version and a few other variables. If in doubt, I recommend removing both.

  • Windows, packaged build: %APPDATA%\Scratch\telemetry.json
  • Windows, non-packaged: %APPDATA%\Electron\telemetry.json
  • macOS, packaged build: ~/Library/Application Support/Scratch/telemetry.json or ~/Library/Containers/edu.mit.scratch.scratch-desktop/Data/Library/Application Support/Scratch/telemetry.json
  • macOS, non-packaged build: ~/Library/Application Support/Electron/telemetry.json or ~/Library/Containers/edu.mit.scratch.scratch-desktop/Data/Library/Application Support/Electron/telemetry.json

Deleting this file will:

  • Remove any pending telemetry packets
  • Reset the opt in/out state: the app should display the opt in/out modal on next launch
  • Remove the random client UUID: the app will generate a new one on next launch