Mt. San Jacinto College Computer Information Systems
Minimize header.

Tutorials: Programming: Tools: Visual Studio

Publishing

Introduction

 If you are using any of the varieties of Visual Studio, 2010 - 2017 as your Web development IDE, you will need to configure Visual Studio with the Student Web server's FTP information in order to be able to publish your local folders or files to the Student Web server. There are two ways to configure and publish your Web resources in Visual Studio, the newer, much quicker Web One Click Publish method, and the traditional Copy Web Site method. This tutorial will teach you both methods, you can choose which method works best for your workflow.

TIP: My personal preference is to use Web One Click Publish in most cases. I find that the Copy Web Site window is helpful when I want to quickly view whether a file exists on the Web server or not.

Table of Contents

Configuring Your FTP Settings

Configuring a Publishing Profile Using Web One Click Publish

Publishing your local files to the Student Web server can be made even quicker using Web One Click Publish. In order to be able to publish your files using Web One Click Publish you must first configure a Publishing Profile. One of the advantages of having publishing profiles is that you can have many of them which makes it very easy to quickly choose a server to publish to.

Web One Click Publish toolbar.
Figure 4 - The Web One Click Publish toolbar.

Step 1: If you don't already see the Web One Click Publish toolbar (see figure 4) grouped with the other toolbars just above the Document window, then you will first need to open the toolbar. To open the Web One Click Publish toolbar, click to open the View menu from the Menu bar, then rest your mouse over the Toolbars option and click on the Web One Click Publish option from the list of options in the flyout menu that appears.

Web One Click Publish toolbar with drop-down menu open.
Figure 5 - The Web One Click Publish toolbar displaying the <New Profile...> option (2017).
Figure 5 - The Web One Click Publish toolbar displaying the <New Custom Profile...> option (2019).

Step 2: If this is your first time configuring a publishing profile for your Web site then on the Web One Click Publish toolbar click the drop-down arrow to the right of the text that reads "Create Publish Settings" and select <New Profile...> (<New Custom Profile...> in 2019) from the menu that appears as shown in figure 5. In the 2019 version of VS click the New link on the Publish screen to appears. If you want to modify an existing Web One Click Publish profile then click on Edit Publish Profiles button (the gear icon Web One Click Publish toolbar's gear icon) on the Web One Click Publish toolbar. Select the profile you want to modify and click Edit.

Image of the New Profile dialog box with 'Student Web server' typed in.
Figure 6 - New Profile dialog box displaying Student Web server as the Profile name.

Step 3: In the dialog box that appears type in a name for the publishing profile you are creating as shown in figure 6, something like "Student Web server" would be appropriate, then click the OK button to close the dialog box and access the settings in the Connection tab of the Publish Web window.

Step 4: From the Publish method drop-down list box select FTP as shown in figure 7.

image of the Connection tab of the Publish Web window with FTP selected as the publishing method.
Figure 7 - FTP is selected as the Publish method.

Step 5: Complete the rest of the settings for the Publish Web Connection tab using the information you see in figure 8.

Image of the Connection tab of the Publish Web window with FTP settings completed for the Student Web server.
Figure 8. The Connection tab of the Publish Web window with all of the necessary settings configured and the connection validated.

Step 6: Once you have typed in all the settings shown in figure 8, click the Close button in the Publish Web window and then click Yes in the popup that asks you if you want to save the changes made to your profile.

Configuring an FTP Connection Using Copy Web Site

Visual Studio has a built in FTP client which you access by opening the Copy Web Site window. To use the Copy Web Site window to configure the FTP client to open your student folder on the Student Web server, follow these 4 steps.

Screen capture of WEBSITE menu with Copy Web Site option circled.
Figure 1 - The Visual Studio WEBSITE menu with the Copy Web Site . . . option circled.

Step 1: Open the WEBSITE menu and click on the option that reads "Copy Web Site . . ." as shown in figure 1. This will create a new tab in your Visual Studio Document window which displays your local Web site files (for the open Web site) in the left pane and, once we get connected, displays the files on the remote Web server in the right pane.

Step 2: In Visual Studio, below the tab that reads "Copy Web . . ." you should see a Connections bar with two buttons, Connect and Disconnect as shown in figure 2. Click on the Connect button to open the Open Web Site screen.

Screen capture of the Copy Web Site screen with Connect button circled.
Figure 2 - The Visual Studio Copy Web screen with the Connect button circled.

Step 3: In the Open Web Site screen click on the FTP Site option in the left pane. The screen you see in figure 3 will appear. Copy the settings you see in figure 3 to your Visual Studio FTP Site settings screen replacing your personal information as described by the three balloons in figure 3. Tip: You will need to uncheck the Anonymous Login checkbox in order to type in your username and password.

Screen capture of the FTP settings for the Student Web server.
Figure 3 - The Open Web Site dialog box with the FTP Site option selected and the FTP Site settings configured to connect to the Student Web server.

Step 4: Once you have completed filling in your FTP Site settings, click the Open button in the lower right-hand corner of the Open Web Site dialog box. You should now see your ftp address display at the top of the Remote Site pane as shown in figure 4. Any files or folder you had previously published will also be displayed in the Remote Site pane. Now you are ready to begin publishing your files to the Student Web server.

Table of Contents

Publishing Your Files to the Student Web Server

In order for the rest of the world to be able to view your Web creations you need to publish them to a Web server. For your CIS classes of course will be publishing to our Student Web server.

Using Web One Click Publish

Publishing a file or folder using Web Publishing One Click is as easy as right-clicking on the file or folder you want to publish in the Solution Explorer and then choosing the Publish itemname option from the context menu that appears.

Image of the Publish default.htm option being selected from the context menu.
Figure 11 - Publish default.htm is selected in the context menu that appears after right-clicking on the default.htm file in the Solution Explorer.

You can confirm that your file(s) or folder(s) have been successfully published by viewing the Web Publish Activity window which opens below the Document window by default when file(s) and/or folder(s) are published using Web One Click Publish.

Image of the Web Publish Activity window showing that the file(s) were successfully published.
Figure 12 - The Web Publish Activity window showing that the file(s) were successfully published.

Note: If you don't see the Publish itemname option when you right-click a file or folder in the Solution Explorer it may because your Web Publish Activity window is not open. For help opening the Web Publish Activity window view Opening the Web Publish Activity Window.

Using Copy Web Site

Once you have connected to the Student Web server using ftp, you are ready to publish your files. Publish is a fancy word for "copy." That is actually what you are doing when you publish your files to any server; you are making a copy of the local files on the remote server's hard drive. In this case that remote server happens to also be a Web server, so we can access those file from anywhere in the world as long as we have access to a Web browser and the Internet.

In order to publish you need to first select the file(s) and or folder(s) you want to publish. You select a file or folder for publishing by clicking on it in the Local Files pane. In order to select multiple files or folders you can use either shift + select or ctrl + select depending on whether you want to make a contiguous selection or not. Once you have you files and/or folders selected, click on the Copy button to begin the copying process.

Screen capture of a selected folder circled and the Copy button circled.
Figure 9 - The RA6 folder has been selected in the Source Web Site pane and will be copied to the Remote Web site once the Copy button is clicked.

If everything has worked correctly then you should now see a copy of the file and/or folder you just published displaying in the Remote Web Site pane as shown in figure 10.

The RA6 folder displayed in the Remote Web Site pane.
Figure 10- A copy of the RA6 folder now resides on the Remote Web site.
Table of Contents

Editing Your Student Web Server Publish Profile

You may need to make a change to your Student Web server Publish Profile if every time you attempt to publish a file, the Connection tab of the Publish dialog box opens. If their is an error in your connection configuration the dialog box will appear each time you try to publish. Even after you make the proper corrections and complete the publish operation, you will still need to edit the Student Web server Publish Profile because just typing the proper configuration during a publish operation does not save those changes to your Website's project configuration file in Visual Studio. When this occurs, you will need to edit the Student Web server Publish Profile Connection properties using the following procedure.

Step 1:

Image of a gear shaped button. The tool tip underneath reads “Edit Publish Profile”.

Step 2: When the Publish dialog box appears, tap or click on the Connection tab on the left-hand side of the dialog box.

Image of the connection screen with all fields filled in and a green check beside the Validate Connection button.

Step 3: In the connection dialog box double-check all the settings and tap or click the Validate Connection button to verify your settings are correct, if the green check appears, tap or click the Close button and the publish operation should compltet succesfully. If you don't get a green check after tapping of clicking the Validate Connection button, then one of your settings is not correct. In that case take a sceenshot of your Publish Connection screen and email it to your instructor.

Table of Contents

Opening the Web Publish Activity Window

To open the Web Publish Activity window first open the View menu from the Menu bar, then locate and rest your mouse over the More Windows option and click on Web Publish activity from the fly-out menu that appears.

Image of the Web Publish Activity window showing that the file(s) were successfully published.
Figure 13 - How to open the Web Publish Activity window from the View menu.
Table of Contents

Verifying You Can View Your Published Assignment on the Student Web server

Once you have successfully published your folders and files to the Student Web server you need to verify that they can be accessed from the Web server using a Web browser and that it displays correctly. For more information on how to do this review the What is a URL tutorial.

Table of Contents