Skip to content

Getting Started

Thomas Weber edited this page Oct 31, 2020 · 46 revisions

These are the instructions for setting up the TurboWarp development environment on your own computer.

If you just want to use TurboWarp, visit https://turbowarp.org/. You don't need to follow these instructions.

Dependencies

Make sure you have these installed:

You might have to restart your terminal or computer for them to be fully installed.

Repos

TurboWarp is organized in the same way as Scratch. Of note to TurboWarp:

  • TurboWarp/scratch-gui: the interface for the Scratch player and the TurboWarp website
  • TurboWarp/scratch-vm: the compiler
  • TurboWarp/scratch-render: Scratch's renderer with some relatively minimal changes

The process of getting each individual repo is essentially the same as Scratch, see: https://github.com/LLK/scratch-gui/wiki/Getting-Started

Getting the GUI

The GUI is the minimum to TurboWarp built.

# if you intend to modify the code and submit a PR, make a fork in GitHub and clone that repository instead
git clone https://github.com/TurboWarp/scratch-gui
cd scratch-gui
npm install
npm start

http://localhost:8601/

scratch-gui does not contain the source code for the renderer or the VM/compiler. These must be gotten separately:

Getting the VM and renderer

Clone everything:

# if you intend to modify the code and submit a PR, make a fork in GitHub and clone that repository instead
git clone https://github.com/TurboWarp/scratch-vm
git clone https://github.com/TurboWarp/scratch-render

cd scratch-vm
npm install
npm link
cd ..

cd scratch-render
npm install
npm link
cd ..

cd scratch-gui
npm link scratch-vm scratch-render

This will setup the repositories and link them so that scratch-gui will use your local versions instead of scratch-vm and scratch-render instead of the ones on GitHub.

Building for production

When deploying TurboWarp to a website, you should enable production mode. This will result in faster execution and a greatly reduced file size.

# in the `scratch-gui` folder

# mac, linux
NODE_ENV=production npm run build

# windows command prompt (untested)
set NODE_ENV=production
npm run build

# windows powershell
$env:NODE_ENV="production"
npm run build

By default TurboWarp generates links like https://turbowarp.org/editor.html#123 However, by setting ROOT=/ and ROUTING_STYLE=wildcard, you can get routes like https://turbowarp.org/123/editor instead. Note that this requires a server that will setup the proper aliases. The webpack development server in scratch-gui is setup for this. For production you'd want something more like https://github.com/TurboWarp/turbowarp.org

The build output is in the build folder.

Clone this wiki locally