The UURAGE Scenario Editor is a web application component for editing communication scenarios.

A server stack that includes PHP >= 7.4.

For online use, any small web hosting package should do; Linux environments are more common and better supported than Windows servers. For offline, local use on Windows, XAMPP is a reasonable option.

Place all files in a directory and set the public subdirectory as the web root (DocumentRoot in Apache). If you cannot change the web root, but you have write access to the directory that contains the web root, you can place all files there and move the contents of public into the web root.

Create a configuration XML file based on the config language with the namespace http://uurage.github.io/ScenarioEditor/config/namespace and put it in the public/editor directory with the filename config.xml. A tutorial is also available.

The purpose of the NPM package is to manage development dependencies. We use technologies that involve building (transforming) files (see below). The NPM package allows you to build everything at once and to build files that have changed since the last build every time you save a file.

Install Node.js and execute the following commands to install the development dependencies:

npm install -g gulp-cli
npm install

To build, run gulp build. To build and watch for file changes, run gulp.

The Scenario Editor has a Visual Studio Code task for executing gulp. After installing the dependencies, this task can be executed with Ctrl+Shift+B in the code editing window.

The Scenario Editor uses a collection of Sass files for its styling. There are several ways to compile Sass to CSS.

See "NPM package" above. Run gulp sass to compile once.

When compiling using the standard Sass compiler, you need to watch the folder public/editor/sass to compile to public/editor/css.

You can live-reload the changes to your stylesheets in your browser by running gulp stream, which uses Browsersync and uses localhost as the proxy hostname.