This tutorial was originally posted here. I've decided to recreate it as its own topic because I think the information is useful, but difficult to find in its original form.

The goal: Download the Scratch souce code and prepare your computer to be ready to create Scratch extensions.

Here's how I set up my dev environment for Scratch 3.0. Every edit to the source code causes the entire page to be reloaded automatically for you. (Future readers note that this post could become outdated over time. Try referring to this page as well.)

First of all, it's important to understand the structure of the npm packages used by scratch. Scratch-gui is the top-level piece of code, and it imports all of the other parts of the code from separate packages using npm:



By default, the latest stable version of each is uploaded to npm by the Scratch team (gui, vm, blocks, and render) and will be automatically downloaded to the node_modules folder as a dependency of scratch-gui when you run npm install (from within the scratch-gui folder).

If you just want to edit the GUI, life is good. As long as you don't plan on changing any of the dependent packages (vm, blocks, or render), it's okay for them to just be pulled automatically from npm:

1. I'd recommend creating a directory in which all of you Scratch 3.0 modifications can take place. Once you create it, cd into it in a terminal.

2. Run git clone https://github.com/LLK/scratch-gui

3. cd scratch-gui

4. npm install Do this once to install all of the dependencies. From then on, you only need to run this command if the dependencies (in package.json) ever change.

5. npm start This will start the development server that allows you to see scratch-gui in action. Open the url it gives you to view the result. (By default it's http://localhost:8601). This command will keep running in the background and will automatically refresh the page every time you save a change to the scratch-gui code. (A good way to test that this is working is by making a change to one of the colors in src/css/colors.css) Once you're completely done, press ctrl+c to stop the development server.

Things get trickier if you want to modify the dependencies (the vm, render, or blocks). To do so, we'll use the npm link command to replace the version downloaded from npm automatically with a version we manually downloaded and are able to edit.

For every dependency (vm, render, or blocks) you want to edit, perform the following steps:
1. Stop the scratch-gui dev server if you happen to have it running. (The dev server is what gets triggered when you run npm start from within scratch-gui. See step 5 of the previous list.)

2. cd into the directory above scratch-gui. (If you run ls, “scratch-gui” should be in the output.) This step isn't necessary, but I highly recommend it, as it will help keep everything nice and organized.

3. Clone the dependency you want to edit. It should be one of these commands:

• VM: git clone https://github.com/LLK/scratch-vm
  
• Render: git clone https://github.com/LLK/scratch-render
  
• Blocks: git clone https://github.com/LLK/scratch-blocks
  

4. Only if you're installing scratch-blocks, run git clone https://github.com/google/closure-library as well.

5. cd into the directory you just created using one of these commands:

• cd scratch-vm
  
• cd scratch-render
  
• cd scratch-blocks
  

6. npm install

7. npm link This tells npm to store this location as the place where the dependency you're working with is located. Later this will allow scratch-gui to use your current location as the dependency in place of the version downloaded from npm.

8. This step will allow your changes to the newly-downloaded dependency to be reflected in the GUI. It is different for each dependency, so check the correct one:

• scratch-vm and scratch-render: Run npm run watch. This will start another dev server which makes changes to the dependency trigger the automatic reload of scratch-gui. You'll need to keep this command running and open another terminal to do anything else. As always, you can stop it with ctrl+c when you're finished.
  
• scratch-blocks: This one is a little tougher. Every time you make a change to the code in scratch-blocks, you need to manually run the npm run prepublish command to rebuild scratch-blocks. (Make sure you run the command from the scratch-blocks directory!) Then, from the scratch-gui directory, stop and restart the dev server (ctrl+c to stop it if it's running, then npm start to restart it).
  

9. cd back to scratch-gui. If you're using the directory structure I recommended, you can run cd ../scratch-gui

10. Use the npm link DEPENDENCY_NAME command to pull in the local dependency you just downloaded in place of the regular one from npm:

• npm link scratch-vm
  
• npm link scratch-render
  
• npm link scratch-blocks
  

11. Run npm start to start the scratch-gui dev server. By default, it will launch at http://localhost:8601/ (just like before)

And how can people make an extension once they have done this?

SimpleScratch wrote:

And how can people make an extension once they have done this?

That's a great question, but it probably makes sense to include it as a separate tutorial. I don't personally have the time to make one right now, but if someone has a link they'd like to share in this topic that'd be great.

This is not really an answer to SimpleScratch, because I'm still trying to grok _how_ to put the pieces together, but one piece of the puzzle, I believe, is https://github.com/LLK/scratch-vm/wiki/Scratch-3.0-Extensions-Specification, the “Scratch 3.0 Extensions Specification Annotated example”.

What I really want is a walk-through/tutorial to go from zero to extension creation. It looks like PullJosh has kindly written chapter 1.

<rant>Did they really have to make it so hard? Why not have Scratch upload an XML/JavaScript configuration if you want to? I thought the age of “priestly knowledge” in computer applications went out over a decade ago. And this from LLK??? </rant>

If what you what to do is to write an extension, not a mod, then I don't think there is any reason to modify scratch-vm, scratch-render, or scratch-blocks. (Sheep_maker made a mod that allows you to use arbitrary extensions with Scratch 3.0: https://scratch.mit.edu/discuss/post/3445574/)

edit: nvm, resolved the issue by myself

so do you need Linux or can you use WSL (Windows Subsystem for Linux) OR install git and npm for windows and use command prompt

chop2008 wrote:

so do you need Linux or can you use WSL (Windows Subsystem for Linux) OR install git and npm for windows and use command prompt

All of the commands listed should work in every environment. So you can use Linux or WSL, but the windows command prompt will work just fine as well.

You'll just have to make sure that you have the right tools (git and npm) installed in whatever environment you're using.

PullJosh wrote:

…
11. Run npm start to start the scratch-gui dev server. By default, it will launch at http://localhost:8601/ (just like before)

I've followed your clear instructions (jumping the blocks part as I don't want to change the blocks code). How can I manipulate vm to have some execution data saved? which is the file surery executed when vm is running? is it virtual-machine.js inside scratch-vm/src folder? Is surely start () executed? I've tried to put something inside there, but nothing happens, how to refresh the code? Thanks in advance

it's difficult to set up env under windows 10,should change some code in a python file, but centos is ok.

It's difficult for a non-technical person to completely set up a dev environment, I am looking for a video tutorial.

Is it then possible to deploy the personl version of Scratch to your own web server?
I mean, on the web, not localhost

Take a look at this series on developing scratch 3 extensions.

This is a tutorial to customise scrach

https://medium.com/@hiroyuki.osaki/how-to-develop-your-own-block-for-scratch-3-0-1b5892026421

does it work on the raspberry pi 4 (npm or something got some weird errors while installing ) ???

ssavas06 wrote:

https://medium.com/@hiroyuki.osaki/how-to-develop-your-own-block-for-scratch-3-0-1b5892026421

thx

I hade some weird errors on my raspberry pi 4 as well

PullJosh wrote:

This tutorial was originally posted here. I've decided to recreate it as its own topic because I think the information is useful, but difficult to find in its original form.

The goal: Download the Scratch souce code and prepare your computer to be ready to create Scratch extensions.

Here's how I set up my dev environment for Scratch 3.0. Every edit to the source code causes the entire page to be reloaded automatically for you. (Future readers note that this post could become outdated over time. Try referring to this page as well.)

First of all, it's important to understand the structure of the npm packages used by scratch. Scratch-gui is the top-level piece of code, and it imports all of the other parts of the code from separate packages using npm:



By default, the latest stable version of each is uploaded to npm by the Scratch team (gui, vm, blocks, and render) and will be automatically downloaded to the node_modules folder as a dependency of scratch-gui when you run npm install (from within the scratch-gui folder).

If you just want to edit the GUI, life is good. As long as you don't plan on changing any of the dependent packages (vm, blocks, or render), it's okay for them to just be pulled automatically from npm:

1. I'd recommend creating a directory in which all of you Scratch 3.0 modifications can take place. Once you create it, cd into it in a terminal.

2. Run git clone https://github.com/LLK/scratch-gui

3. cd scratch-gui

4. npm install Do this once to install all of the dependencies. From then on, you only need to run this command if the dependencies (in package.json) ever change.

5. npm start This will start the development server that allows you to see scratch-gui in action. Open the url it gives you to view the result. (By default it's http://localhost:8601). This command will keep running in the background and will automatically refresh the page every time you save a change to the scratch-gui code. (A good way to test that this is working is by making a change to one of the colors in src/css/colors.css) Once you're completely done, press ctrl+c to stop the development server.

Things get trickier if you want to modify the dependencies (the vm, render, or blocks). To do so, we'll use the npm link command to replace the version downloaded from npm automatically with a version we manually downloaded and are able to edit.

For every dependency (vm, render, or blocks) you want to edit, perform the following steps:
1. Stop the scratch-gui dev server if you happen to have it running. (The dev server is what gets triggered when you run npm start from within scratch-gui. See step 5 of the previous list.)

2. cd into the directory above scratch-gui. (If you run ls, “scratch-gui” should be in the output.) This step isn't necessary, but I highly recommend it, as it will help keep everything nice and organized.

3. Clone the dependency you want to edit. It should be one of these commands:

• VM: git clone https://github.com/LLK/scratch-vm
  
• Render: git clone https://github.com/LLK/scratch-render
  
• Blocks: git clone https://github.com/LLK/scratch-blocks
  

4. Only if you're installing scratch-blocks, run git clone https://github.com/google/closure-library as well.

5. cd into the directory you just created using one of these commands:

• cd scratch-vm
  
• cd scratch-render
  
• cd scratch-blocks
  

6. npm install

7. npm link This tells npm to store this location as the place where the dependency you're working with is located. Later this will allow scratch-gui to use your current location as the dependency in place of the version downloaded from npm.

8. This step will allow your changes to the newly-downloaded dependency to be reflected in the GUI. It is different for each dependency, so check the correct one:

• scratch-vm and scratch-render: Run npm run watch. This will start another dev server which makes changes to the dependency trigger the automatic reload of scratch-gui. You'll need to keep this command running and open another terminal to do anything else. As always, you can stop it with ctrl+c when you're finished.
  
• scratch-blocks: This one is a little tougher. Every time you make a change to the code in scratch-blocks, you need to manually run the npm run prepublish command to rebuild scratch-blocks. (Make sure you run the command from the scratch-blocks directory!) Then, from the scratch-gui directory, stop and restart the dev server (ctrl+c to stop it if it's running, then npm start to restart it).
  

9. cd back to scratch-gui. If you're using the directory structure I recommended, you can run cd ../scratch-gui

10. Use the npm link DEPENDENCY_NAME command to pull in the local dependency you just downloaded in place of the regular one from npm:

• npm link scratch-vm
  
• npm link scratch-render
  
• npm link scratch-blocks
  

11. Run npm start to start the scratch-gui dev server. By default, it will launch at http://localhost:8601/ (just like before)

How would i do that on windows?

the CPU is burning

ideapad-320 wrote:

How would i do that on windows?

On the command prompt, run the commands mentioned above.
However I wish it would be so easy, as mentioned. For e.g. the scratch-blocks would require WSL. However if you just need to write an extension, ignore all and just download and build scratch-vm and scratch-gui.