Merge pull request #57 from MicrosoftEdge/installerReadme

Add READMEs for installer samples

Author: liminzhu

README.md

@@ -8,8 +8,7 @@ In the ``GettingStarted`` folder you will find the starter code for its respecti
 - WinUI Getting Started (Releasing Soon)
 
 In the ``Sample Apps`` folder you will find:
-- [WebView2Samples.sln](SampleApps/WebView2Samples.sln) - a collective soluction that inlcudes [WebView2APISample.vcxproj](SampleApps/WebView2APISample/WebView2APISample.vcxproj), [WebView2WpfBrowser.csproj](SampleApps/WebView2WpfBrowser/WebView2WpfBrowser.csproj), and [WebView2WindowsFormsBrowser.csproj](SampleApps/WebView2WindowsFormsBrowser/WebView2WindowsFormsBrowser.csproj).
-
+- [WebView2Samples.sln](SampleApps/WebView2Samples.sln) - a collective solution that includes [WebView2APISample.vcxproj](SampleApps/WebView2APISample/WebView2APISample.vcxproj), [WebView2WpfBrowser.csproj](SampleApps/WebView2WpfBrowser/WebView2WpfBrowser.csproj), [WebView2WindowsFormsBrowser.csproj](SampleApps/WebView2WindowsFormsBrowser/WebView2WindowsFormsBrowser.csproj), [WV2DeploymentWiXCustomActionSample](/SampleApps/WV2DeploymentWiXCustomActionSample/README.md), and [WV2DeploymentWiXBurnBundleSample](/SampleApps/WV2DeploymentWiXBurnBundleSample/README.md).
 
 Please leave feedback in our [our feedback repo](https://aka.ms/webviewfeedback)!
 
@@ -31,6 +30,14 @@ The [WebView2Browser](https://github.com/MicrosoftEdge/WebView2Browser) is an ad
 
 Follow the [WebView2Browser guide](https://github.com/MicrosoftEdge/WebView2Browser) to learn how to build an application that utilizes multiple WebViews.
 
+## WebView2 Deployment Samples
+
+To help developers understand how to [deploy Evergreen WebView2 Runtime](https://docs.microsoft.com/microsoft-edge/webview2/concepts/distribution#deploying-the-evergreen-webview2-runtime) with your applications, we have following samples:
+
+* [WV2DeploymentWiXCustomActionSample](/SampleApps/WV2DeploymentWiXCustomActionSample/README.md) creates a [WiX](https://wixtoolset.org/) installer for [WebView2APISample](./SampleApps/WebView2APISample/README.md) and uses [WiX Custom Action](https://wixtoolset.org/documentation/manual/v3/wixdev/extensions/authoring_custom_actions.html) to chain-install the Evergreen WebView2 Runtime.
+* [WV2DeploymentWiXBurnBundleSample](/SampleApps/WV2DeploymentWiXBurnBundleSample/README.md) creates a [WiX](https://wixtoolset.org/) installer for [WebView2APISample](./SampleApps/WebView2APISample/README.md) and uses [WiX Burn Bundle](https://wixtoolset.org/documentation/manual/v3/bundle/) to chain-install the Evergreen WebView2 Runtime.
+* [WV2DeploymentVSInstallerSample](/SampleApps/WV2DeploymentVSInstallerSample/README.md) uses the [Microsoft Visual Studio Installer Projects](https://marketplace.visualstudio.com/items?itemName=visualstudioclient.MicrosoftVisualStudio2017InstallerProjects) to create an installer for [WebView2APISample](./SampleApps/WebView2APISample/README.md) and chain-install the Evergreen WebView2 Runtime.
+
 ## .NET (WPF and Windows Forms)
 
 #### Getting Started

SampleApps/WV2DeploymentVSInstallerSample/README.md

@@ -0,0 +1,62 @@
+---
+description: "Demonstrate the deployment workflow of WebView2 with VS installer."
+extendedZipContent:
+  -
+    path: SharedContent
+    target: SharedContent
+  -
+    path: LICENSE
+    target: LICENSE
+languages:
+  - cpp
+page_type: sample
+products:
+  - microsoft-edge
+urlFragment: WV2DeploymentVSInstallerSample
+---
+# WebView2 Deployment VS Installer Sample
+
+To help developers understand how to [deploy the Evergreen WebView2 Runtime](https://docs.microsoft.com/microsoft-edge/webview2/concepts/distribution#deploying-the-evergreen-webview2-runtime) with your application, this sample uses the [Microsoft Visual Studio Installer Projects](https://marketplace.visualstudio.com/items?itemName=visualstudioclient.MicrosoftVisualStudio2017InstallerProjects) to create an installer for [WebView2APISample](./SampleApps/WebView2APISample/README.md) and chain-install the Evergreen WebView2 Runtime.
+
+This sample showcases [deployment workflows](https://docs.microsoft.com/microsoft-edge/webview2/concepts/distribution#deploying-the-evergreen-webview2-runtime) for,
+
+* Download the Evergreen WebView2 Runtime Bootstrapper through link.
+* Package the Evergreen WebView2 Runtime Bootstrapper.
+* Package the Evergreen WebView2 Runtime Standalone Installer.
+
+## Prerequisites
+
+* [Visual Studio](https://visualstudio.microsoft.com/vs/) with C++ support installed.
+* [Microsoft Visual Studio Installer Projects](https://marketplace.visualstudio.com/items?itemName=visualstudioclient.MicrosoftVisualStudio2017InstallerProjects).
+
+## Build steps
+
+To create a VS installer that chain-install the Evergreen WebView2 Runtime,
+
+1. Edit the `product.xml` file depending on the workflow you wish to use. 
+    * For "Package the Evergreen WebView2 Runtime Bootstrapper",
+        * Within the `<PackageFiles CopyAllPackageFiles="false">` and `</PackageFiles>` section, un-comment the line `<PackageFile Name="MicrosoftEdgeWebview2Setup.exe" />`, and comment out other lines.
+        * Within the `<Commands Reboot="Defer">` and `</Commands>` section, make sure `PackageFile` points to `"MicrosoftEdgeWebview2Setup.exe"` so that the VS installer would be using the Bootstrapper.
+    * For "Download the Evergreen WebView2 Runtime Bootstrapper through link",
+        * Within the `<PackageFiles CopyAllPackageFiles="false">` and `</PackageFiles>` section, un-comment the line `<PackageFile Name="MicrosoftEdgeWebview2Setup.exe" HomeSite="WebViewRuntime" PublicKey="..."/>`, and comment out other lines. Note that the PublicKey for the WebView2 Runtime Bootstrapper may change without notice and we are working on addressing this issue. For now, you may need to replace it with an updated PublicKey.
+        * Within the `<Commands Reboot="Defer">` and `</Commands>` section, make sure `PackageFile` points to `"MicrosoftEdgeWebview2Setup.exe"` so that the VS installer would be using the Bootstrapper.
+    * For "Package the Evergreen WebView2 Runtime Standalone Installer",
+        * Within the `<PackageFiles CopyAllPackageFiles="false">` and `</PackageFiles>` section, un-comment the line `<PackageFile Name="MicrosoftEdgeWebView2RuntimeInstallerX64.exe" />`, and comment out other lines.
+        * Within the `<Commands Reboot="Defer">` and `</Commands>` section, make sure `PackageFile` points to `"MicrosoftEdgeWebView2RuntimeInstallerX64.exe"` so that the VS installer would be using the Standalone Installer.
+        * If you're targeting non-X64 devices, you may also want to edit the `MicrosoftEdgeWebView2RuntimeInstallerX64` filename to reflect the correct architecture.
+1. If you plan to package either the Bootstrapper or the Standalone Installer, [download](https://developer.microsoft.com/microsoft-edge/webview2/) the Bootstrapper or the Standalone Installer and place it under the `WV2DeploymentVSInstallerSample` folder.
+1. Copy the entire `WV2DeploymentVSInstallerSample` folder, and paste it under either,
+    * `Program Files (x86)\Microsoft SDKs\ClickOnce Bootstrapper\Packages\`, or
+    * `<VS Install Dir>\MSBuild\Microsoft\VisualStudio\BootstrapperPackages\` (requires at least VS 2019 Update 7).
+1. Create a Setup Project in Visual Studio. 
+    * In Visual Studio menu, select `File > New > Project`. 
+    * Search for `Setup Project`.
+    ![alt text](../../media/CreateSetupProject.PNG)
+    * Create a Setup Project.
+1. Add WebView2 Runtime as a prerequisite. 
+    * In Visual Studio menu, select `Project > Properties`.
+    * In the Property page, select `Prerequisites..`.
+    ![alt text](../../media/SetupPrerequisites.PNG)
+    * Check `Edge WebView2 runtime`, and un-check other prerequisites. Select `OK`.
+    ![alt text](../../media/SelectPrerequisites.PNG)
+1. Build the Setup project.

SampleApps/WV2DeploymentWiXBurnBundleSample/Bundle.wxs

@@ -19,7 +19,7 @@
 			</ExePackage> -->
 
       <!-- [Package Bootstrapper] Package bootstrapper to use during app install. Source can be anywhere you put the boostrapper on. -->
-      <!-- <ExePackage Id="DownloadAndInvokeBootstrapper" Name="Install WebView2 Runtime" Cache="no" Compressed="no" PerMachine="yes" Vital="no" SourceFile="..\MicrosoftEdgeWebview2Setup.exe" InstallCommand=" /silent /install" InstallCondition="NOT (REMOVE OR WVRTInstalled)" /> -->
+      <!-- <ExePackage Id="InvokeBootstrapper" Name="Install WebView2 Runtime" Cache="no" Compressed="no" PerMachine="yes" Vital="no" SourceFile="..\MicrosoftEdgeWebview2Setup.exe" InstallCommand=" /silent /install" InstallCondition="NOT (REMOVE OR WVRTInstalled)" /> -->
 
       <!-- Step 2: Chain Sample App  -->
       <!-- Make sure to comment out default Custom Action in WebView2SampleApp project -->

SampleApps/WV2DeploymentWiXBurnBundleSample/README.md

@@ -0,0 +1,44 @@
+---
+description: "Demonstrate the deployment workflow of WebView2 with WiX Burn Bundle."
+extendedZipContent:
+  -
+    path: SharedContent
+    target: SharedContent
+  -
+    path: LICENSE
+    target: LICENSE
+languages:
+  - cpp
+page_type: sample
+products:
+  - microsoft-edge
+urlFragment: WV2DeploymentWiXBurnBundleSample
+---
+# WebView2 Deployment WiX Burn Bundle Sample
+
+To help developers understand how to [deploy the Evergreen WebView2 Runtime](https://docs.microsoft.com/microsoft-edge/webview2/concepts/distribution#deploying-the-evergreen-webview2-runtime) with your application, this sample creates a [WiX](https://wixtoolset.org/) installer for [WebView2APISample](../WebView2APISample/README.md) and uses [WiX Burn Bundle](https://wixtoolset.org/documentation/manual/v3/bundle/) to chain-install the Evergreen WebView2 Runtime.
+
+This sample showcases [deployment workflows](https://docs.microsoft.com/microsoft-edge/webview2/concepts/distribution#deploying-the-evergreen-webview2-runtime) for,
+
+* Download the Evergreen WebView2 Runtime Bootstrapper through link.
+* Package the Evergreen WebView2 Runtime Bootstrapper.
+
+Packaging the Evergreen WebView2 Runtime Standalone Installer is very similar to packaging the Evergreen WebView2 Runtime Bootstrapper.
+
+## Prerequisites
+
+* [Visual Studio 2019](https://visualstudio.microsoft.com/vs/) with C++ support installed.
+* [WiX Toolset](https://wixtoolset.org/).
+* [WiX Toolset Visual Studio 2019 Extension](https://marketplace.visualstudio.com/items?itemName=WixToolset.WixToolsetVisualStudio2019Extension).
+
+## Build steps
+
+To create a WiX installer that chain-installs the Evergreen WebView2 Runtime through Burn Bundle,
+
+1. Open `../WebView2Samples.sln` with Visual Studio. 
+1. This sample is an extension to the [WV2DeploymentWiXCustomActionSample](../WV2DeploymentWiXCustomActionSample/README.md) sample. Let's open `Product.wxs` under the `WV2DeploymentWiXCustomActionSample` project, and comment out all the `<Binary>`, `<CustomAction>`, and `<Custom>` elements under `<!-- Step 4: Config Custom Action to download/install Bootstrapper -->` and `<!-- Step 5: Config execute sequence of custom action -->` so that Custom Action is not used.
+1. Open `Bundle.wxs` under the `WV2DeploymentWiXBurnBundleSample` project. Edit `Bundle.wxs` depending on the workflow you wish to use.
+    * For "Package the Evergreen WebView2 Runtime Bootstrapper", uncomment the `<ExePackage Id="InvokeBootstrapper" ...>` element below `<!-- [Package Bootstrapper] ... -->`, and comment out other `<ExePackage>` elements.
+    * For "Download the Evergreen WebView2 Runtime Bootstrapper through link", uncomment the `<ExePackage Id="DownloadAndInvokeBootstrapper" ...>` element below `<!-- [Download Bootstrapper] ... -->`, and comment out other `<ExePackage>` elements.
+1. If you plan to package the Evergreen WebView2 Runtime Bootstrapper, [download](https://developer.microsoft.com/microsoft-edge/webview2/) the Bootstrapper and place it under the enclosing `SampleApps` folder.
+1. Build the `WV2DeploymentWiXBurnBundleSample` project.

SampleApps/WV2DeploymentWiXCustomActionSample/README.md

@@ -0,0 +1,48 @@
+---
+description: "Demonstrate the deployment workflow of WebView2 with WiX Custom Action."
+extendedZipContent:
+  -
+    path: SharedContent
+    target: SharedContent
+  -
+    path: LICENSE
+    target: LICENSE
+languages:
+  - cpp
+page_type: sample
+products:
+  - microsoft-edge
+urlFragment: WV2DeploymentWiXCustomActionSample
+---
+# WebView2 Deployment WiX Custom Action Sample
+
+To help developers understand how to [deploy the Evergreen WebView2 Runtime](https://docs.microsoft.com/microsoft-edge/webview2/concepts/distribution#deploying-the-evergreen-webview2-runtime) with your application, this sample creates a [WiX](https://wixtoolset.org/) installer for [WebView2APISample](../WebView2APISample/README.md) and uses [WiX Custom Action](https://wixtoolset.org/documentation/manual/v3/wixdev/extensions/authoring_custom_actions.html) to chain-install the Evergreen WebView2 Runtime.
+
+This sample showcases [deployment workflows](https://docs.microsoft.com/microsoft-edge/webview2/concepts/distribution#deploying-the-evergreen-webview2-runtime) for,
+
+* Download the Evergreen WebView2 Runtime Bootstrapper through link.
+* Package the Evergreen WebView2 Runtime Bootstrapper.
+* Package the Evergreen WebView2 Runtime Standalone Installer.
+
+## Prerequisites
+
+* [Visual Studio 2019](https://visualstudio.microsoft.com/vs/) with C++ support installed.
+* [WiX Toolset](https://wixtoolset.org/).
+* [WiX Toolset Visual Studio 2019 Extension](https://marketplace.visualstudio.com/items?itemName=WixToolset.WixToolsetVisualStudio2019Extension).
+
+## Build steps
+
+To create a WiX installer that chain-installs the Evergreen WebView2 Runtime through Custom Action,
+
+1. Open `../WebView2Samples.sln` with Visual Studio, then open `Product.wxs` under the `WV2DeploymentWiXCustomActionSample` project. Edit `Product.wxs` depending on the workflow you wish to use.
+    * For "Download the Evergreen WebView2 Runtime Bootstrapper through link",
+        * Under `<!-- Step 4: Config Custom Action to download/install Bootstrapper -->`, uncomment the `<CustomAction Id='DownloadAndInvokeBootstrapper' ...>` element below `<!-- [Download Bootstrapper] ... -->`. Comment out other `<Binary>` and `<CustomAction>` elements.
+        * Under `<!-- Step 5: Config execute sequence of custom action -->`, uncomment the `<Custom Action='DownloadAndInvokeBootstrapper' ...>` element below `<!-- [Download Bootstrapper] ...-->`. Comment out other `<Custom>` elements.
+    * For "Package the Evergreen WebView2 Runtime Bootstrapper",
+        * Under `<!-- Step 4: Config Custom Action to download/install Bootstrapper -->`, uncomment the `<Binary Id="MicrosoftEdgeWebview2Setup.exe" ...>` and `<CustomAction Id='InvokeBootstrapper' ...>` elements below `<!-- [Package Bootstrapper] ... -->`. Comment out other `<Binary>` and `<CustomAction>` elements.
+        * Under `<!-- Step 5: Config execute sequence of custom action -->`, uncomment the `<Custom Action='InvokeBootstrapper' ...>` element below `<!-- [Package Bootstrapper] ...-->`. Comment out other `<Custom>` elements.
+    * For "Package the Evergreen WebView2 Runtime Standalone Installer",
+        * Under `<!-- Step 4: Config Custom Action to download/install Bootstrapper -->`, uncomment the `<Binary Id="MicrosoftEdgeWebView2RuntimeInstallerX64.exe" ...>` and `<CustomAction Id='InvokeStandalone' ...>` elements below `<!-- [Package Standalone Installer] ... -->`. Comment out other `<Binary>` and `<CustomAction>` elements. If you're targeting non-X64 devices, you may also want to edit the `MicrosoftEdgeWebView2RuntimeInstallerX64` filename to reflect the correct architecture.
+        * Under `<!-- Step 5: Config execute sequence of custom action -->`, uncomment the `<Custom Action='InvokeStandalone' ...>` element below `<!-- [Package Standalone Installer] ...-->`. Comment out other `<Custom>` elements.
+1. If you plan to package either the Bootstrapper or the Standalone Installer, [download](https://developer.microsoft.com/microsoft-edge/webview2/) the Bootstrapper or the Standalone Installer and place it under the enclosing `SampleApps` folder.
+1. Build the `WV2DeploymentVSInstallerSample` project.