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):
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.
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:://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 git clone https
Download & install node+npm from https://nodejs.org/en/
Launch a node server program on your development machine
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
Change into the phetsims directory (if you were not already there).
cd phetsims/
Run the http server program (with caching turned off to help with iteration)
http-server -c-1
Open a browser to the path for one of the simulations: http://localhost:8080/example-sim/example-sim_en.html
For building the simulations, install the grunt command line utility (may require sudo):
npm install -g grunt-cli
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:
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
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:://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 git clone https
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”.
- Download & install node+npm from http://nodejs.org/en
- 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
- Open a browser to the path for one of the simulations: http://localhost:8080/example-sim/build/phet/example-sim_en_phet.html
- 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. - 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).