Scratch GUI is a set of React components that comprise the interface for creating and running Scratch 3.0 projects
Clone scratch-vm
git clone git@github.com:luchotc/scratch-vm.gitRun build-scratch script located at the root of this repo. You'll need to provide the local path for both this repo and scratch-vm. To do so export SCRATCH_VM_PATH and SCRATCH_GUI_PATH. You can also specify the build type by setting the ENV variable. You can set it to development or production mode. The default one is development
SCRATCH_VM_PATH=path/to/vm SCRATCH_GUI_PATH=path/to/gui ENV=production ./build-scratchThis module can also be deployed a ruby gem. scratch-gui works with Ruby 2.3.1
cd gem
rake wrapper:wrap
bundle install
bundle exec rspec./tag.shThis requires you to have Git and Node.js installed.
git clone git@github.com:luchotc/scratch-gui.git
cd scratch-gui
npm installRunning the project requires Node.js to be installed.
Open a Command Prompt or Terminal in the repository and run:
npm startThen 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 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 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 by running
npm unlinkin both, and start over.
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.
To run linter, unit tests, build, and integration tests, all at once:
npm testTo run unit tests in isolation:
npm run test:unitTo run unit tests in watch mode (watches for code changes and continuously runs tests):
npm run test:unit -- --watchYou can run a single file of integration tests (in this example, the button tests):
$(npm bin)/jest --runInBand test/unit/components/button.test.jsxIntegration tests use a headless browser to manipulate the actual html and javascript that the repo produces. You will not see this activity (though you can hear it when sounds are played!).
Note that integration tests require you to first create a build that can be loaded in a browser:
npm run buildThen, you can run all integration tests:
npm run test:integrationOr, you can run a single file of integration tests (in this example, the backpack tests):
$(npm bin)/jest --runInBand test/integration/backpack.test.jsIf 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