Skip to main content

Notice: this Wiki will be going read only early in 2024 and edits will no longer be possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.

Jump to: navigation, search

Difference between revisions of "Orion/How Tos/Demo"

< Orion‎ | How Tos
(Launching your website for testing purposes: Rewrite to refer to the newer site-editing UI.)
(Add Category Orion)
 
(One intermediate revision by one other user not shown)
Line 31: Line 31:
 
</table>''Note: The Target column shows the internal short name of your project. In your case it will not be '' /Q ''.''</div>
 
</table>''Note: The Target column shows the internal short name of your project. In your case it will not be '' /Q ''.''</div>
  
* Under the "Mount at" column, click on <code>/mountPoint</code> and change it to <code>/</code> (a single slash).
+
* Under the "Mount at" column, click on <code>/mountPoint</code> and change it to <code>/</code> (a single slash). This tells Orion to mount the <code>/website</code> project at the root of your site.
** This tells Orion to mount the <code>/website</code> project at the root of your site.
+
 
* 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.  
 
* 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.
 
* Ctrl-click on the link to the launched site to open it in a new tab.
Line 44: Line 43:
 
= Demo Flow 2: Self-hosting setup =
 
= Demo Flow 2: Self-hosting setup =
 
to be written
 
to be written
 +
 +
[[Category:Orion]]

Latest revision as of 19:45, 11 February 2014

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
  • Enable http://wiki.eclipse.org/Orion/Server_admin_guide#Automatic_git_projects
  • 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", click the Add... button, and choose your website project from the drop-down menu. This will add a new entry to the table, giving you something like this:
Workspace path Target Mount at
/website /Q /mountPoint
Note: The Target column shows the internal short name of your project. In your case it will not be /Q .
  • Under the "Mount at" column, click on /mountPoint and change it to / (a single slash). This tells Orion to mount the /website project at the root of your site.
  • 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

Back to the top