Using MSIX with CI/CD Pipelines for Code Changes

Key Takeaways

[Music] hello everyone i'm sahibi miranja and i'm a program manager on the windows experiences and devices team and i work specifically on msix today my colleague tanaka jim ha and i are going to talk about setting up an end-to-end workflow for your windows app development focusing on the powerful combination of msix and ci cd pipelines if you're not already familiar with msix let me summarize it for you msix is our modern windows app packaging format which has evolved from the best of our previous formats like msi windows click once and apex msix is our recommended app packaging format because it delivers some key benefits for example you can reuse your existing assets and make use of this modern packaging experience for all your windows apps whether they are win32 uwp wpf or windows phones apps all msix packages are required to be signed using a trusted certificate from the publisher and that provides integrity to the app msix also provides reliable installs boasting a 99.9 success rate over billions of installs with a guaranteed and clean uninstall that prevents pc rot apps are installed per user and windows managers installs updates and removes msix also offers declarative install and that means less need to customize or script your installer which makes the packaging and deployment experience so much simpler and last but not the least your app can always stay up to date by using the msix auto update feature which will dive into some more detail later so now that we understand msix a little better let's see why you would want to use ci cd pipelines um we know that you want to be able to deploy your app more frequently get your binaries to your customers faster and error free and that you want to be able to save time and save money the great thing is we found that high performance devops companies achieve these goals by taking advantage of optimized devops workflows so that is what we want to help you achieve and why we are talking about devops or ci cd pipelines because it allows you to achieve these goals by automating your builds testing integration and deployments as you make and push your code changes so now that we understand the benefits of msix and the benefits of devops let's discuss how they fit into your app development workflow your workflow can basically be split into three parts development build and packaging and deployment now when we think about incorporating devops in the mix there's basically no change to the first part you would develop your app author your code as you normally would um using the technologies that you usually do but you can automate your build and packaging process and you can automate your deployments by using ci cd pipelines msix also makes your build and packaging process easier based on the benefits we discussed earlier and it makes your deployment part even better with efficient and auto updates and it helps you get your app to your customers even faster whether you choose to distribute it via the microsoft store or through your own website using an app installer or by using enterprise management solutions like the configuration manager or intune the way to currently achieve this devops setup is by configuring your azure pipelines with a handcrafted yaml file and that can be complicated error-prone time-consuming and intimidating for people who are not familiar with the technology and we have been listening to your feedback about this and that is why we now have an azure devops extension which will offer you an intuitive ui based workflow which will set up your pipeline for you based on the information you provide so the msixcicd extension that i just mentioned will handle all the components of build and packaging workflow and based on the options you select and inputs you provide it will set up your pipeline to plug in your source code build it package it as an msix handle signing using the trusted certificate you provide and configure deployment and auto update settings for you the extension will very soon be available on the visual studio marketplace and we would love to see your adoption and hear your feedback about it so to get your end-to-end workflow setup you mainly just need your source code some form of source control and a ci cd pipeline now you don't have to be using visual studio necessarily you can use any ide or any tools that you use but the reason i mention it here is because we will be using visual studio for the demo i also want to mention here that the msix packaging utility is integrated within visual studio and offers a seamless ui based flow to package your app as an msix and maybe do some local testing um you can use any tool for source control or version control that plugs into azure pipelines because you would need that to be able to use the msix packaging extension and to set up your ci cd pipeline you do need azure pipelines as the msix extension will be available on the visual studio marketplace which you can grab and install in your azure devops organization so tanaka has a really cool demo setup for us to see what the end-to-end workflow looks like so let's go check that out hello my name is tanaka jima i'm a program manager on the windows developers and experiences team and i work on msix and our application deployment so what i want to do today is kind of show you how you can use the combination of msix as a deployment technology and then ci cd pipelines in azure devops to create a streamlined workflow to get uh application updates and deployments to your users so what i will show you is an application that i've made that i'm working on and then how i can make changes to that in visual studio and how those changes will end up on a user's machine and i'll tell you everything else kind of in between that that sticks it all together and that is a powerful combination of msix and ci cd pipelines in azure devops so let's jump in and see how that works okay so what i have here is a website that i'm using to distribute my application in this case i'm using a website but if you're using microsoft intune or configuration manager you can continue using those solutions in this case i'm just using this website for the purpose of the demo so what my site allows usually do is download my application from here and if i click on the download button what you'll see is we get this nice ui driven by the app installer file in windows and it says that this app is already installed i already have this package installed and as you can see here it's version 1.1.40 so instead of reinstalling this i'm going to launch the application that i already have installed so this is my app and it's a simple app that you can add photos to and play around with the photos so what i want to do now is essentially add new functionality or add a new feature to my application and then show you how from adding that making those changes in visual studio those same features will end up on my end users machines in a very seamless manner and the glue in the middle or the missing pieces rather in the middle are using ci cd pipelines in azure devops and that will streamline the entire process from virtual studio to getting those new binaries those new features on my end user's device so you can use this mechanism to deploy new features or to send out bug fixes and it's a great way to keep new versions of your application flowing to your users so let's look at the different pieces that i have that i'm going to work with here so i have my code in visual studio and if you see here this is the familiar ui of the application so this is where i'm going to make changes to my application and then the next piece is my repository in getup so this is where i i have my code and this is where i'll be pushing out my changes to and then pulling from here is a build pipeline in azure devops so what it essentially does is anytime there's a new commit or a new code in my repository on github it creates a new build of my package of my application and then packages that that new build as an msix and it also creates metadata that i'll use for updating the application i'll kind of walk you through some of the details a little later another part here is a release pipeline that i have so what this release pipeline does is it takes any newly built binaries from my build pipeline and then it deploys them to my website so it will essentially pull in any new any new versions of my application available and then deploy them on my server such that they will be available to users however as we'll see users don't have to come back to the site and try to install the new version from here one of the great things about msix is that we have auto update functionality that that you can take advantage of such that windows will actually drive the update of your application if a new version is available and i'll show you how that is set up in a little bit so this is the overview of the different pieces i have here again i have my application right being disputed to this site i have my code in visual studio and i have my build pipeline and then my release pipeline and then i have uh my my the site i'm using to deploy my application so let's go back to the app itself now if you look at the app one of the ways you can currently add a new photo is using this button here so if i click on that i can select a new picture and let's add that and voila the new picture has been out of the application right so this is great now what i want to do is kind of take this a step further and say if a user is browsing through images like like this then if they right click on the image and try to share so this is the share functionality in windows and they try to share out that image i want my application photostore to be one of the options that they see over here right so this this would be a cool feature where my app would show up and then they'd be able to select my app and then the image they select will be sent out to my application right so this is the new feature that i want to add to my application as you can see right now my app photo store isn't one of the options so let's go and make that happen i'm going to go over to visual studio and so this is my code right this is my application and i'm using the app packaging project and this is a project in visual studio that allows you to take a desktop application and packages msix so if you are currently currently using a desktop application or developing a desktop application you can use a packaging project to create an msx package for your application so let's go and make the code change i already have this code here and i'm just going to uncomment it okay there we go so what this does is it's essentially saying that register my application photostore as a share target such that if somebody's trying to share any one of these image files file types let my application be an option for them to share out that image too all right so this is what you this is the new share functionality i want my application to have i'm just going to make one more change here so as a visual aid i'm going to modify the title of my app so let's call that photostore share so that when we see this new version we'll know that it's the updated version with the share functionality right so i've made my changes now the next step is as i would do i would then push these changes out to our repository right on getup so i'm going to do that from here and add my commit message here and then i'm going to push out those changes to my getup repository so i'll give that a few minutes or a few seconds rather so we got our success message for the changes getting up to get up so let's go and have a look at our repository so here's my github repo let me refresh this and if you can see here there's a new change that was added about 41 seconds ago so that's the one the commit that i just made right add this add to your target so our changes have been uh registered here in github now let's go have a look at our pipeline so let me refresh the page here and so what has happened is a new build pipeline is actually kicked off if you can see about yeah 30 seconds ago now a new build was started and that was triggered from the changes that i made in my github repository so you see i didn't really have to do anything i had it pre-configured such that when the new changes at my repo a new build would start uh using that new the new version of the code that was available on github so this new build that's that's running right now has uh the new share functionality that i just added and this was all automated right so i want to show you what exactly is going on kind of behind the scenes in a little bit more detail we realized that sometimes creating a ci cd pipelines may not always be that simple so what we did is to make things easier for you is we added these azure devops tasks so you can use these to package your applications msix and we have a task for you to use to like to build your application and packages msix and we have another task that you can use to create an app installer file and an app installer file is what drives what we use to drive the specific update settings format for my application such that when a new version of application is available windows will kind of automatically pull down that version as we'll see later and then we also have a task for you to sign your package so an msx package must be signed with a cert that is trusted on a machine for it to be installed on a machine and we use that to vouch for the integrity of the package and guard against malicious content so you can sign using this task in azure devops and i have a bonus one here that i'm not actually using today but you can also create a vhdx for msx app attach so if you're using msx app attach in wvd for example you can create a vhdx package here in azure devops to use for those deployments right so what my build is doing is it's essentially building the university of my package creating an app installer file with the update settings for my application and then signing my package right now once these once my code is built i i'll end up with that msx package and i'll end up with that app and solar file right now let's have a look at the release pipeline so what my release pipeline does here's an example of a pipeline that was one previous that was run previously so what my pipeline does is essentially it takes that new build right off my application and then deploys it to my web server such that it's now available on my site and so this means that anytime a new version of my application is built it'll automatically get then deployed to my server so if you're using a separate mechanism to distribute your app you can configure that in your release pipeline so as you can see here the build to actually add the share functionality my application has completed and i'm going to refresh my release pipeline page and you'll see that release was actually kicked off of the new version of my package and this is the one that has the share functionality in it so that means that the new version of my package should be available on my server so what i want to do now is i'm going to close the application my the photo store app and then i'm going to launch it again so you'll notice this ui prompt here what what's happening now is because i have that app insolar file driving um the installation the update of my application windows kind of checks to see if there's a new version of my application present and you can configure your uh your own file to show the prompt or to not show the prompt and in my case i'm showing the prompt more as a visual aid so that you will see kind of what's happening in the in the background so here it is picked up on the new version of photoshop right this is version 1.1.41 and if you remember that's the same version that was recently deployed right so i'm gonna actually update the application i'm gonna take this new version and i'll give that a second to pull down the the new bits so what this has done is it's downloaded the new version of of four store and if you remember that visual aid that we added in in the code earlier you see this shared title here that i added to this is the new version of my package that has the share functionality in it so let's go and actually try it out i'm going to go back to my images and i'm going to try to share an image to my app so if i say say share here you'll see that my application photo store is actually one of the options that shows up now to share an image file too so i'm going to say yes to that and as you can see here it has added the new image to my application so this is the the new image that i just shared out right now and my application was successfully registered as a share target so the code changes that i made a few minutes ago are now available um on my machine in this new version of my application right so one of the things that i mentioned here was that we are you're using app installer file and i want to kind of show you what that looks like a little bit more detail so i have this file defined in my um in my application that i'm deploying with my application and what it you can see here there's an element that says update settings so what this does is it tells windows that anytime the application is launched check for an update and that's why you saw that when i launched the application there was an update check you can also specify whether or not you want to show a prompt and in my case i'm showing a prompt but you can also set this to false and the user won't see a prompt when the update check is happening in addition to that there's this element stage that says it's called update blocks activation and this essentially says that if you want a user to have to take an update before they can launch the app right then they must take the update so this is very useful in cases where let's say you have a very bad bug that you want fixed and you don't want users to use the application before they take the new update of the uh of the application so if you set this to true means that a user will have to update the new version if the new version is available before they can actually launch the application so it's a good um it's a good switch to use in those types of scenarios and there's also this automatic background task uh that element you see here and what this does is it essentially says that even if the application hasn't been launched uh still check for updates in the background so you'll see here like the this is all happening when the application launches right but even if the app hasn't been launched uh you can configure it such that windows will still check for an update for your app so even your app hasn't been used in a in a specific period of time windows will check for an update and this happens uh every eight hours and so in this background task run and make sure uh to check to see if there are any new versions of application if they are they will be automatically pulled down so these are some of the switches that you can use in the app installer file to drive the installation and the updating of your package right so let's kind of recap that one more time to see what we did and how we ended up here so i had my application right and then i had my code on visual studio and this is where i make changes to my app and in addition to all of this i had my repository on github push changes out to my repo and then i had my build pipeline that kicked off and when the change happened right so create a new build of my application a new version of application and it packaged the app as an msix and created an app installer file for the updates and then that was uh deployed to my site using a release pipeline that i had set up so it took those artifacts deploy them to my site and then they were available for uh for for my users and because i'm using auto updates uh in with msix i didn't actually have to come in and download the new version here but when i launched the application the new version was downloaded and i had that new version with the share functionality on my machine so you see that this is a fantastic way for you to actually make sure that you get new features out to your users as quickly as possible and as streamlined as as smooth as possible so yeah this is a a great setup and uh it's it's very handy in in kind of today's world so it's definitely something to kind of take a look at and take advantage of that was a really cool demo and as we wrap that up i want to leave you with some additional resources the first link points to our msix devops sample github repository where you can learn best practices when doing devops for your windows application the second link points to our official msix documentation the msixtech community is a place where you can ask questions discuss topics on various aspects of msix and stay updated on new announcements and new features the last link is to the msrx labs which provide a series of hands-on exercises to help people get familiar with different aspects of msix like the msix packaging tool and msix core i hope you had fun learning more about msix and devops with us today thank you