Skip Navigation LinksHome > Standards > DeveloperDotNet > Using TFS to Edit Website

TODO: Add video

The goal is to connect to TFS, get latest, copy a web page and add your name.

Then see it automatically deploy.

Note: This is an exercise followed by SSW employees on Induction Day.

Using TFS to Edit Website

  1. Setup Team Explorer to connect to TFS
  2. Get Latest (aka: Download files to your local workspaces)
  3. Confirm your understanding how the toolbar was automatically opened
  4. Editing Web Pages with code file
  5. Adding a new folder to the TFS
  6. Use "FTPSync" to Copy from Ant to the Web
  7. Use "Beyond Compare" to Copy from local(e.g. ant) to the Web

  1. Setup Team Explorer to connect to TFS

    1. Open Visual Studio.
    2. click View > Team Explorer. In Team explorer,click "Add Existing Team Project"
      3. Connect to TFS
      Figure: Select the project you want to add
    3. Click "OK" in this window.
    4. Go to "Source Control" then double click the solution file (.sln) to open the "Browse for folder"
      5. Select Path
      Figure: Select right path then create new folder for the project
    5. Select right path for the project which follow by Organization of your Hard Disk. e.g. c:\DataAlvinShen\ProjectsTFS\SSW.TimePROReports\

  2. Get Latest (aka: Download files to your local workspaces)

    1. click View > Other Windows > Source Control Explorer
    2. Navigate to the folder unicorn/SSW.website/trunk/SSW.Website.WebUI/StandardsInternal/_EmployeeTestArea.
    3. Notice that all the folder and file names are grayed out. This is because they do not exist on your local computer. Randomly right click one of the existing employee name folders.
      4. Grayed Out Names
      Figure: Shows the Grayed Out Names in Source Control Explorer
    4. Select get latest version from the right click menu. This will cause that folder to become resident on your local machine.

  3. Confirm your understanding how the toolbar was automatically opened

    1. Open team Explorer or Source Control Explorer
      2. Source Control Explorer
      Figure: Open Source Control Explorer
    2. Checkout file
      3. Get the latest
      Figure: Get the Latest Version
      Check Out File
      Figure: Check Out File
    3. View or Edit the file
    4. Save and then copy to your local server, e.g. ant (TODO:Automatically synchronization by Team Builder)
      5. Copy local file to the server
      Figure: Copy local file to the server
    5. Check in
      6. Check In File
      Figure: Check In File

  4. Editing Web Pages with code behind

    1. Open SSW.WebSite.sln
      2. Open SSW.WebSite.sln
      Figure: Open solution file - SSW.WebSite.sln
    2. Checkout and Edit file
    3. Build project, If failed, Stop working and asking for help
      4. Compile project
      Figure: Compile project
    4. Copy the modified file and compiled dlls in bin folder into Live Server e.g. Ant.
      5. Copy the modified file and dlls into Ant
      Figure: Copy the modified file and dlls into Ant
    5. Check in

  5. Adding a new folder to the TFS

    1. Go into Explorer (tip: hold click the windows button and the e key ). Navigate to your ProjectsTFS\trunk\SSW.Website.WebUI\StandardsInternal\_EmployeeTestArea\. You should see the folder name you created in the previous step.
    2. Copy this folder and rename it to your name.
    3. Go back into Visual Studio. Select the _EmployeeTestArea folder name and then click the Add Files Icon
      4. Add Files Icon
      Figure: Add Files Icon
    4. The "Add to Source Control" window appears. Click "Add Folder.." button. The "Browse Folder" window appears.
    5. Navigate in this window to the _EmployeeTestArea and then to the folder that you just created in Explorer. Select it and click the "OK" button. The "Browse Folder" window disappears.
    6. Click the "OK" button in the "Add to Source Window". It disappears.
    7. Your new folder appears with a "plus" icon on left hand side.
    8. Open "aboutme.aspx" which is inside your newly created folder
    9. Update "aboutme.aspx" with your own details. Don't forget to change the Title of the window as well. In order to reduce spam the "@ssw.com.au" of  the email address is depicted as an image so write only your username between the tags. 
    10. Right Click your folder name and select  "Check in Pending Changes". Your folder now exists on the TFS as well as your local machine.

  6. Use FTPSync to Copy from Ant to the Web

    **NOW MOVED TO USING BEYOND COMPARE** (see below)
    1. Start FTPSync.
    2. Click the AU server and press the "connect" button.
    3. Browse to the correct file location on both your local computer and the remote server.
      4. FtpSync Files Icon
      Figure: Compare Files Icon
    4. Press the compare files icon.
      5. Synchronise Icon
      Figure: Synchronise Icon
    5. Press the green circle button on the right.
    6. The program asks you to confirm the transfer. Check the timestamp checkbox.
      7. Set Local timestamps to Remote after transfer
      Figure: Always tick Checkbox for "Set Local timestamps to Remote after transfer"
    7. Click the "OK" button.
      8. Note: Sync files to US server first and then to AU server.
      Reason: Make sure always have synchronized timestamps on AU server and local server.
      We only care about Timestamps on AU server because the local server recalls last timestamp. This way the colour of the file names becomes black not red or blue.

    Note: Did you follow the synchronization standards?

  7. Use "Beyond Compare" to Copy from local (e.g. ant) to the Web

    1. Start Beyond Compare.
    2. Confirm "Passive Mode" on Firewall/Proxy setting is enabled to avoid firewalls and other Internet connectivity issues
      3. Check Passivemode
      Figure: "Passive Mode?setting in Beyond Compare, Tools | Options | FTP |Firewall/Proxy
    3. Choose local computer to one side and Web server to the other side then press the "OK" button.
      4. Connect to Web Server
      Figure: Choose the server
    4. Browse to the correct file location on both your local computer and the remote server.
      5. Compare Items
      Figure: Compare Files Icon
    5. Press the compare files icon.
    6. Select the file on your local computer side then press the copy button
    7. The program asks you to confirm the transfer. Press OK
      8. Transfer file
      Figure: Always tick Checkbox for "Set Local timestamps to Remote after transfer"
    8. Click the "OK" button.
      9. Note: Sync files to US server first and then to AU server.
      Reason: Make sure always have synchronized timestamps on AU server and local server.
      We only care about Timestamps on AU server because the local server recalls last timestamp. This way the colour of the file names becomes black not red or blue.

    Note: Did you follow the synchronization standards?

Acknowledgements

Adam Cogan
Alvin Shen