Viewing on a Local Server - adampresley/sublime-view-in-browser GitHub Wiki

The View in Browser plugin also supports the ability to view files in the context of a local server. So if, for example, you have a local Apache, Tomcat, or some other application server running you can configure this plugin to open your file prefixed with your local URL.

For example if you are running a local web application on http://localhost:8080, and your file is named login.html, when you activate this plugin your browser will open up http://localhost:8080/login.html.

Configure Your Project

To use this feature you must have set up a Sublime Text project. If you are unsure about what projects are or how they work I recommend reading the Sublime Text help page regarding projects. Once you have a project set up you will need to configure it so that the View In Browser plugin knows about your local environment for this project.

To start you must edit your project file. To do this select Edit Project under the Project menu. If you don't see this menu item then ensure you have the project open. View In Browser requires you to specify two settings. ok

  • baseUrl - The URL to prefix your files with
  • basePath - The path to where your site/application files live

Let's say you have a project file in Linux or OS X that looks like this.

{
   "folders":
   [
      {
         "path": "/home/awesomeBob/code/python/my-cool-website"
      }
   ]
}

In Windows this might look more like this.

{
   "folders":
   [
      {
         "path": "/c/Users/awesomeBob/code/python/my-cool-website"
      }
   ]
}

Using the above example where our site can be viewed at the URL http://localhost:8080, here's what our project file should look like for Linux/OS X and Windows.

Linux/OS X

{
   "folders":
   [
      {
         "path": "/home/awesomeBob/code/python/my-cool-website"
      }
   ],
   "settings": {
      "sublime-view-in-browser": {
         "baseUrl": "http://localhost:8080",
         "basePath": "/home/awesomeBob/code/python/my-cool-website"
      }
   }
}

Windows

{
   "folders":
   [
      {
         "path": "/c/Users/awesomeBob/code/python/my-cool-website"
      }
   ],
   "settings": {
      "sublime-view-in-browser": {
         "baseUrl": "http://localhost:8080",
         "basePath": "C:\\home\\awesomeBob\\code\\python\\my-cool-website"
      }
   }
}

The important thing here is the new key settings. This part allows you to define project-specific settings. In our case we want to define settings for the View In Browser plugin, and we do that by adding a new key beneath this called sublime-view-in-browser. This is where your baseUrl and basePath settings go.

Note to Windows Users

Notice on Windows how the path as defined by Sublime Text for your project is using a Linux-style syntax. This does not work in the View In Browser settings, and is a source of common confusion. Use Windows-style paths when working in Windows.