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

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.

1. In Sublime Text, close any files or windows you may have open.
2. In Sublime Text, go to File > New File.

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

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

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

6. Select all the code and copy it.

7. Close the file. You should be back in SideBarEnhancements.json.

8. Paste the code into the SideBarEnhancements.json file.

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

1. Launch Dreamweaver.
2. In Dreamweaver, choose Site > New Site.
3. In the dialog that opens next to Site Name, enter PHP Class

4. 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.
5. On the left, click Servers.
6. At the bottom, click the Add new Server button .
7. Next to Server Name enter php.
8. Next to Connect using, choose Local/Network.

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

10. For Web URL enter:

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

11. Click Save.

12. You should now see the server listed. On the right, uncheck Remote, and check on Testing, as shown below.

    

13. Click Save.

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