Set Up Browser Preview in Sublime Text or Dreamweaver

Topics Covered in This PHP & MySQL Tutorial:

Setting up Sublime Text, Setting up Dreamweaver

Exercise Overview

Efficient development workflows are essential for productive PHP programming. In this exercise, you'll configure either Sublime Text or Dreamweaver to streamline your preview process, eliminating the tedious task of manually typing localhost URLs every time you want to test your code. This one-time setup will save you hours of repetitive work throughout your development journey. If you're using a different code editor, you can apply similar principles or skip this exercise entirely.

Sublime Text Users Only

Sublime Text's extensibility makes it a popular choice among PHP developers. If you're using Sublime Text with the SideBarEnhancements package installed, you can configure the F12 key to instantly preview your pages. This package remains one of the most valuable productivity enhancers for web developers in 2026, providing seamless browser integration that rivals dedicated IDEs.

1. In Sublime Text, close any files or windows you may have open to start with a clean workspace.
2. In Sublime Text, go to File > New File to create a fresh working environment.

3. Go to Project > Add Folder to Project and locate your development environment:

   • 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.

4. You'll now see a phpclass folder in the sidebar on the left. CTRL–click (Mac) or Right–click (Windows) on this folder to open the context menu, then choose Project > Edit Preview URLs.

5. A SideBarEnhancements.json configuration file will open. Rather than writing this configuration from scratch, we've prepared the necessary code for you. In the sidebar on the left, expand the phpclass folder and click on sbe-code-mac.txt (Mac) or sbe-code-win.txt (Windows).

   This configuration code, adapted from the official SideBarEnhancements documentation, contains two key components: the local file path that maps to your project folder on disk, and the url_testing parameter that defines your local server URL for F12 preview functionality. Understanding this mapping is crucial for troubleshooting any preview issues you might encounter.

6. Select all the code and copy it to your clipboard.

7. Close the file and return to the SideBarEnhancements.json configuration file.

8. Paste the copied code into the SideBarEnhancements.json file, replacing any existing content.

9. Save and close the file to activate your new configuration.

   Your setup is now complete. You can preview any file in the phpclass folder by pressing F12 (or fn–F12 depending on your keyboard settings), which will automatically open the file in your default browser with the correct localhost URL.

   NOTE: Mac users may need to modify system settings if F12 doesn't respond. Navigate to System Preferences > Keyboard (or Mission Control in newer macOS versions) and either change or disable the Show Dashboard keyboard shortcut to prevent conflicts.

Dreamweaver Users Only

For Dreamweaver users, setting up a proper site definition with a testing server creates a more integrated development environment. While this step is optional, it significantly improves file organization and provides seamless preview capabilities that leverage Dreamweaver's built-in server management features.

1. Launch Dreamweaver and prepare to create your site definition.
2. In Dreamweaver, choose Site > New Site to open the site setup wizard.
3. In the dialog that opens, next to Site Name, enter PHP Class as your project identifier.

4. Next to Local Site Folder, click the folder icon to browse to your development environment:

   • 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.
5. On the left navigation panel, click Servers to configure your testing environment.
6. At the bottom of the servers panel, click the Add new Server button to create a new server configuration.
7. Next to Server Name, enter php as a descriptive identifier for your local development server.
8. Next to Connect using, choose Local/Network since you're working with a local development environment.

9. Next to Server Folder, click the folder icon and navigate to the same location as your local site folder:

   • 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.

10. For Web URL, enter the appropriate localhost address for your development stack:

    • Mac: http://localhost:8888/phpclass
    • Windows: http://localhost/phpclass

11. Click Save to store your server configuration.

12. You should now see your server listed in the servers panel. On the right side, uncheck Remote (since this isn't a production server), and check Testing to designate this as your development environment, as shown below.

    

13. Click Save to finalize your site configuration.

14. Your development environment is now optimized for efficient PHP development. You can access File > Real-time Preview (or File > Preview in older Dreamweaver versions) to instantly view your pages without manually constructing localhost URLs each time.

    Additionally, the Files panel (Window > Files) now provides a comprehensive view of all project files, making navigation and file management significantly more efficient. This integrated approach keeps your development workflow organized and reduces the cognitive overhead of managing multiple tools and URLs.