Website Synchronisation in Dreamweaver

Website Synchronisation is the process of keeping the local development site, a testing site and a remote production site in step.

This means all the files on all the computers are the same.

Figure 1 A Typical Relationship between Development Websites

Figure 1 A Typical Realtionship between Development Websites

The site is developed on a local computer.

It is tested on testing server.

When the site has been tested it is transferred to a production server.

Files are transferred from the local computer by putting them to a server.

Files may be transferred from a server to the local computer by getting them.

It is possible to edit files on the local computer, the testing server and the production server.

Synchonising Sites with Dreamweaver

A popular Integrated Development Environment (IDE) for website development is Dreamweaver.

Before you can synchronise a local site with test and remote servers, both test and remote sites must be created using Dreamweaver's Site Setup Procedure.

What follows assumes all sites have been setup correctly.

Figure 2 A Fragment of a Website in Dreamweaver- the site is called PROG02

Figure 2 A Fragment of a Website in Dreamweaver

Note that the Files Tab has been opened.

Local view has been selected.

This is the local development site.

A file called x00.php has been selected by clicking it once.

The mouse has been hovered over the Put arrow ⇑

Note the tool tip tells us the selected file can be put, that is sent to, the testing server, which is called prog02test.

Clicking the Put arrow would send the selected file to the testing server.

This is fine for putting selected files directly to the testing server. Whole folders, even the whole site, can be put to the testing server like this.

Caution- be careful, make sure you understand Put, especially for the whole site.

If you are not familiar with synchronisation, proceed with care and only carry out small transactions at first, like putting a single file.

Figure 3 An Alternative Method of Putting Files in Dreamweaver

Figure 3 An Alternative Method of Putting Files in Dreamweaver

We have hovered the mouse over the "expand sites" icon.

Local view is still selected.

Dreamweaver displays the tool tip telling us what clicking the icon will do.

Clicking the icon opens the window shown in figure 4.

Figure 4 The Local and Testing Server Window in Dreamweaver

Figure 4 The Local and Testing Server Window in Dreamweaver

Hovering the mouse over the lightning icon shows that if we click the icon the site on the testing sever will be shown.

If the testing site is not displayed, Dreamweaver will tell us to click the refresh icon.

Note the right hand pane shows the files on the local computer.

The left hand pane shows the Testing Server.

Hover your mouse over the other icons to see what they do but do not click.

Figure 5 The Testing Site Window

Figure 5 The Testing Site Window

After clicking the refresh icon the Testing Server is shown.

In this instance the testing site is hosted on a virtual apache server using xampp.

If we select a file and click the Put arrow it will be sent to the testing server in the correct folder.

The file on the testing server will be over written, it will be replaced by the file on the local site.

Any number of selected files and folders can be transferred to the testing server- just select the ones you want to transfer and click the Put arrow.

The process for sending files to the remote production server is similar.

Figure 6 Selecting the Remote Production Server

Figure 6 Selecting the Remote Production Server

If we click the list icon the remote sever will be selected.

Figure 7 Connecting to the Remote Server

Figure 7 Connecting to the Remote Server

If we click the icon shown the files on the remote sever will be listed.

See figure 8.

Figure 8 Putting a File to the Remote Server (Host)

Figure 8 Putting a File to the Remote Server (Host)

To put a file on the remote server, select it and then click the Put arrow.

Any number of files and folders may be put on the remote server, just select them all and click the Put arrow.

Figure 9 Whole Site Synchronisation Icon- take care

Figure 9 Whole Site Synchronisation Icon- take care

Clicking the site synchronisation icon causes the whole of the local site to be put on the remote sever.

All the files on the remote server will be overwritten by the files on the local sever.

Dreamweaver will ask if you really want to put the whole site.

Only say yes if you really understand the consequences of your action.

Dreamweaver maintains site synchronisation using several dwsync.xml files- do not try and delete or change them.

You can also Get files from the remote sever by selecting them on the remote sever and clicking the Get arrow ⇓

Take care, you may overwrite the files on your local computer, and lose any changes you have made.

Caution- if you are using an IDE to develop your site make sure you understand its synchronisation process

Note- you may not want to synchronise all your local files with both the testing and remote servers.

For example, if you are using a database (e.g. MySQL) with as scripting language (e.g. php) both the database name and passwords will probably be different on the remote and testing servers.

Accessing the the production database will require higher security than that required to access the database on your testing server.

Synchronisation of the whole of your local site with both the remote and testing server could cause real problems and possibly stop them working.