Setting up my new Web Development Machine

For more immediate and tiny updates on web development and photography follow me on Twitter @VishalRJoshi

I just recently got a new laptop, it looks awesome, is blazing fast and from now on I will spend at least few hours every evening with it.  I have always wanted to upgrade but Microsoft keeps getting me powerful work laptops I hardly ever came out of the spell.  But recently stars aligned and that provoked me to get a personal laptop:

1. I hate the looks of Lenovo W500 which is what I have at work

2. I have software licenses for photography and other software which feel weird to register from work machine

3. The screen resolution on Lenovo’s is not as good as I would like

4. Work laptop makes me work more and play less, I really do need a clean separation J

Well anyways I got my laptop this weekend. As I would primarily use this for Web Development and Photography I thought I would write down a post which would be a nice walk down the memory lane for me in the future and perhaps help someone now.

Hardware

Intel Core i5 ~ 2.5GHz, 4GB RAM, 500GB with 7200 RPM HD and 1680 x 1050 high quality screen.

I was hoping to get i7 processor but most reviews and friends said that it heats up on a laptop and does not provide as much value. I was also going to go with 8GB RAM but a friend of mine got his 8GB RAM cheaper online than with the laptop. Finally I was going to buy SSD Hard Disk but could not justify the cost to myself in the mirror.

OS & Office

Windows 7 Ultimate x64 (Paid)

I think Win 7 Professional would do just fine as I am not intending to use bit locker or 35 languages which seems to be the only difference between Professional and Ultimate. Anyways, I think I am spoilt, it just feels good when Windows starts and the screen says Ultimate J

Office Professional 2010 (Paid)

Again Office Home & Business would do just fine but I had got a copy of Office Pro 2010 which was waiting for my new laptop to arrive J

Outlook

I configured Outlook with my Live.com, Gmail.com and Hotmal.com email ids. The Hotmail connector for Outlook actually comes down automatically during the configuration and the thing sets up like a charm.

Web Development (Free)

As any other developer I am inclined to download a bunch of stuff just in case I need it but this time I have decided to keep the list of installed software to bare essentials and going with the minimalistic attitude. Also in support of high productivity I got Web PI from Microsoft.com/Web and customized as following:

Tools (Free)

Framework (Free)

Database (Free)

Server (Free)

Apart from the above listed I also took IIS6 Metabase compatibility for Visual Studio à IIS interactions (yeah I know we need to remove the dependency on it J), some basic logging features, IIS Management Console, Remote Management for my hosted sites, Windows & Basic Authentication.

I was inclined to enable a bunch of modules but I thought I will enable them when I need them and try to stay as bare minimum as possible.

Honestly, after I kicked off Web PI, there was one restart for .NET 4 framework install and everything went super smooth. Unfortunately my SQL Server Express installation failed and I had to go and install it manually from MSDN.

In anycase, I do not mind installing SQL Server 2008 R2 Express manually as it allows me to configure mixed mode authentication and provide sa password, which I sometimes like to use with my connectionStrings.

I do not exactly remember but I do think that the SQL Server 2008 Management studio also required a restart of the machine but other than that it did go pretty smooth.

Honestly, getting a fully functional Web Development box was never that easy before Web PI so I am really happy that our team was able to pull together this highly impactful product and the more I see it in use on day to day basis within Microsoft, it makes me feel even better about the impact it can have. Most certainly there are pros and cons but overall I think it is a good thing J

Visual Studio Themes (Free)

First thing is to get VS customized to get a darker and a nicer theme. I like Selenitic by Tim Thomas but you can find several others at http://studiostyl.es/ to suit your needs.

If you are using VWD Express 2010 which I use on my machine then to set the Theme you have to go to following location on Tools à Options (make sure you set the settings file by using the “Use team settings file” check box.

Typically I would go to the “Extensions Manager” in “Tools” menu and get few power tools but since VWD Express does not have all extensibility hooks not many of the power tools are really available.

NuPack (Free)

Next I was super inclined to get NuPack from Codeplex as I know the packages in there are growing like crazy but I prevented myself from going there just yet as there were bunch of other things to get in place and again, using the policy of getting something only if I need it.

7Zip (Free)

Several times during conversation at work 7Zip comes up as the possible direction we want to take to save download times across many of Microsoft technologies. In general I think it is an innovative community project which is worth your attention. It also has easy file extensions associations in Tools à Options within 7 Zip File Manager and you can download it from http://www.7-zip.org/

Reflector (Free)

They say it for a reason that every .NET developer should have reflector, you can get that for free at http://reflector.red-gate.com/download.aspx. Unfortunately, if you are using any Express versions of Visual Studio like VWD Express 2010 then you won’t be able to use the Reflector Add In for debugging but even without that Reflector is pretty useful in itself.

Resharper (Free)

Again there is a reason why they make banners “Can’t Code without Resharper” but oh well I am using VWD Express and the Add-Ins are not allowed with it so unfortunately no Resharper for me. Btw you can download it from http://www.jetbrains.com/resharper/download/ for Free if you are working on an OSS project or for $199 if you are getting it for personal use.

FireFox & Firebug (Free)

I am eagerly looking forward to use these and I am sure most people do as well.

Windows Live Writer (Free)

Well this blog would not have happened as easily as it has without Live Writer. If you plan to write you have to try this software for sure. Download it from Windows Live Essentials download center.

TweetDeck (Free)

Next was to get into the Social community and install TweetDeck and connect all of my Linked In, Facebook, Four Square as well Twitter accounts on it. This will provide some reasonable entertainment for me.

EverNote (Free)

I use Evernote all the time to sync up all types of my work items, To Dos from home, shopping list etc etc and it keeps it all synced up.  This is one of the best tools ever if you have not used it yet.  Get it from http://www.evernote.com/

LightRoom (Paid)

Finally, it comes down to having a great machine and a great photo management tool. My cousin just got me a copy of Light room and I got it all installed and ready on the machine. You can get Lightroom 3 for 30 day trial for Free if you have never used it from Adobe site.

With all that said even with keeping stuff simple and minimal I landed up installing quite a bit of software on my machine. Interesting piece is that other than the Hardware, OS, Office & Lightroom everything else on my machine is Free software. I intend not to add a lot more to my machine but if I do I will most likely update this post too. In the meantime I hope you find this at least minimally useful/interesting.

-Vishal

Technorati Tags: Web Development,Machine,PhotoGraphy

VS Project Template Vs Project System

You might many times hear the words “project templates” and “project system” from time to time, I though it would be worth while to talk about the differences between the  two from a web developer stand point…

Web developers using Visual Studio use either File –> New –> Project or File –> New –> Web site as shown below to create new Web projects as shown below:

The new project dialog for Web Developers looks as below:

and the new web site dialog looks as below:

What is probably interesting to note is that all the options that you see inside any of these dialog boxes above are just “Project Templates” and what that really means is that they are underlying the same project system but just wrapped with different set of start up files for easy project development…

In reality there are only two major Project Systems for Web Developers

1. Web Application Projects (WAPs) which are accessible via File –> New –> Project –> Web
2. Web Site Projects (WSPs) which are accessible via File –> New –> Web Site

What is also interesting to note is that WAPs and WSPs have different code bases (with reasonable set of shared components)… I will eventually write a post on real differences between WAPs and WSPs but today let us focus on Project Systems vs Templates…

A Project system like WAP or WSP actually takes care of building, compiling, debugging, managing source control, deploying, hooking up references, intellisense etc etc  for a project…  In essence the major code for functionality of the web project like commands, hot keys, content menus, toolbars etc are all specific to a project system and they remain the same across all the project templates of a single project system…

A Project template on the other hand is simply a bunch of files bundled together to allow a person to easily start developing a certain type of project…   The project templates can have specific files like .svc or .aspx with boiler plate code in it… Each project template can choose to include its own set of references or code files… Behind the scene the project system invoked to do all the magic remains the same… For example ASP.NET Web Application and WCF Service Application are just two different templates for “Web Application Project System”…  Similarly there are a bunch of project templates for “Web Site Project System”…

The key Project templates for Web Application Projects (WAP) are:

• ASP.NET Web Application
• Empty ASP.NET Web Application
• ASP.NET Web Service Application
• WCF Service Application
• Dynamic Data Linq to SQL Web Application
• ASP.NET MVC Web Application (MVC is a customized Web Application Project system, we call it Flavor of WAP, so it is not necessarily a project template only…)
• Dynamic Data Entities Web Application

Similarly, the key Project templates for Web Site Project (WSP) are:

• ASP.NET Web Site
• Empty Web Site
• WCF Service
• ASP.NET Reports Web Site
• Dynamic Data Linq to SQL Web Site
• Dynamic Data Entities Web Site

Hence many a times there are features which work for one project system but do not work for other… A classic example is App_Code directory which works great with Web Site projects but not as seamlessly with Web Application Projects…  Recently I wrote a blog post on Why App_Code does not work as well with WAPs…

Anyways, I hope this gives an idea on how the project systems and project templates for Web Developers work within Visual Studio…

-Vishal

10 + 20 Reasons why you should Create a Web Package

Before we talk about the reasons why you should create a Web Package let us first understand what is a web package… Web Package is an atomic, transparent, self describing unit representing your web application which can be easily hydrated into any IIS Web server to reproduce your web…  It is a .zip file which not only contains your content but also contains its dependencies like IIS Settings, Databases, GAC DLLs, Registry Keys etc…

The concept of creating Web Packages for deploying your web application to an IIS Web Server is recently introduced with Microsoft Web Deployment Tool (MsDeploy) and towards the end of this post I will talk about how you can create a Web Package for your web app… But before going there let me talk about the 10 reasons why you should consider creating web packages for your web application:

1. Having all your web content and dependencies like IIS Settings & DB into a single .zip file allows you to easily transport it anywhere…
2. If the web package actually contains source code then you can replicate your dev environment to another box relatively easily…  Imagine being able to recreate a project on your home machine by simply emailing yourself a .zip file…
3. If you are deploying in a web farm environment then deploying the web package to various server boxes will allow you to very easily recreate your load balanced web servers…
4. If you are creating software for community to use then sharing web package .zip files with world creates a common handshake model…
5. Web Application Gallery, which will be common home to find reusable Web Applications also uses the same Web Package format… So you will have an opportunity to put up your web app into Web Application Gallery if you create a Web Package…
6. Most of the Package creation process is very automated so you do not need to write custom actions like you would have to do in case of MSIs…
7. Creation of Web Packages can be automated along with your nightly builds really easily using MsBuild with systems like Team Build…
8. You can create a web package for various versions of your web application and easily use the versioned packages to roll back to any version you like…
9. You get free standardized UI to install the Web Packages in IIS Manager which hopefully will become pretty standard and easy for everyone to understand…  If you do not like to use the UI the package can be installed via commandline as well…:-)
10. Most of the automated tools (providers) required for packaging  your web application and its dependencies are available out of the box (few of which are IIS Settings, SQL DBs, Web Content, GAC assemblies, COM components, Registry keys etc)… 

Finally let me mention the out of the box providers which can be invoked when you want to package your web application…  You actually have a choice to call any of these providers depending on what parts of your Web Application you like to be packaged… These are my other +20 reasons why you should create a web package…

1. File System Directory to move a files & folder which contains your web application files like .aspx, .config, images, .js, .css, .master etc – contentPath
2. Creating a new IIS Web Application for your web– iisApp
3. Moving IIS7 and above (read Vista, Win2k8, Win7, Win2k8 R2 and above) Configuration Settings associated with your web (e.g. Default Document, ApplicationPool Mapping etc) – appHostConfig
4. IIS5.1 & 6 (read XP, Win2K3 compatibility)  Metabase Configuration Settings (parallel to IIS7+ settings above) - metakey
5. Pulling data & schema from existing SQL Server Database or custom generated .SQL files which your web uses– dbfullSQL
6. Any Security Certificates (e.g. SSL & ClientAuth) that your web depends upon- cert
7. Any GACed assemblies like 3rd party controls or libraries that your web uses – gacAssembly
8. Any custom IIS7+ Application Pool that your web has created– appPoolConfig
9. Registry key associated with your webs – regkey
10. 32 bit COM Object – comObject32
11. 64 bit COM Object – comObject64
12. Security ACLs associated with folder – setAcl
13. Granular control by pulling just a registry value - regValue
14. ASP.NET root web configuration file on 32 bit machine – rootWebConfig32
15. ASP.NET root web configuration file on 64 bit machine – rootWebConfig64
16. Similar type of support for packaging MySQL DB – dbMySQL
17. Packaging Machine.Config of 32 bit machine – machineConfig32
18. Packaging Machine.Config of 64 bit machine – machineConfig64
19. If there is still a provider missing then you can very easily create one – yourCustomProvider
20. A secret provider which I am not allowed to talk about just yet :-), but trust me it is really a killer provider - secretProvider

So now that you have 10 +20 reasons to create a web package let us talk about how to create one… From end developer/IT pro standpoint you can create Web Packages from various different avenues, some of which are:

• Web Packaging from VS 2010 UI 
• Web Packaging from MsBuild in VS 2010
• Web Packaging from CommandLine
• Web Packaging from PowerShell
• Web Packaging from IIS Manager

Please follow the links above to create a web package using your preferred method… I hope you are jazzed about being able to archive and deploy your web applications using Web Packaging…

Importing a Web Package into IIS Manager

Today I am hoping to talk about installing/importing a Web Package into IIS using IIS Manager…

For this walkthrough you will first need a Web Package… If you want to get few ready made packages you can get them from Web Application Gallery…  There is also a MsDeploy package of BlogEngine.NET available on CodePlex, which you can download to try out this walkthrough…

Hopefully, eventually you will be creating your own web packages for deployment and this walkthrough will even apply at that time…  If you want to learn how to create a web package from Visual Studio 2010 then read the below posts:

• How to create a web package from VS 2010
• How to create a web package using MsBuild commandline
• How to include SQL DBs within your web packages 

To begin importing a web package into IIS using the new “Import Application” wizard you need to make sure that you have installed IIS Manager by going to Add/Remove Windows component…  You will also need MsDeploy installed over IIS, typically it will come with your VS 2010 installation but if you do not have VS 2010 just yet then you can download it from MsDeploy Download.

Today, I will install a Web Package of the sample ASP.NET 4.0 web application that I created earlier in the tutorial “Creating a simple ASP.NET 4.0 Web Site”…

To start importing the web package let us start IIS Manager (Start –> Run –> InetMgr)

I will be installing the web package under Default Web Site…  Although it is not required to install the package under Default Web Site, it can be installed under any Web Site of your choice… Also if the package created was a “IIS Web Site Package” then it could be installed under the server /sites node directly as well…  In anycase when we open the “Default Web Site” node then on the right side command bar you will now notice two new commands  1.) Export Application 2.) Import Application as shown below:

On clicking “Import Application” on the first screen you will be asked to provide the path to web package (.zip file)… I will be providing the location of the sample web package which I created in the earlier tutorial:

On clicking next the Import Application wizard will display the content of the web package as below:

Notice that in the above example the package wizard shows that the Web Package contains:

1. IIS 7 Application - This will actually do the job of creating an IIS Application and mapping the virtual directory…  It will also move any additional IIS Settings associated with the web application…
2. File System Content  - All the physical files (.aspx, .dlls etc) which need to be placed in the web site directory…
3. Database – This is the database that I packaged into my web package

On clicking “Next” I will get a screen which I will call as the “Parameters” screen…  When you create a package using VS 2010, then VS identifies the key attributes of your web application which you need to customize and it creates MsDeploy parameters for the same…  All these parameters are something which you can modify during the package import process as seen below…
In the above example notice that “Default Web Site” is read-only… This is due to the fact that the “Import Application” wizard was invoked from Default Web Site… I am now naming the Web As “SimpleASP4Web” and placing it under “C:\WebSites\SimpleASP4Web”…  Also note that I am using “SimpleASP4Web” DB on my local SQL Server…

The ConnectionString that I am providing in here will be used to deploy my packaged DB and will also be used to update my web.config file (this will happen only if the package was created to do so…  I will write a separate blog post on how to do that, but in future release of VS 2010 this option will be set by default when you create the web package at the first place…)

In any case now on clicking “Next” the Web Application installation will begin showing you a progress bar and hopefully within no time the web package will get installed showing you the status as below:

On hitting “Finish” on this screen the web package will be installed and on inspecting the IIS Manager you can see that the package is actually successfully imported and web site is ready to go:

On inspecting the SQL Server Management Studio you can also see the Simple ASP4Web DB also installed:

Hopefully you can see that the web deployment features with great UI options in VS 2010 and IIS will make the process of packaging and installing you web applications much easier than what it has been before…

-Vishal

Web 1-Click Publish with VS 2010

Visual Studio 2010 has great features to make your web deployment easier…   I have written a high level article describing the web deployment feature set of VS 2010 below:

• Web Deployment with VS 2010 and IIS

Today my goal is to go through an end to end walkthrough of the Web 1-Click  Publish feature of VS 2010…  This walkthrough will cover following:

• Prepping up an ASP.NET 4.0 web application which is using a SQL Server Database for deployment
• Gathering the remote web and database server information
• Setting up Web.config Transformation to change your connectionString
• Including SQL Server Databases in Web Deployment
• Creating a 1-Click Publish Profile to Publish your web content, databases and transformed web.config files
• 1-Click Publish your Web Application

For this walkthrough you will need Visual Studio 2010 Beta1 which you can download FOR FREE from http://www.microsoft.com/visualstudio/en-us/products/2010/default.mspx

Let us get started…

Prepping up an ASP.NET 4.0 web application which is using a SQL Server Database for deployment

In this walkthrough we are assuming that you already have a web application which uses SQL Server database and you are ready to deploy it to remote web server and database server…  If you do not have such a web application then I encourage you to follow the simple step by step instructions in the walkthrough Creating a simple .NET 4.0 web application using Visual Studio 2010…

With the assumption that you now have a data driven ASP.NET 4.0 web application let us try to understand what all is needed to be taken care of while deploying such a web application… Things that you need to take care of during such typical deployments are:

1. You need to modify the connectionStrings in the web.config file to point to the remote SQL database server instead of the local SQL Server Express that you are using on your dev box…
2. You need to deploy your databases to the remote SQL database server
3. You need to deploy all of your master pages, content pages, images etc to the remote web server

In the remaining portion of this walkthrough you will see how to accomplish all of the above things…

But before getting to that, let me introduce you to Web Application we are about to deploy… The solution explorer of this web application looks as below:

Notice that this web application has 1-ClickPublish.mdf file in the App_Data folder…  Also notice that it has a Site.Master, Default.aspx and Address.aspx Web pages…  When you run Default.aspx it looks as below:

The top banner of “Visual Studio 2010 Web 1-Click Publish” is coming from Site.Master…  The grid containing FirstNames & LastNames is being populated from the 1-ClickPublish.mdf file…  The “View Addresses” button takes you to “Address.aspx” page which shows the addresses of the people on “Default.aspx” as shown below:

The web.config file of this web contains connectionString named “1-ClickPublishDB” which points to the SQL Server express database (1-ClickPublish.mdf )…

Gathering the remote web and database server information

Before we begin to deploy the web application to the remote server we will need to gather the information of the destination servers… Typically if you are going to a shared hoster then this information is provided to you in the welcome email from your web hosting company…  Web hosters typically have various plans which include database as well as web server storage space….

If you are not planning to go to web hosting company but rather are interested in hosting your own web and database servers then you will have to follow some more additional steps to set up your web servers and database servers…  I am not covering this in the current walkthrough but will cover the same in subsequent walkthroughs…  But for now let us assume you have a web hoster who has provided you with the information required for deployment…

Typically web hosters will ask you which .NET Framework version you would like to target (i.e. 2.0, 3.0, 3.5 or 4.0)… Based on the .NET Fraemwork version you choose your web site will be provisioned with the correct Application Pool… For .NET 2.0, 3.0 and 3.5 the Application Pool targets CLR version 2.0… For .NET 4.0 the Application Pool is set to CLR version 4.0…. It is very likely that your .NET 2.0, 3.0 or 3.5 web application will run seamlessly on .NET 4.0 but it is still required to talk to your hoster to change you Application pool from .NET 2.0 to .NET 4.0… 

If you register for a hosting plan which supports the new VS 2010, ASP.NET 4.0 and Microsoft Web Deployment Tool (MsDeploy) then you will receive below pieces of important information which we will use later during the walkthrough… In the rest of the walkthrough I will refer to these as “1-Click Settings” so that you can easily relate to this section…:-)

• Service URL:  This URL is in the format https://myWebServer:8172/MsDeploy.axd and actually points to a IIS handler which will manage your deployment on the remote web server
• Site/Application Name: This is the name of your IIS Web Site on the remote web server…  This is where your application will be deployed…
• UserName: This user name is the account which has the access to the ServiceURL and your Site on the remote web server
• Password:  The password which you use for your above UserName
• ConnectionString: This is the ConnectionString to your remote database server… Typically your hoster will make sure that your remote web server and remote database server have the correct ports opened so that your web application can easily consume the data from your database…

At this time I am assuming that you have your web application ready to be deployed and you already have the above pieces of information from your web hoster…  The next thing we will do now is to set up web.config transformation to modify your web.config file during deployment….

Setting up Web.config Transformation to change your connectionString

Let us assume that you are using “Release” build configuration when you are deploying to a remote web server…  You can create and use a different build configuration as well but I am choosing “Release” as it comes out of the box with VS 2010…  Learn more about Managing Build Configurations… 

By default “Debug”  is the ‘Active’ build configuration… As we are ready to deploy to a hoster you can change your Active build configuration to “Release”… You can do so by simply changing the drop down value on the VS “Standard” toolbar as shown below:

Alternatively you can also change the build configuration by going to the Build –> Configuration Manager menu…

After this step your Active Build Configuration should be “Release”…  You can now open up the node next to the web.config file to reveal web.debug.config and web.release.config as shown below:

In case of VB.NET you will have to click the top right button to “Show all files” to see the dependent web.release.config…

Now open the web.config as well as web.release.config files and copy the connectionString section from the web.config file into the web.release.config file as shown below…

FROM

TO

Now you need to do two quick things

1. Just simply write xdt:Transform=”Replace” in the connectionString node of web.release.config as shown below…
2. Also change the connectionString attribute by putting the value that you got from the hoster (the one we referenced in “1-Click Settings” )… Let us say my hoster proived me with connectionString as “Data Source=myHostedSQLServer;Initial Catalog=myhostedDBName; User ID=VishalRJoshi; Password=*VS10Rocks” then my web.release.config should look as below…

Also note that by default Web.Release.config has a transform called “RemoveAttributes” to remove the debug attribute when you are going to the “Release” environment…  Many hosted environment will not allow you to have debug=true coz it is not safe hence removing the debug attribute is required…

With this you have set up the automated web.config transformation which will take care of changing your connection string during every deployment… !! There is a lot more you can do with XML Document Transforms (XDT)…  Check out the different possibilities Web.Config Transformations by leveraging XDT here…

Including SQL Server Databases in Web Deployment

As the current web application is actually using the data in 1-ClickPublish.mdf it is required to move the database schema and data from this local SQL Server Express database to remote hosted SQL Server database server… In order to make that happen you need to go to “Deploy SQL” tab of the Project properties…

You can open project properties by double clicking the “Properties” item under the project node as shown below:

When project properties window opens then navigate to “Deploy SQL” tab…Once you open “Deploy SQL” tab you need to do following quick things:

Make sure you are using the “Release” configuration as that is the configuration we are going to deploy (and you also have web.config transformation for Web.Release.config)…

Click “Add” button and give a friendly name for your database deployment as shown below: (I would recommend using the name that you used for your connectionString – for secret reasons I will talk about in future posts :-))

Next you will have to configure the “1-ClickPublishDB” settings which you just created by clicking it…  As soon as you click it the disabled section below will light up which you need to fill in as shown below…

The key points to note while filling up the DB Deployment information above are:

• ConnectionString for the destination database is the connectionString which you received from hoster in an email (the one we referenced in “1-Click Settings” )…
• “Pull data from an existing database” will instruct Visual Studio 2010 to extract data from the local SQL Server…
• The connection string below the “Pull data from…” checkbox represents the source database (which is on your local dev box)… This connection string can be found in the original web.config file of your web application as the datasource controls you used insert the connectionString in web.config file…
• The “Complete database” radio button instructs Visual Studio 2010 to script both database schema as well as data from your database…  If you contain junk data that you do not want to deploy to the server then choose “Shema only” option…

With these settings you can now hit save on top of Visual Studio and you have configured your database for deployment as well…Hopefully that was not too hard :-)  If your needs are more deeper than the above then there are many other powerful Database Deployment options which I have discussed in DB Deployment post earlier…

Creating a 1-Click Publish Profile to Publish your web content, databases and transformed web.config files

Now that you have set up web.config transformation and also set up you database deployment settings, it is time to create a 1-Click Publish profile to use for your deployment…

You can do so by Right clicking on your project node and hitting “Publish…” as shown below:

With that you will get the “Publish Web” dialog which you can fill as below:

I have specially numbered the fields above so that you can easily relate to them in the text below:

1. Publish Profile Name-  I have named it as myWebHosterName you can name it with the destination name that you can easily remember…  Usually if you are going to a web hoster then naming this as something like “DiscountAsp” or “OrcsWeb” would be advisable…
2. Service URL:  As we discussed in the “1-Click Settings” section at the beginning of the post, this is provided to you by your hoster…  This URL associated with the Publish Method “MsDeploy” which is used behind the scenes by Visual Studio 2010 to Publish your entire web… You can learn more about the way MsDeploy works in one of my previous blog posts…  Also while you are at it note that the new “Publish” dialog also tells you the Build Configuration that you are publishing (i.e. the Active Build Configuration), in our situation we are using the “Release” configuration for which we have set up the DB Deployment and Web.config transformation…
3. Site/Application Name: As we discussed in the “1-Click Settings” section at the beginning of the post, this is also provided to you by your hoster…  If your hoster provided VishalRJoshi.com as your Site name you can feel free to append a folder name underneath it e.g. VishalRJoshi.com/Blog…
4. Mark Folder as IIS Application on destination: If you choose to Publish to a folder under the parent site eg “VishalRJoshi.com/Blog” AND  want to have separate session state, cache etc functionality for that subfolder then you will have to convert that folder into an IIS Application underneath your parent web site…  This checkbox will allow you to achieve that easily in an hosted environment… This is a the additional IIS enhancement that was made as part of “MsDeploy” Publish Method, so we hope you will like it…:-)
5. Allow untrusted certificates-  MsDeploy Publish method will only take https:// URLs… As you know that secure http requires a SSL certificate but it is understood that it will not be possible to always buy a certificate from authorities like VeriSign etc and especially if you are deploying within your team environment then expecting a fully signed certificate may not be rational, hence this option allows the web server owner to provide a self signed SSL certificate… Although, in general it should be understood that checking this box increases threat on the data which is being transferred over the wire…
6. User Name, Password and Save Password:  Again, As we discussed in the “1-Click Settings” section at the beginning of the post, User Name and Password is also provided to you by your hoster…  “Save Password” is a feature in VS 10 which will securely save your password, so that you do not have to keep typing it again and again…
7. Save -  Now you can hit the Save button on the top, to save the “Publish Profile” you just created…
8. Close – Close button will allow you to close the “Publish Web” dialog

After doing all of the above you have configured your Web Application for 1-Click Publish going forward…

1-Click Publish your Web Application

For your convenience Visual Studio 2010 offers Web 1- Click Publish toolbar as shown below:

You can enable this toolbar (if not visible) by going to View—>Toolbars—> Web One Click Publish… You can now simply click the Publish button below after every little change you make to your project that you want to deploy… 

This way you can keep updating your web at the destination with ease…  Do note that you are allowed to have upto 50 Publish profiles per project, which can allow you to Publish the same project to 50 different web servers in just clicks (I hope 50 should be enough, if not let us know now and we will be happy to bump that up :-))…

NOTE:  If you are incrementally publishing you web then you should go to “Deploy SQL” tab and uncheck your database deployment… If you do not do so then your Publishing will fail as MsDeploy intentionally does not overwrite the database that you already have on the server…  There is a easy fix to change that behavior i.e. there is an option to delete database every time you republish, but I will refrain from mentioning it until someone asks as that is purely a Test server scenario… :-)

Checking your deployed Web

With all of the above steps you are good to hit the “PUBLISH” button…  Once you hit the button your web should get deployed to the hoster much more quickly and reliably than ever before…

With all this you are now set up to have 1-Click Publish of your web application from Visual Studio 2010…

In later posts I will share the Performance and Scalability numbers of MsDeploy Publish method too but as far as I can tell MsDeploy publish is quite more reliable and performant than most other traditional web publishing mechanisms…

I hope this walkthrough will help you experience the new powers of Visual Studio 2010 and Microsoft Web Deployment Tool…

If you would like to learn more about Web Deployment with VS 2010, then I have explained a bunch of other features in the posts below:

• Web Packaging: Creating a Web Package using VS 2010
• Web Packaging: Creating web packages using MSBuild
• How does Web Deployment with VS 10 & MSDeploy Work?
• Installing Web Packages using Command Line
• Web.config Transformation
• DB Deployment with Visual Studio 2010

Hope this walkthrough is helpful

-Vishal

Some KB Items:  There are certain known issues and workarounds which you may or may not encounter but I have still posted them here in case you face any of those… Known Issues, Resolutions and Work-Arounds for VS 10 Web 1-Click Publish…

Creating a simple ASP.NET 4 Web App using Visual Studio 2010

The goal of this end to end walkthrough is to create a really simple ASP.NET 4.0 Web Application which uses SQL Server database and is built using Visual Studio 2010 (VS 10)…  The 11 steps in this walkthrough are:

1. Create a new ASP.NET 4.0 Web Application Project (WAP)

2. Create a simple SQL Server Database using SQL Express

3. Add Tables to the Database and set foreign key relationships

4. Add data to the tables created

5. Add a MasterPage and ContentPage to the ASP.NET 4.0 WAP

6. Modify the Master Page to provide consistent look and feel to the site

7. Add datacontrols like GridView and bind them to SQL Express database

8. Add additional web page and use DataView to display more data

9. Use QueryBuilder to fetch data from multiple tables

10. Use AJAX to refresh only parts of the page rather than complete page

11. Hook up various pages and complete the experience….

To complete this walkthrough you will need Visual Studio 2010 Beta1 which you can download FOR FREE from http://www.microsoft.com/visualstudio/en-us/products/2010/default.mspx

Let us get started:

1. Create a new ASP.NET 4.0 Web Application Project (WAP)

Start an instance of Visual Studio 2010 and create a new WAP project by going to File –> New—> Project –> Web –> ASP.NET Web Application as shown below:

Also notice the nice looking VS 2010 new project dialog box…  If you notice at the the left you will also see “Online Templates” and capabilities to search templates…   This will be pretty handy when there will be a bunch of community created templates available…  Anyways for now go ahead and click “Ok” to create our new “1-ClickPublish” project…  After the creation of the project is successful your solution explorer should look as below:

2. Create a simple SQL Server Database using SQL Express

Visual Studio 2010 comes with SQL Server Express edition in build…  I will be using that for the walkthrough purposes although if you have full SQL Server then feel free to use the same…

Add a new “SQL Server Database” by right clicking on the App_Data folder and choosing Add—> New Item

The “Add New Item dialog box” has also got a new look in Visual Studio 2010 just like “Add New Project dialog box”…  I am going to name the database as 1-ClickPublish database, you can feel free to name it anything but do note that it will matter when it will come to deploying this database to remote web server…

3. Add Tables to the Database and set foreign key relationships

To modify this database and add tables to it I will use server explorer… You can open server explorer by going to View—> Server Explorer

By default the Server Explorer will show the connection to the database closed…  You can refresh the connection to open it…

Once you expand the node now you can right click on the tables folder and choose to add new table as shown below

Next we will create simple “Person” table with four columns (ID, FirstName, MiddleName & LastName)…  The ID column and the FirstName column are required and MiddleName + LastName column allow nulls…  For current illustrations I have used ID to be numeric and all the rest as varchars…  I have also set the ID column as an identity column so that we can create a relationship of the Person table with PersonAddress table which we will create next.  The table editor will look as below once you create all these columns correctly…

On clicking save Visual Studio will allow you to name the table which in my case, I will be naming as “Person”…

Similarly we will next create “PersonAddress” table with 8 columns and following details:

• ID | Numeric | Not Null | Identity
• Person_ID | Numeric | Not Null |
• AddressLine1 | varchar (100) | Not Null
• AddressLine2 | varchar (100) | Allows Null
• City| varchar (100) | Not Null
• State| varchar(100) | Allows Null
• Zip | numeric | Allows Null
• Country | varchar (100) | Not Null

Once the table is created it will look as below:

You can also go into both “Person” and “PersonAddress” tables, right click on the ID column and “Set Primary Key”…

Also now right click on the “PersonAddress” table and click relationships…  In the “Foreign Key Relationship dialog box” click the “Add” button to add a new relationship, then on the right side go to the (Name) column and change the name of the relationship to FK_Person_PersonAddress…

Next click on the “…” on the “Tables And Columns Specifications”as selected above… In the specifications dialog box create a relationship between with ID column of Person table as the primary key table and Person_ID column of the PersonAddress table as the Foreign key table and click “Ok”…

4. Add data to the tables created

After the above step you will have your table created, save and close the table designers now to populate the tables with some sample data…. Let us go back to the server explorer to do that… The sever explorer should look as below:

You can now right click on each of the tables and start populating data by clicking “Show table data”… Start populating the data in the Person table first as shown below…

Next populate sample data in the “PersonAddress” table as shown below:

With this the database should be good to go…

5. Add a MasterPage and ContentPage to the ASP.NET 4.0 WAP

Now let us go to the solution explorer and start editing the Web App by adding a simple Master Page to the project… Master page will allow us to maintain a consistent theme across the project…

Right click on the project node and click Add –> New Item…  This time navigate to the Web node and select “Master Page”… Rename the Master page here to Site.Master and click Add…

After adding the master page you can go back to the solution explorer and delete the Default.aspx page… The reason why I am deleting the page is coz it currently does not use the new Site.Master that we created…  

After deleting the Default.aspx and adding the master page the solution explorer will look as below:

Next you can go ahead and right click on the project to Add one more new item… This time add a “Web Content Form” and name it “Default.aspx”  when you do that then the next dialog will allow you to select the master page you would like to use… Select Site.Master as shown in the image below and hit OK as shown below…

With this we have a basic skeleton of a web application created and hooked up… 

6. Modify the Master Page to provide consistent look and feel to the site

I will now open the master page and try add some standard boiler plate content to it as shown below:

The above highlighted text will now appear on every page which will use “Site.Master”…

7. Add datacontrols like GridView to the content pages

Now let us go to Default.aspx and add few controls which will use the database we created earlier…  For this simply open Default.aspx and click on the toolbar to the left and open up the Data controls…  Next, drag and drop a Grid view from the tool box on to the “ContentPlaceHolder1” of Default.aspx as shown below:

There is a switch at the bottom of the code editor to move to the design view… Click that switch and view the grid view in the design view…  The reason for doing this is that design view shows us something we call as Smart tags for grid view… In the Smart tag we will choose to create a new Datasource to tie the grid view to our database…

Do note few quick things like Default.aspx’s design view is now showing us the master page content as well…  Also I have to explicitly select the Grid View and then the top right arrow on it will give me the smart tag options…

The New Data Source dialog will look as below and you need to select Database and click “ok”…

On clicking OK the “SQL Datasource” configuration wizard will kick off… and will look as below:

If you notice 1-ClickPublish.mdf database file will already be pre-populated in the drop down…  Simply select the 1-ClickPublish.mdf and click next… Now name the connectionString as “1-ClickPublishDB” and click next…

In next screen select the FirstName, MiddleName and LastName columns of the database and click “Next” as shown below…

Finally click the “Test Query” button to make sure your query is yielding results as shown below and click “Finish”

Now if you select Default.aspx in the Solution Explorer and Hit Ctrl+F5 then you should see our web application up and running as shown below…

Now let us put some reasonable headings etc to the page by going into the source view of Default.aspx (by clicking the source button at the bottom of the page...

Type in the code as shown below and switch to “Design View” again to preview your page:

The preview should look as below…

Now what we want to achieve is that when user clicks “View Addresses” button we want to be able to show a page with Persons with their Address details… 

8. Add additional web page and use DataView to display more data

For this let us add a new "Web Content Form” called “Address.aspx” which also uses the Site.Master… Once we do so then our solution explorer should look as below:

Let us double click Address.aspx and open it in the “Source View” and this time drag and drop a details view from the toolbar, which will make the page look as below:

Let us switch back to design view and try to add a SQL data source similar to the one we added for Default.aspx… 

9. Use QueryBuilder to fetch data from multiple tables

Although this time we want to be able to show the content of not only the PersonAddress table but also want to get First Name and Last Name from the Person table…  Hence on the “Configure Select Statements” step of the datasource wizard we will try to add a custom SQL Query to the datasource by following below steps:

On clicking next on the dialog you will get an opportunity to select a query builder as shown below:

On clicking the query builder you will be asked to “Add tables”… Add both “Person” and “PersonAddress” tables by clicking the Add button as shown below:

Now the two tables will get added to the query builder… In the query builder now feel free to select the columns you want to display in the detailed view…  Also note how the query builder is building the SQL statements on your behalf…

Click “OK” on query builder and you should be taken back to the SQL Data source configuration wizard

Notice that now the query is populated, click “Next”…  As we did for default.aspx, test your query and make sure that the data is getting retrieved…

You should now be seeing following dialog:

Click “Finish” now… In the “Design View” now click on the “DetailsView” control and click “F4”…. This should launch the properties pane for the “DetailsView” as shown below:

In the Properties of the DetailsView1 control set “AllowPaging”= True… This will allow your page to iteratively move between addresses instead of just showing one address… 

10. Use AJAX to refresh only parts of the page rather than complete page

Now let us switch to the source view and add quick AJAX capabilities to the page so that the entire page does not get refreshed every time you change the pagination on the Details View… To do this put the below specified code to your page…

Once you do this you should be good to test your “Address.aspx” page…  To test your “Address.aspx” page simply select it in the solution explorer and hit “Ctrl+F5”… You should now be able see your page as below:

11. Hook up various pages and complete the experience….

Now finally we want to link the Default.aspx Page to Address.aspx page by click of “View Addresses” button… To do this let us open “Default.aspx” page in Design View and double click the “View Addresses” button… This will open the Default.aspx.cs page with the Button Click event hooked up…  We can now write Response.Redirect(“Address.aspx”); into the event handler as shown below…

With this we now have a fully functional app  connected with backend database… If you now select Default.aspx and hit Ctrl+F5 then you should see the below page":

On clicking the “View Addresses” button you should be able to see the below page with pagination to view addresses one after another:

With you web application should be ready to be deployed…

Hope this walkthrough was useful!!

-Vishal