Scratch GUI is a set of React components that comprise the interface for creating and running Scratch 3.0 projects
Please look in scripts/README.md for install steps. The rest of this file is left untouched for easier downstream merges.
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 git@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:
npm start
Then go to http://localhost:8601/ - the playground outputs the default GUI component
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 npm install
.
To do this:
- Make sure you have run
npm install
from this (scratch-gui) repository's top level - Make sure you have run
npm install
from 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
dist
directory by runningBUILD_MODE=dist npm run build
- From this (scratch-gui) repository's top level, establish a link to this repository by running
npm link
- 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
Instead of BUILD_MODE=dist npm run build
you can also use BUILD_MODE=dist npm run watch
, however this may be unreliable.
- 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 with
npm unlink
and start over.
NOTE: If you're a windows user, please run these scripts in Windows cmd.exe
instead of Git Bash/MINGW64.
Run linter, unit tests, build, and integration tests.
npm test
Run unit tests in isolation.
npm run unit-test
Run unit tests in watch mode (watches for code changes and continuously runs tests). See jest cli docs for more options.
npm run unit-test -- --watch
Run integration tests in isolation.
npm run integration-test
You may want to review the documentation for Jest and Enzyme as you write your tests.
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!