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.

Setup

• Download Orion.
• If you are on a Mac, enter the following in a Terminal session without the quotes: "sudo ifconfig lo0 alias 127.0.0.2 up; sudo ifconfig lo0 alias 127.0.0.3 up" - this will enable 127.0.0.2 and 127.0.0.3 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=127.0.0.2,127.0.0.3
• Launch Orion.

Needed for demo flow 2 only:

• Install Firebug into Firefox 3.6.x
• Follow the steps on the Firebug Dyne wiki page to install the Dyne extension which adds an edit button to Firebug's script panel.

Demo Flow 1: Work on a simple web site

Pretend you want to start working on a new website. As you go along this demo, you should try to keep browser tabs open and only close them at the end of this demo flow.

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:

    [{"Source":"/","Target":"/Q"}]

• 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 http://127.0.0.2:8080.
• 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. You might have noticed the .git folder that was created for you. In the navigator, click on "More" next to this folder and select "Git Status". This will show all changes since the project got created. You should see new files from your import operation. Using the down arrow button, move all files into the staged area, enter a commit comment like "Initial commit after import" and click the commit button.
• 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 that shows the launched website to see your changes.
• Go to the Git status page and reload. You should see a changed file in the unstaged area. Click on it to see what you changed. You can also click on the side-by-side comparison button for a different compare view.

This is the end of the "work on a simple web site" demo flow. Feel free to make some more changes, do more commits, etc.

Demo Flow 2: Self-hosting setup

to be written