Ty Anderson

Creating a web install package using Designer for WiX Toolset

The Designer for WiX Toolset, aka WiX Designer, is a game changer for anyone using the WiX Toolset to build installation programs. With WiX Designer, you now have even more features with our support of the web application projects and the addition of user interface editor.

Today, I will explain how to create setup package for an existing web application.

KEY ASSUMPTION #1: Visual Studio is already open on your desktop and you have a web application open. If not, create one and you are ready-to-go.

KEY ASSUMPTION #2: You have downloaded and installed the Designer for WiX Toolset.

KEY ASSUMPTION #3: You have downloaded and installed the WiX Toolset.

Add a WiX Setup Project to your solution

In the Visual Studio, add a new project WiX Setup Project. You can do this by…

  1. Right-clicking the current solution and clicking Add > New Project from the context menu.
  2. In the Add New Project dialog, click the WiX Toolset node. Then select the Setup Project template.

In the Visual Studio, add a new WiX Setup Project.

  1. Name the project whatever you like (I’m keeping the default name of WebetupProject) and click OK.

Visual Studio will add the setup project and open the Product.wxs file.

Making required modifications to the WiX template

I explained this before but it is worth repeating. With each WiX setup project, you need to make a couple of modifications.

Edit Product.wxs

You want to edit the MediaTemplate tag in Product.wxs as follows.

Before After
<MediaTemplate/> <MediaTemplate EmbedCab=”yes”/>

Setting EmbedCab attribute to “yes” will produce a single .msi file when you compile the setup project. If you do not make this modification, the build process will create a separate .CAB file.
Because WiX omits the EmbedCab attribute by default, you will always need to make this change to Product.wxs.

Convert to Web Application folder

Also by default, WiX treats a setup package as a desktop application setup package. Therefore, we need to convert the Application Folder to the Web Application Folder. You do this by opening the File System Editor.

  1. In the Solution Explorer, select the WebSetupProject.
  2. In the Solution Explorer toolbar, click the File System Editor button.
  3. In the File System Editor, select and delete the Program Files Folder.
  4. In the File System Editor, right-click the Application Folder and click the Convert to Web Application Folder option.

Convert to Web Application folder

Edit the File System

With the File System Editor still open, we need to complete two more tasks. The first is to add the Web app’s Primary Output to the bin folder.

  1. Expand the Web Application Folder and select the bin folder.
  2. Right-click to display the context menu. Click Add > Project Output
  3. In the Add Project Output Group dialog, select Primary Output

Add the Web app's Primary Output to the bin folder.

  1. Click OK.

The second task is to add the web app’s content files to the Web Application Folder.

  1. Right click the Web Application and select Add > Project Output
  2. In the Add Project Output Group dialog, click Content Files.

Add the web app's content files to the Web Application Folder.

  1. Click OK.

With these steps done, you could compile the setup package and call it done. But that wouldn’t be so great for the user. Let’s finish-up by editing the user interface.

Adding additional screens to the setup

Users expect some feedback during the installation process. They also expect you to give them some configuration options, if applicable. For this sample, we will add just such a configuration screen that allows the user to specify the installation address. We’ll also add a welcome screen and a progress screen.

To begin, open the User Interface Editor. You do so from the menu button in the Solution Explorer (be sure and click the WebSetupProject first). You can also right-click the WebSetupProject and use the View WiX Editors context menu. We’ll do this once for the Install node. The best practice is to do the same for the Administrative Install node as well.

  1. Right-click the Start node and click Add Dialog.
  2. In the Add Dialog window, select the Welcome screen. Click OK.

Adding the Welcome screen

  1. Right-click the Start node and click Add Dialog.
  2. In the Add Dialog window, select the Installation Address screen. Click OK.

Adding the Installation Address screen

  1. Right-click the Start node and click Add Dialog.
  2. In the Add Dialog window, select the Confirm Installation screen. Click OK.

Adding the Installation Address screen

  1. Now select the Progress node and right-click it. From the context menu, click Add Dialog.
  2. In the Add Dialog window, select the Progress screen. Click OK.

It is worth the effort to review the configurable properties for each screen. For example, the Welcome screen has the CopyrightWarning and WelcomeText properties. You can set them to say whatever you like. In addition, each screen has the BannerBitmap properties. This is you one shot at some branding.

Build the setup, test, and revise until ready

You now have a web application setup package. Just build it and go! Of course you have several other visual editors that make it easy to add registry keys, configure file types, define custom actions, and set launch conditions. They are powerful and, thanks to the WiX Designer… easy to use.

Available downloads:

Sample Web Application setup project

You may also be interested in:

22 Comments

  • https://secure.gravatar.com/avatar/36b4c4434189cfc658b50cee5a786fa3?s=32&d=https%3A%2F%2Fsecure.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G Dave Burlingame says:

    Seems like bullet item #6 above should say “Confirm Installation” and not “Installation Address” again.

    regards
    Dave

  • https://secure.gravatar.com/avatar/ab4ec2858cfdf1e44dadf8c50fae314d?s=32&d=https%3A%2F%2Fsecure.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G Dmitry Kostochko (Add-in Express Team) says:

    Hi Dave,

    Absolutely so. Fixed, thank you!

  • https://secure.gravatar.com/avatar/e7b0d903c4c571e99c70d76a694fd542?s=32&d=https%3A%2F%2Fsecure.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G Keith says:

    Ty,
    Any chance you can make a similar tutorial that creates a WiX Setup of an ADX for Office COM Add-in? Including instructions for per machine installation and updating without uninstalling previous>

    That would be very helpful.

    Thanks,
    kt

  • https://secure.gravatar.com/avatar/c68f03884efb33fd95bcfbd9f1078c07?s=32&d=https%3A%2F%2Fsecure.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G Ty Anderson says:

    Hi Keith,

    This is a good idea. We’ll add it to our topic list.
    In the meantime, would you settle for a sample project?

    Ty

  • https://secure.gravatar.com/avatar/e34e7a853d5213510a7695fe9ff566ac?s=32&d=https%3A%2F%2Fsecure.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G Tony says:

    Hi Ty,
    I was able to create msi with Wix designer, but can we create a Setup.exe to call msi with elevated privileges like in Visual Studio Deployment Projects, or just elevate the privileges of msi, because I was not able to install using the msi. I had to use msiexec from command prompt to install.

    Thanks
    Tony

  • https://secure.gravatar.com/avatar/ab4ec2858cfdf1e44dadf8c50fae314d?s=32&d=https%3A%2F%2Fsecure.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G Dmitry Kostochko (Add-in Express Team) says:

    Hi Tony,

    Yes, you can create setup.exe, please have a look at the “Creating setup.exe” chapter of the WiX Designer Getting Started (page 27).

  • https://secure.gravatar.com/avatar/6438d6fccbd01e346e38205822d9b37b?s=32&d=https%3A%2F%2Fsecure.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G alireza says:

    hi!
    i do all steps..but… in Build the setup package? i get a error: “error unable to load one or more of the requested types. retrieve the loaderexceptions property for more information”

    please help me for build a setup package for my WebApplication…

    error screenshot:
    https://www.dropbox.com/s/kcwdohh4nd5ytii/wix%20setup%20package%20error-WebApplication.png?dl=0

    thanks

  • https://secure.gravatar.com/avatar/ab4ec2858cfdf1e44dadf8c50fae314d?s=32&d=https%3A%2F%2Fsecure.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G Dmitry Kostochko (Add-in Express Team) says:

    Hi Alireza,

    Could you please send your project (or some demo project with the same behavior) to our support team for testing? We will try to find the cause of the candle.exe error.

  • https://secure.gravatar.com/avatar/6438d6fccbd01e346e38205822d9b37b?s=32&d=https%3A%2F%2Fsecure.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G Alireza says:

    Hi Dmitry Kostochko,
    very very thank you for your attention….
    i solved… i had a system problem!

  • https://secure.gravatar.com/avatar/6963f5a0584b3b1512113466063d5a7d?s=32&d=https%3A%2F%2Fsecure.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G Eric Stott says:

    I was successfully able to create an install package with the WIX plug-in.

    My install package needs to go through this ‘twice’ so I can create a second web application. Is there instructions on how I can do this?

  • https://secure.gravatar.com/avatar/ab4ec2858cfdf1e44dadf8c50fae314d?s=32&d=https%3A%2F%2Fsecure.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G Dmitry Kostochko (Add-in Express Team) says:

    Hi Eric,

    Sorry, I do not quite understand the question. Do you need to create a new (second) web application and a new setup project for it? Please clarify.

  • https://secure.gravatar.com/avatar/6963f5a0584b3b1512113466063d5a7d?s=32&d=https%3A%2F%2Fsecure.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G Eric Stott says:

    I have two web applications: one that serves up a website, and another that hosts a few web services.
    I can deploy manually to iis and I see two separate web applications there.

  • https://secure.gravatar.com/avatar/6963f5a0584b3b1512113466063d5a7d?s=32&d=https%3A%2F%2Fsecure.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G Eric Stott says:

    I need my one single setup project to create two web applications.
    I have two web projects in my solution, and I need to walk through the install process twice, installing the first Web Service Application, and then I need to walk through the second where I install the website, choosing the second set of configuration values (WebApp Name, app pool, etc).

  • https://secure.gravatar.com/avatar/29957f26ad2d8ba527fd9cc8cfa7b2e0?s=32&d=https%3A%2F%2Fsecure.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G Andrei Smolin (Add-in Express Team) says:

    Hello Eric,

    > I need my one single setup project to create two web applications.

    You can use the File System Editor to create a subfolder in the folder structure of your installer and place the Primary Output of the web service project to that folder.

  • https://secure.gravatar.com/avatar/6963f5a0584b3b1512113466063d5a7d?s=32&d=https%3A%2F%2Fsecure.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G Eric Stott says:

    So I thought that it would work
    One application that has two subfolders

    Except:

    Parser Error Message: It is an error to use a section registered as allowDefinition=’MachineToApplication’ beyond application level. This error can be caused by a virtual directory not being configured as an application in IIS.

  • https://secure.gravatar.com/avatar/29957f26ad2d8ba527fd9cc8cfa7b2e0?s=32&d=https%3A%2F%2Fsecure.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G Andrei Smolin (Add-in Express Team) says:

    Eric,

    Could you please send me the project? You can use the contact form at https://www.add-in-express.com/support/askus.php.

  • https://secure.gravatar.com/avatar/acbe0c99a9ab69913ef41693984c5390?s=32&d=https%3A%2F%2Fsecure.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G Mathumathi K says:

    i have tried. After creating setup project that registry icons are not available. By right clicking that set up project View Wix editor option also not available

  • https://secure.gravatar.com/avatar/29957f26ad2d8ba527fd9cc8cfa7b2e0?s=32&d=https%3A%2F%2Fsecure.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G Andrei Smolin (Add-in Express Team) says:

    Hello Mathumathi,

    If “Designer for Visual Studio WiX Setup Projects” is mentioned in the Installed products list (see the About dialog of your Visual Studio), please contact us using the contact form at https://www.add-in-express.com/support/askus.php.

  • https://secure.gravatar.com/avatar/46371a0e2cb7abb564114e6f8f796394?s=32&d=https%3A%2F%2Fsecure.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G Karen K says:

    I followed this, step by step, using a default web application in Visual Studio 2015. The first screen flashed by so fast I couldn’t tell what it said, followed by a screen that said the installer was interrupted before the project could be installed. I even removed all launch conditions, but it didn’t help. Please help! I need an installer for a web application for work.

  • https://secure.gravatar.com/avatar/ab4ec2858cfdf1e44dadf8c50fae314d?s=32&d=https%3A%2F%2Fsecure.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G Dmitry Kostochko (Add-in Express Team) says:

    Hello Karen,

    I think you can download our solution (you can find it under Available Downloads), test it and compare with your own web setup project. Probably this will help you to find out missing things in your project.

  • https://secure.gravatar.com/avatar/46371a0e2cb7abb564114e6f8f796394?s=32&d=https%3A%2F%2Fsecure.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G Karen K says:

    Thanks, Dmitry, but I tried it, and can’t get a clean build of the setup project. I get “Unable to execute transformation. Execution of the ‘document()’ function was prohibited. Use the XsltSettings.EnableDocumentFunction property to enable it. I don’t get that error when trying to build other setup projects, so I don’t know anything about the XsltSettings.EnableDocumentFunction.

    Karen

  • https://secure.gravatar.com/avatar/ab4ec2858cfdf1e44dadf8c50fae314d?s=32&d=https%3A%2F%2Fsecure.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G Dmitry Kostochko (Add-in Express Team) says:

    Hello Karen,

    Thank you! I have just updated the setup project, please re-download it.

Post a comment

Have any questions? Ask us right now!