1.2 Cloning phetsims on your local machine

Refer to the official documentation here: https://github.com/phetsims/phet-info/blob/master/doc/phet-development-overview.md#getting-started-for-windows

1.2.1 Windows

In order to get the code for an existing PhET simulation, you will need to follow several steps (also shown in the Developing with PhET: Getting Started (on Windows) screencast):

  1. Download and install Git from http://git-scm.com/downloads a. Choose the option to create a desktop icon for “git bash”, if it is not already selected.

  2. Use Git to check out the code for PhET Libraries and Simulations a. Open Git Bash (from the link on your desktop or through the Start menu) b. Create a directory for your development:       mkdir phetsims c. Change directory to phetsims: cd phetsims d. Run these git clone commands:

    git clone https://github.com/phetsims/example-sim.git
    git clone https://github.com/phetsims/assert.git
    git clone https://github.com/phetsims/axon.git
    git clone https://github.com/phetsims/babel.git
    git clone https://github.com/phetsims/brand.git
    git clone https://github.com/phetsims/chipper.git
    git clone https://github.com/phetsims/dot.git
    git clone https://github.com/phetsims/joist.git
    git clone https://github.com/phetsims/kite.git
    git clone https://github.com/phetsims/perennial.git
    git clone https://github.com/phetsims/phet-core.git
    git clone https://github.com/phetsims/phetcommon.git
    git clone https://github.com/phetsims/phetmarks.git
    git clone https://github.com/phetsims/query-string-machine.git
    git clone https://github.com/phetsims/scenery.git
    git clone https://github.com/phetsims/scenery-phet.git
    git clone https://github.com/phetsims/sherpa.git
    git clone https://github.com/phetsims/sun.git
    git clone https://github.com/phetsims/tambo.git
    git clone https://github.com/phetsims/tandem.git
    git clone https://github.com/phetsims/utterance-queue.git
  3. Download & install node+npm from https://nodejs.org/en/

  4. Launch a node server program on your development machine

  5. Install the http-server as a command line program. Use a different command prompt than the one above since the one above will not have the new path for npm       npm install http-server -g

  6. Change into the phetsims directory (if you were not already there).       cd phetsims/

  7. Run the http server program (with caching turned off to help with iteration)       http-server -c-1

  8. Open a browser to the path for one of the simulations: http://localhost:8080/example-sim/example-sim_en.html

  9. For building the simulations, install the grunt command line utility (may require sudo):       npm install -g grunt-cli

  10. Run npm config set save false so that package-lock.json files are not created.

Now you can test modifying the simulation code and see the changes by refreshing the browser. You can also use this to test on remote devices after looking up your ip address. If developing on Chrome, note that it can be helpful to set "Disable cache (while DevTools is open)" (see the devtools settings). Questions should be directed to the Devloping Interactive Simulations in HTML5 Google Group.

1.2.2 Mac

In order to get the code for an existing PhET simulation, you will need to follow these steps:

  1. Download and install Git from http://git-scm.com/downloads a. You may need to allow the system to run apps downloaded from anywhere       i. Open the Apple menu       ii. System preferences       iii. Security & Privacy       iv. Click the lock to make changes       v. Allow apps downloaded from “anywhere”       vi. After you have installed git, you can restore the prior security settings

  2. Use Git to check out the code for PhET Libraries and Simulations a. Open the “Terminal” application       i. Click the search icon (magnifying glass) in the top right of the desktop       ii. Type “Terminal”       iii. Click on the terminal icon a. Create a directory for your development:       mkdir phetsims b. Change directory to phetsims:       cd phetsims d. Run these git clone commands:

    git clone https://github.com/phetsims/example-sim.git
    git clone https://github.com/phetsims/assert.git
    git clone https://github.com/phetsims/axon.git
    git clone https://github.com/phetsims/babel.git
    git clone https://github.com/phetsims/brand.git
    git clone https://github.com/phetsims/chipper.git
    git clone https://github.com/phetsims/dot.git
    git clone https://github.com/phetsims/joist.git
    git clone https://github.com/phetsims/kite.git
    git clone https://github.com/phetsims/perennial.git
    git clone https://github.com/phetsims/phet-core.git
    git clone https://github.com/phetsims/phetcommon.git
    git clone https://github.com/phetsims/phetmarks.git
    git clone https://github.com/phetsims/query-string-machine.git
    git clone https://github.com/phetsims/scenery.git
    git clone https://github.com/phetsims/scenery-phet.git
    git clone https://github.com/phetsims/sherpa.git
    git clone https://github.com/phetsims/sun.git
    git clone https://github.com/phetsims/tambo.git
    git clone https://github.com/phetsims/tandem.git
    git clone https://github.com/phetsims/utterance-queue.git

When running the first git clone command, it may show a dialog that says: The “git” command requires the command line developer tools. Would you like to install the tools now? In this case, press “Install”.

  1. Download & install node+npm from http://nodejs.org/en
  2. Launch a node server program on your development machine a. Install the http-server as a command line program using the Terminal       npm install http-server -g If that yields an error like “Please try running this command again as root/Administrator.” then run using the sudo command like so:       sudo npm install http-server -g b. Change into the phetsims directory (if you were not already there).       cd phetsims/ c. Run the http server program (with caching turned off to help with iteration)       http-server -c-1
  3. Open a browser to the path for one of the simulations: http://localhost:8080/example-sim/build/phet/example-sim_en_phet.html
  4. For building the simulations, install the grunt command line utility (may require sudo):       npm install -g grunt-cli Now you can test modifying the simulation code and see the changes by refreshing the browser http://localhost:8080/example-sim/example-sim_en.html. You can also use this to test on remote devices after looking up your ip address. Questions should be directed to the Developing Interactive Simulations in HTML5 Google Group.
  5. Run npm config set save false so that package-lock.json files are not created.

Now you can test modifying the simulation code and see the changes by refreshing the browser. You can also use this to test on remote devices after looking up your ip address. If developing on Chrome, note that it can be helpful to set "Disable cache (while DevTools is open)" (see the devtools settings). Questions should be directed to the Devloping Interactive Simulations in HTML5 Google Group.

Citation: PhET Interactive Simulations. They can be found here at: https://github.com/phetsims
Available under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0).