Scratch GUI is a set of React components that comprise the interface for creating and running Scratch 3.0 projects
This requires you to have Git and Node.js installed.
In your own node environment/application:
npm install https://github.com/LLK/scratch-gui.git
If you want to edit/play yourself:
git clone https://github.com/LLK/scratch-gui.git cd scratch-gui npm install
Running the project requires Node.js to be installed.
Open a Command Prompt or Terminal in the repository and run:
Then go to http://localhost:8601/ - the playground outputs the default GUI component
Developing alongside other Scratch repositories
Linking this code to another project's
If you wish to develop scratch-gui alongside other scratch repositories that depend on it, you may wish
to have the other repositories use your local scratch-gui build instead of fetching the current production
version of the scratch-gui that is found by default using
To do this:
- Make sure you have run
npm installfrom this (scratch-gui) repository's top level
- Make sure you have run
npm installfrom the top level of each repository (such as scratch-www) that depends on scratch-gui
- From this (scratch-gui) repository's top level, build the
distdirectory by running
BUILD_MODE=dist npm run build
- From this (scratch-gui) repository's top level, establish a link to this repository by running
- From the top level of each repository that depends on scratch-gui, run
npm link scratch-gui
- Build or run the repositories that depend on scratch-gui
BUILD_MODE=dist npm run build you can also use
BUILD_MODE=dist npm run watch, however this may be unreliable.
Oh no! It didn't work!
- Follow the recipe above step by step and don't change the order. It is especially important to run npm first because installing after the linking will reset the linking.
- Make sure the repositories are siblings on your machine's file tree.
- If you have multiple Terminal tabs or windows open for the different Scratch repositories, make sure to use the same node version in all of them.
- In the worst case unlink the repositories by running
npm unlinkin both, and start over.
See jest cli docs for more options.
NOTE: If you're a windows user, please run these scripts in Windows
cmd.exe instead of Git Bash/MINGW64.
Before running any test, make sure you have run
npm install from this (scratch-gui) repository's top level.
Main testing command
To run linter, unit tests, build, and integration tests, all at once:
Running unit tests
To run unit tests in isolation:
npm run test:unit
To run unit tests in watch mode (watches for code changes and continuously runs tests):
npm run test:unit -- --watch
You can run a single file of integration tests (in this example, the
$(npm bin)/jest --runInBand test/unit/components/button.test.jsx
Running integration tests
Note that integration tests require you to first create a build that can be loaded in a browser:
npm run build
Then, you can run all integration tests:
npm run test:integration
Or, you can run a single file of integration tests (in this example, the
$(npm bin)/jest --runInBand test/integration/backpack.test.js
If you want to watch the browser as it runs the test, rather than running headless, use:
USE_HEADLESS=no $(npm bin)/jest --runInBand test/integration/backpack.test.js
Publishing to GitHub Pages
You can publish the GUI to github.io so that others on the Internet can view it. Read the wiki for a step-by-step guide.
We provide Scratch free of charge, and want to keep it that way! Please consider making a donation to support our continued engineering, design, community, and resource development efforts. Donations of any size are appreciated. Thank you!