Streamline Localhost Project Preview with Sublime Text

During development, we often switch back and forth between browsers and code editors to view the results of our code. If you are working in Sublime Text, you will notice that files open in browsers using the file:// protocol.

If you are developing a PHP-based website, you need to view your site under the HTTP protocol, making file:// unsuitable. The same requirement applies when testing your website in Adobe Edge Inspect to preview the site on mobile devices.

If you are using Sublime Text, here is a quick tip to streamline your workflow. You can quickly preview your website in the browser under the HTTP protocol. Let’s explore how to do it.

SidebarEnhancement

The first step is to install SidebarEnhancement. It is a Sublime Text plugin that adds several new functionalities to the Sublime Text sidebar. You can install this plugin using Package Control.

If Package Control does not work for you, you can install it via Git by running the following command in Terminal:

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

Once installed, you will see 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 using the file:// protocol.

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

In this file, specify the project path, testing URL, and production URL. Here is an example:

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

The first line specifies the project folder path on your computer. url_testing specifies the testing URL or development URL, which usually starts with localhost.

The url_production specifies the production URL, which is the online URL that makes the website accessible via the Internet.

You can also add multiple projects like this:

{
 // 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/project3": {
 "url_testing": "http://localhost/project3",
 "url_production": "http://www.project3.com"
 }
}

Shortcut Keys

There are shortcut keys to make this process easier: press F12 to open project files in the testing URL and Alt + F12 to open the project in the production URL.

To change keys (in case of conflicts), go to Preferences > Package Settings > Side Bar > Key Bindings – User and make your changes there. Add the following code 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 your localhost server is running. If you encounter any issues or have trouble following this tutorial, feel free to ask your questions in the comments below.