Jump to: navigation, search

Orion/How Tos/Demo

On this page, we list some common things you might want to show when demoing Orion. It is organized into typical developer workflows.


  • Download Orion.
  • Install Firefox 3.6.x with Firebug (for demoing the Firebug integration)
  • Install Chrome (for demoing the editor performance).
  • Follow the steps on the Firebug Dyne wiki page to install the Dyne extension which adds an edit button to Firebug's script panel.
  • If you are on a Mac, enter the following in a Terminal session without the quotes: "sudo ifconfig lo0 alias up; sudo ifconfig lo0 alias up" - this will enable and as alternate IP addresses for localhost. On Windows and Linux, this is already the case without you having to configure anything.
  • Add the following to your eclipse.ini file (or the launch configuration if you launch from within Eclipse): -Dorg.eclipse.orion.server.hosting.virtualHosts=,
  • Launch Orion.

Demo Flow 1: Working on a web site

Assume you want to work on a new website that it meant to be HTML5-compatible.

Starting a new project

  • Use Chrome or Firefox (not Safari since it auto-unzips zip files).
  • Start by going to http://initializr.com - this is the equivalent of a "new project" wizard. You can select the options you like and then click on the download button to download a zip file.
  • Log into Orion (http://localhost:8080)
  • Create a new top-level folder. Call it something like "website".
  • Click on the "More" menu next to the new folder "website" and select Import.
  • Select the zip file you downloaded from initializr.com and upload it. This should populate your website folder.
  • Right-click on the folder to show that it is indeed a regular hyperlink. Select "Open in new tab" to show that you can have two instances of the navigator.

Launching your website for testing purposes

  • Ctrl-click on the "Sites" link in the header to open the site configuration list in a new tab. This is where you can "launch" your website for testing - just the files for that top-level folder will be available on a different base URL, without being password-protected. This will allow you to test your website in different browsers as if it was running on a real server.
  • Click the "+" button to create a new site configuration. Enter a simple name, you can just use the same name as the top-level folder "website". Click on the new site configuration to edit it.
  • Under "mappings", enter the following:
  • Replace the "Q" with the internal short name for your website project. To find the short name, go back to the tab where the second navigator instance only shows files from this folder and look at the location bar. If the location is http://localhost:8080/navigate-table.html#/file/S/?depth=1, your short name is "S" not "Q".
  • Click the Save button to save your changes, and navigate back to the list of site configurations. Click the Start button next to your new site configuration, this should launch it at
  • Ctrl-click on the link to the launched site to open it in a new tab.

Working with Git

  • Orion (as of M6) currently creates a new Git repository for each newly created top-level folder. In the navigator, click on "More" next to this folder and select "Git Status". T
  • Go back to the navigator and open the editor on the index.html file of your website. Make a simple change and save, then reload the tab opened in the previous step to see your changes.