README.md

scratch-gui

Scratch GUI is a set of React components that comprise the interface for creating and running Scratch 3.0 projects

Installation

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

You may want to add --depth=1 to the git clone command because there are some large files in the git repository history.

Getting started

Running the project requires Node.js to be installed.

Running

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

Developing alongside other Scratch repositories

Getting another repo to point to this code

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.

Here's how to link your local scratch-gui code to another project's node_modules/scratch-gui.

Configuration

1. In your local scratch-gui repository's top level:

   1. Make sure you have run npm install
   2. Build the dist directory by running BUILD_MODE=dist npm run build
   3. Establish a link to this repository by running npm link

2. From the top level of each repository (such as scratch-www) that depends on scratch-gui:

   1. Make sure you have run npm install
   2. Run npm link scratch-gui
   3. Build or run the repositoriy

Using npm run watch

Instead of BUILD_MODE=dist npm run build, you can use BUILD_MODE=dist npm run watch instead. This will watch for changes to your scratch-gui code, and automatically rebuild when there are changes. Sometimes this has been unreliable; if you are having problems, try going back to BUILD_MODE=dist npm run build until you resolve them.

Oh no! It didn't work!

If you can't get linking to work right, try:

• Follow the recipe above step by step and don't change the order. It is especially important to run npm install before npm link, because installing after the linking will reset the linking.
• Make sure the repositories are siblings on your machine's file tree, like .../.../MY_SCRATCH_DEV_DIRECTORY/scratch-gui/ and .../.../MY_SCRATCH_DEV_DIRECTORY/scratch-www/.
• Consistent node.js version: 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.
• If nothing else works, unlink the repositories by running npm unlink in both, and start over.

Testing

Documentation

You may want to review the documentation for Jest and Enzyme as you write your tests.

See jest cli docs for more options.

Running tests

NOTE: If you're a windows user, please run these scripts in Windows cmd.exe instead of Git Bash/MINGW64.

Before running any tests, 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:

npm test

Running unit tests

To run unit tests in isolation:

npm run test:unit