Getting Started

Prerequisites

To get started with reach you first need to install npm on your system. reach uses npm to manage its development dependencies.

With npm installed, clone the reach repository and run npm install.

Development Environment

The reach development environment is set up so that you can make changes to reach.js (or one of it's included scripts), and then reload a running twine story in your browser, seeing the code changes immediately (without having to re-add the updated story format in the twine editor). Any javascript errors will point back to the original .js script file.

This is accomplished by leaving an http server running on your computer, serving the files from the src folder.

Steps To start the development environment and to add the local reach story format to Twine:

• In the cloned reach folder run the command: npm run devserver. This will start serving files from ./src at http://localhost:8000
• Open Twine (the local native app, not the website). Click Formats -> Add a New Format
• Add: http://localhost:8000/format-dev.js
• Open the twine story that you want to use with reach. Click Change Story Format and select reach
• Run the story. It will now run using the reach story format. You can verify that in the browser console.
• If you make a change to src/reach.js or any of the other .js files that are included from reach.js, you can imediately see the changes if you clear the browser cache (cmd+opt+e on Safari & Chrome), then reload the story in the browser (cmd+r).
• If you have to make a change to format-dev.js for any reason, then to see the changes you will have to remove, then re-add the story format in the twine editor. But making changes to this file is not as comman as the included .js files.

Building the Production Version

The production build of reach is designed to be as compact as possible to make twine/reach stories more distributable. All of the reach scripts, underscore.js and a default 360 background images are packed together and stored entirely in the resulting story format description file.

From the reach folder:

• Run npm run build.
• Open makeformat.js and increment the build number. This makes it easier to add the new format to the twine editor and force it to overwrite the previous one.
• Run node makeformat.js
• The resulting file will be ./dist/format-x.y.z-dist.js (with x,y,z depending on the version in makeformat.js). The reach.js files and underscore-min.js are both minified and integrated into this new format file. The only external Githubissues.
• Githubissues is a development platform for aggregating issues.