Set Up Browser Preview in Sublime Text or Dreamweaver

Learn how to optimize your workflow by setting up Sublime Text or Dreamweaver to preview pages quickly, without typing a lengthy localhost URL each time. This guide provides detailed steps for both Sublime Text and Dreamweaver users, tailored to their specific needs and capabilities.

Key Insights

The tutorial covers setting up Sublime Text and Dreamweaver for rapid page previewing, bypassing the need to type a localhost URL each time.
Sublime Text users with the SideBarEnhancements package installed can set up the F12 key for quick page previews. Specific steps are provided to guide users through the process.
Key steps for Sublime Text users include setting up a new file, adding a folder to the project, editing preview URLs, and imputing the appropriate code into the SideBarEnhancements.json file.
Dreamweaver users are guided through a process to efficiently organize their files and make previewing easier, again negating the need for typing localhost URLs.
Essential steps for Dreamweaver users include launching the program, setting up a new site, adding a new server, selecting the appropriate PHP class folder, setting up the web URL, and finally saving these settings.
Both Sublime Text and Dreamweaver users are provided with instructions tailored to Mac and Windows operating systems, ensuring comprehensive guidance regardless of the user's platform.

This exercise is excerpted from Noble Desktop’s past app development training materials and is compatible with iOS updates through 2021. To learn current skills in web development, check out our coding bootcamps in NYC and live online.

Note: These materials are provided to give prospective students a sense of how we structure our class exercises and supplementary materials. During the course, you will get access to the accompanying class files, live instructor demonstrations, and hands-on instruction.

Topics covered in this PHP & MySQL tutorial:

Setting up Sublime Text, Setting up Dreamweaver

Exercise Overview

In this exercise you’ll learn how to set up Sublime Text or Dreamweaver to quickly preview pages without having to type a long localhost URL into the browser every time. If you use a different code editor, you can skip this exercise.

Sublime Text Users Only

If you’re using Sublime Text, and have the SideBarEnhancements package installed, you can set up the F12 key to preview the page instead of typing out the localhost URL in a browser.

In Sublime Text, close any files or windows you may have open.
In Sublime Text, go to File > New File.
Go to Project > Add Folder to Project and:
- Mac: Navigate to Hard Drive > Applications > MAMP > htdocs. Select the phpclass folder and click Open.
- Windows: Navigate to C: > xampp > htdocs. Select the phpclass folder and click the Select Folder button.
A phpclass folder has been added in the sidebar on the left. Ctrl–click (Mac) or Right–click (Windows) on the folder, and in the menu that opens choose Project > Edit Preview URLs.
A SideBarEnhancements.json file will open. We’ve prepared a file with the code needed to set up the preview URLs for this workbook. In the sidebar on the left, inside the phpclass folder (should be expanded) click on sbe-code-mac.txt (Mac) or sbe-code-win.txt (Windows).

We got this code from the SideBarEnhancements package website. The first part of the code specifies the path for the folder of the site on your computer. url_testing allows you to set the URL of your local server, opened via F12.
Select all the code and copy it.
Close the file. You should be back in SideBarEnhancements.json.
Paste the code into the SideBarEnhancements.json file.
Save and close the file.

You will now be able to preview files in the phpclass folder by hitting F12 (or fn–F12 depending on your keyboard settings) instead of typing out the URL in a browser.

NOTE: F12 may not work on a Mac unless you change or disable the Show Dashboard keyboard shortcut in System Preferences > Keyboard (or Mission Control).

Dreamweaver Users Only

While it’s not required, if you are using Dreamweaver, you can define a site and testing server to make previewing easier. It will also keep all the files organized.

Launch Dreamweaver.
In Dreamweaver, choose Site > New Site.
In the dialog that opens next to Site Name, enter PHP Class
Next to Local Site Folder, click the folder icon and:
- Mac: Go to Hard Drive > Applications > MAMP > htdocs. Select the phpclass folder and click Choose.
- Windows: Go to C: > xampp > htdocs. Double–click on the subfolder phpclass and click the Select button.
On the left, click Servers.
At the bottom, click the Add new Server button .
Next to Server Name enter php.
Next to Connect using, choose Local/Network.
Next to Server Folder, click the folder icon and:
- Mac: Go to Hard Drive > Applications > MAMP > htdocs. Select the phpclass folder and click Choose.
- Windows: Go to C: > xampp > htdocs. Double–click the subfolder phpclass and click the Select button.
For Web URL enter:
- Mac: http://localhost:8888/phpclass
- Windows: http://localhost/phpclass
Click Save.
You should now see the server listed. On the right, uncheck Remote, and check on Testing, as shown below.
Click Save.
Now you can go to File > Real-time Preview (or File > Preview depending on your version of Dreamweaver) instead of having to type a localhost URL into the browser every time.

Also, you should see the Files panel (Window > Files) that lists all the files in the site.