Setting up a local testing server in Dreamweaver CS5

When developing a website that uses a server-side language, such as ASP, ColdFusion, or PHP, a local testing server lets you see what the pages produced by your dynamic code will actually look like before you put it into production. Dreamweaver actually requires you to set up a testing server if you want to do any kind of previewing work with dynamic of pages. Although you can use your live server on the Internet for testing, it's generally not a good idea. First, even with a fast connection, the process is slower. Second, you always need to be connected to the Internet. And, most importantly, you risk exposing all your mistakes, potentially providing a malicious attacker with vital information about your setup. It's far more convenient and secure to set up a local testing server.

This article describes what a testing server is, and how the setup process has changed in Dreamweaver CS5. The basic principles are the same for all server-side languages supported by Dreamweaver. Links at the end of this article guide you to detailed instructions on how to install a local testing environment for the server-side technology of your choice.

If you already have a local testing server, and just want to know how to register the details in your site definition, skip to Defining a local testing server in Dreamweaver CS5.

Not all websites need a local testing server. If your pages contain only static HTML, CSS, and JavaScript, you can test your pages directly in Live view or by pressing F12 (Windows) or Option+F12 (Mac) to preview them in a browser without the need for a testing server. The same applies to web pages that contain content that is played back in Flash Player, such as SWF or FLV files.

You need a testing server only if you're using a server-side technology, such as ASP, ColdFusion, or PHP. The server is needed to process the dynamic code and convert it into HTML output that can be displayed in Live view or in a browser. A testing server works just like an ordinary website. The only difference is that it's not on the open Internet—it's where you iron out all the wrinkles before a site or an individual page goes live.

Why can't I use my website for testing?

You can, but it's not recommended. Your remote server is the public face of your website. Even if you haven't launched your website yet, using your remote server for testing is rarely a good idea.

For security reasons, many live servers suppress error messages, making it difficult to troubleshoot errors. Also, unless you create a separate location (folder) for your experiments, you no longer have anywhere for testing once the site goes live. And things can go wrong when moving a page from the testing folder to its intended destination. Perhaps the biggest danger is forgetting whether you're working on a test page or the real one. If you're not careful, you end up destroying your website.

The time spent setting up a local testing server is well worth it in terms of efficiency and security. If you're serious about developing with a server-side technology, it's not an option, but a necessity.

So, how do I get a testing server?

Design studios and large organizations usually test their sites on dedicated machines called staging servers, which are accessed over a local network or over the Internet. However, for individual developers, this is rarely necessary. The simplest solution is to create a testing environment on your local computer by installing a web server (which processes web pages) and an application server (with the capability to process dynamic data so that it displays on a web page). You might also need to install and a database server.

To avoid any misunderstanding, these servers are not separate machines, but software that can be installed on any suitable computer. Which ones you need depends on your choice of server-side technology.

ASP uses Microsoft IIS, which is bundled with most versions of Windows, but not automatically installed. ColdFusion Application Server has its own web server, which can be integrated with an existing web server and database, but the simplest way is to use the embedded ColdFusion web server and database management system; for more information (and to downloads), see the ColdFusion Developer Center. PHP normally uses the Apache web server, but can also be installed in IIS. Apache and IIS are free. ColdFusion is a commercial product, but the developer version for testing purposes is free. You can also get free developer versions of the MySQL and Microsoft SQL Server databases.

For PHP/MySQL development, you can get all-in-one packages—again free—that install the necessary software in a single, simple operation. Among the most popular are XAMPP for Windows and MAMP for Mac OS X.

For testing purposes, none of the necessary software requires high-performance hardware. If you've got a local network, you can convert an old computer to act as your testing server. But unless you're short of disk space, it's probably much simpler to install the software for your chosen server-side technology on your main computer. Once installed, it runs in the background consuming virtually no resources.

How do I use a local testing server?

Once you have installed the necessary software, you just add a few details to your site definition in Dreamweaver (instructions are in the next section) so the server knows how to process the dynamic code in your pages before displaying them in Live view or previewing them in a browser. For the server to process the code, Dreamweaver needs to copy your files to the server's document root or to a subfolder inside the document root (although it's common practice to store your files there in the first place). The document root is the top-level folder where web pages and scripts are stored. On your remote server, it is often called public_html or www. In a local testing environment, it's usually called htdocs or wwwroot.

You also need to tell Dreamweaver the URL for your local testing server. If it's on the same computer, the address is normally http://localhost/.

After providing these details to the Dreamweaver site setup, Live view and Preview In Browser display pages that contain server-side code (that is, dynamic pages) in exactly the same way as static HTML files.

Changes to the site definition process in Dreamweaver CS5 are designed to get you up and running much more quickly by prompting you for information only when it's needed. If you have worked with previous versions of Dreamweaver, you should find the transition quite easy. The Basic and Advanced tabs are gone. There's now just a single dialog box.

Note: The following instructions outline the general principles of setting up a testing server. The accompanying screenshots were taken on a computer configured to use a nonstandard location (C:\htdocs) as the testing server document root. The location of your server’s document root is likely to be different. There are links at the end of this article to more detailed instructions specific to ASP, ColdFusion, and PHP.

Basic site definition

All you need to define a site in Dreamweaver CS5 is a name for the site and the folder where you intend to store the local files.

1. Choose Site > New Site.
2. Type a name for the site in the Site Name text box.
3. Click the folder icon alongside the Local Site Folder text box to select the folder where you want to store your local version of the website.
4. Click Save (see Figure 1).

5. Click Done to close the Manage Sites dialog box. You're now ready to start working in your site.

Note: If the testing server is on your local computer, it's common to store the local files within the testing server's document root. This way, Dreamweaver does not have to copy the files to the testing server each time you test them.

Defining a testing server

The first time that you try to test a page that contains server-side code, either using Live view or by pressing F12/Option+F12 to preview in a browser, Dreamweaver displays an alert prompting you to specify a testing server (see Figure 2).

Follow these steps to define your testing server:

1. Click Yes.
2. In the Servers section of the Site Setup dialog box, click the plus button (see Figure 3) to add the testing server definition.

3. This opens a new dialog box, where you define the server details. The same dialog box is used for both testing and remote servers. To set up a local testing server, select Local/Network from the Connect Using options.

4. Type a name for the server in the Server Name text box (see Figure 4).

   Unlike previous versions, Dreamweaver CS5 lets you define multiple servers for a site. So, this identifies which server the definition belongs to.

5. Click the folder icon to the right of the Server Folder text field, and navigate to the folder inside your testing server root where you plan to test the files.

   The Apache server root is normally called htdocs, although some all-in-one PHP packages (such as WampServer and EasyPHP) use www. ColdFusion and IIS both use wwwroot.

6. Next, type the Web URL for your testing server.

   This is the URL you would need to enter in a browser to access your testing server. If you selected the testing server root as the value for Server Folder, the value of Web URL is normally http://localhost/. If you used a subfolder of the testing server root, and called it phptest, Web URL will normally be http://localhost/phptest/.

7. Click the Advanced button (see Figure 5) at the top of the dialog box.

   This exposes options for both a remote server and a testing one. Since you are setting up a testing server, you can ignore the options in the top section.

8. Select your server technology from the Server Model drop-down list.

Note: The Server Model list has options for seven server technologies that you can test within Dreamweaver. However, Dreamweaver CS5 no longer supports automatic code generation through server behaviors and recordsets in ASP JavaScript, ASP.NET C#, ASP.NET VB, or JSP.

9. Click Save to return to the main Site Setup dialog box, where your testing server should now be listed.
10. Make sure that the Testing check-box is selected (see Figure 6).

The four icons at the bottom left of the dialog box should now all be active. In addition to adding a new server, you can delete the currently selected server by clicking the minus icon. Click the pencil icon to edit the selected server. The final icon lets you duplicate a server definition. This is useful if most of the server details are the same. You can duplicate an existing definition, and then edit it.

11. Click Save to close the Site Setup dialog box.

Dreamweaver informs you that it's updating the site cache. When that's done (usually a matter of a couple of seconds, unless you have a large site), Live view and Preview In Browser should work normally with files that contain server-side code.

Troubleshooting

Occasionally, things go wrong. The most common cause of problems with a local testing server is failure to enter the correct values for Server Folder and Web URL. These must both point to the same place:

• Server Folder is the physical path to the site root inside the server's document root.
• Web URL is the value you would enter into a browser address bar to get to the same place.

Figure 7 shows the relationship between the two values in a PHP page being displayed in Live view.

In this example, the server's document root is located at C:\htdocs. This is the equivalent of http://localhost/. In order to test more than one site in my local testing environment, I defined the Server Folder for the site as C:\htdocs\phptest. As a result, the value of Web URL needed to be http://localhost/phptest/ (see Figure 4).

Here are some other things to check if your server-side code fails to display correctly in Live view or Preview In Browser:

• Is the local web server running?
• Is a software firewall preventing communication between Dreamweaver and the web server? Try disabling the firewall temporarily to see if it makes any difference.
• Choose View > Live View Options. Make sure the Use Testing Server For Document Source option is selected.

Where to go from here

Using a local testing server is the most efficient way of developing websites that use server-side code. It's faster, more secure, and the set up process in Dreamweaver CS5 has been streamlined to make it easier.

If you still haven't made up your mind about the right server-side technology for you, take a look at Which server-side technology should I choose?

The following articles offer help with setting up a testing environment for the server-side technology of your choice:

• Setting up a ColdFusion development environment for Dreamweaver
• Setting up a PHP development environment for Dreamweaver
• Setting up an ASP.NET development environment for Dreamweaver