1. Home
  2. Knowledge Base
  3. Ghostlab: Getting Started
  4. Running Ghostlab for the first time

On Mac, once you’ve downloaded the Ghostlab disk image (Ghostalb3.dmg), open it and drag Ghostlab3 into the applications folder. On Windows, double-click the downloaded installer and follow the installation instructions.

kb_firsttime_1

Start Ghostlab either from /Applications (Mac) or via the Desktop / Application Menu Shortcut created during installation (Windows). When Ghostlab starts for the first time, you’ll see the site list with one single entry – the Ghostlab Testing Page. The site list lets you add all the projects you’re working on by simply dragging in a folder from your local filesystem or a URL from your browser. Alternatively, you can use the add site dialog accessible through the + button.

kb_firsttime_2

You can start a site in Ghostlab by using its play button in the site list. Once you’ve pressed it, Ghostlab will start up the HTTP server to which your browsers and devices can connect to. When you start the server, the UI will switch to the device list mode – you’ll see the running site including some action buttons on the top, and below you’ll see any connected clients as well as options and actions for them. At any time, you can switch back to the site list by using the back button in the top left. Note that every icon that does something has a hint that shows when you hover over it for a little while.

kb_firsttime_3

 

While the server is running, use the rocket icon to launch the site served by Ghostlab in your default browser. The buttons next to it let you show the site preferences (top left), stop the server (top middle), launch the site in other installed browsers (bottom left) or show a QR code of the server URL to use on a device QR code reader. To the left of the buttons, you can see the URL under which the Ghostlab server is currently available.

When you open the site settings, attempt to inspect a client, or are editing the preprocessor or general preferences, Ghostlab will open up a wider tray to the right. You can close the tray by clicking the same icon again (e.g. when it opens because you have chosen to edit the site settings, simply click the site settings button again to close it). Alternatively, you can close the tray from the site list using the tray icon.

kb_firsttime_4

Now launch the running site in your default browser. It should connect to the site and show up in the client list. You’re all set!

kb_firsttime_5

 

 

Was this article helpful?

Related Articles