Skip to content
This repository has been archived by the owner on Sep 6, 2021. It is now read-only.

Live Preview URL Mapping

Jump to bottom
redmunds edited this page Oct 24, 2012 · 18 revisions

Live Preview URL Mapping

Introduction

Live Preview currently opens the local page directly in (Chrome) browser using the file protocol, as in file:///path/to/index.html. This limits Live Preview to only client-side HTML documents using document-relative (<img src="img/photo.jpg" />) and absolute URLs (<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" ></script>).

This proposal will allow Live Preview to open pages on a server so paths that have to be interpreted by a server such as site-root-relative (<img src="/img/photo.jpg" />) and protocol-relative URLs (<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" ></script>) can be used. Also, server-side file extensions such as .php and .shtml pages with include files can also be used in Live Preview.

The backlog entry is in Trello and also brackets/issue #1920.

Base URL

Base URL maps to the root folder of the project. It is assumed that server path structure mirrors folder structure on disk.

Preferences

Preferences are project-specific.

A gear icon will be placed next to Project name (and drop down menu). Clicking this icon opens a preference dialog. Dialog will have the following field:

  • A text field to specify Base URL. The base URL maps to base URL of the web site on server (e.g. http://localhost/path/to/site/root/). If URL is specified, then it is used plus project-relative path to file.

By default, the field is blank. If field is blank, the path to file is used.

Live Preview

If you click Live Development button with file open that has a server-side file extension and a Base URL has not yet been specified, then preferences dialog is auto-opened.

Brackets has a list of server-side file extensions that are recognized in addition to .htm/.html. Default set of server-side file extensions is: .sthm,.shtml,.php,.php3,.php4,.cfm,.cfml. These will be defined in package.json, but will not be editable via UI until Brackets gets a Preferences Dialog.

Once base URL specified, Live Development button is clickable while any file server-side file extension, in addition to .htm/.html.

When a Base URL is specified and Live Development button is clicked, the path generated is Base URL + project-specific path to file.

Clone this wiki locally