Quickly Preview Localhost Project with Sublime Text

During developement, we would often go back and forth between the browsers and code editors to view the result of our code. If you are working in Sublime Text, you will find that files will open in the browsers with a file:// protocol.

But If you are developing a PHP-based website, you have to view your site under HTTP protocol, thus file:// will not work in this case. The same is required when you want to test your website in Adobe Edge Inspect otherwise, you can’t preview the site on mobile devices.

Recommended Reading: Working With Code Snippets In Sublime Text

If you are using Sublime Text, we would like to give you a quick tip that could streamline your workflow when working on a project. You can quickly preview your website in the browser under a HTTP protocol. Let’s check it out.

SidebarEnhancement

The first thing you need to do is to install SidebarEnhancement. It is a Sublime Text plugin that adds several new functionalities in the SublimeText sidebar. You can install this plugin with Package Control.

But if Package Control does not work for you, you can install it through Git by running the following command line in Terminal.

  cd ~/Library/Application Support/Sublime Text 3/Packages
  git clone https://github.com/titoBouzout/SideBarEnhancements.git
  

Once installed, you will find several new options when you right-click on the sidebar. You can view your project in a browser by selecting Open in Browser. This will open the files in the browser with file:// protocol, as mentioned.

To change this so that it will open with an HTTP protocol, right-click on the project folder, and select Projects > Edit Preview URLS. It will open a JSON file named SidebarEnhancements.json in a new tab.

In this file, we will specify several things: the project path, the testing URL, and the production URL. here is an example:

  {
  	"/Users/thoriq/Sites/project": {
  		"url_testing":"http://localhost/project",
  		"url_production":"http://www.project.com"
  	}
  }
  

The first line in the example specifies the project folder path in the computer. url_testing specifies the testing of URL or the development URL. In my case, a testing URL usually starts with localhost.

Lastly, the url_production specifies the production URL, this is the URL that puts the website online and allows it to be accessed through the Internet.

In addition, you can also add multiple projects, like so.

  {
  	// 1st Project 
  	"/Users/thoriq/Sites/project": {
  		"url_testing":"http://localhost/project",
  		"url_production":"http://www.project.com"
      }
  	
  	// 2nd Project
      "/Users/thoriq/Sites/project2": {
  		"url_testing":"http://localhost/project2",
  		"url_production":"http://www.project2.com"
      }
  
      // 3rd Project
      "/Users/thoriq/Sites/project2": {
  		"url_testing":"http://localhost/project3",
  		"url_production":"http://www.project3.com"
      }
  }
  

The Shortcut Keys

There are shortcut keys to make this easier for you: hit F12 to open project files in testing URL, and Alt + F12 to open the project in production URL.

To change keys (in case of conflict in use), go over to Preferences > Package Setting > Side Bar > Key Bindings â€" Users, and make your changes there. Add the following codes and change the values in the "keys" string.

  [
  	{ "keys": ["F12"],
  		"command": "side_bar_open_in_browser" ,
  		"args":{"paths":[], "type":"testing"}
  	},
  	{ "keys": ["alt+F12"],
  		"command": "side_bar_open_in_browser",
  		"args":{"paths":[], "type":"production"}
  	}
  ]
  

For example:

  [
  	{ "keys": ["command+shift+r"],
  		"command": "side_bar_open_in_browser" ,
  		"args":{"paths":[], "type":"testing"}
  	},
  	{ "keys": ["command+shift+d"],
  		"command": "side_bar_open_in_browser",
  		"args":{"paths":[], "type":"production"}
  	}
  ]
  

That’s it. Now, you can open your project in a browser under the HTTP protocol quickly using the shortcut keys. Just make sure that your localhost server is running. If somehow you cannot make this work, or have some trouble in applying this tutorial, feel free to pose your question in the comments below.