.NET MAUI Azure DevOps Build and Release Pipelines - Part 1: Windows

hi guys welcome back in this video series we'll be looking at building our net Maui apps Windows IOS and Android apps through Azure develops and Publishing our build artifacts to Azure devops that we can then consume in a release by Pline to push it to the appropriate stores so in this first video we'll be mostly focusing on Windows and then in the subsequent videos we'll be looking at the Android and iOS Parts as well as designing and releasing these artifacts to the appropriate stores so the first thing that you want to do is head over to Azure microsoft.com products devops I'll drop the link in the description below and click Start free if you don't have an Azure devops account it won't cost you anything and it losts a lifetime and and you get 1,800 minutes B time for free every single month so it should be more than enough for any small team and they have options to upgrade to parallel pipelines if you do reach that limit which then gives you unlimited build minutes um for a very reasonable price okay so once you've started your account you can head over to devops and create a new project project so I'm just going to call this my pipelines demo it's going to be a private repository and I'm going to click create great our project has been created so you can head over to the repos tab so you can create your first repository on devops I'm going to click here initialize but I'm want to set my GE ignore to visual studio so that it already removes my benon object folders and all all those sorts of things so I'm just going to click initialize and it also created a little read me for me so I'm just going to click here on the Clone button to clone this repository that we've just created click on the copy button my preference is get extensions but you can use any git client that you know well so just go to clone repository already pasted the link for me you can just navigate to where you want your repository to be stored it will create the subdirectory for you and you can just click clone yes I want to open this repository and there we have it our brand new repository has been cloned so I've launched visual studio and I'm just going to create a new blank Maui project so you can just search here for Maui and what we want is a net Maui app next let's just call this and I'm going to store it in that so now it's in the repository that I've cloned next can select your Nate version that you want to Target there and hit create so we have a blank Maui project here we can just quickly launch it for Windows and just make sure it it runs or you can plug in your Android phone to launch the Android application if you've set developer options on either or and there we go our blank Maui project has been launched and it is working so now we've created our project so I'm just going to commit all these files that were created so that's on the repository great so we've pushed our sample project to the repository from here on out I'm going to create a separate branch which I'm going to call production so the idea is that every time code is pushed to this Branch we will execute a production B for our app for all three types of apps for Windows Android and iOS so I'm just going to click here create Branch okay there we go and I want to push this to the server great all right so now that we've created our sample project we want to go to the pipelines tab in Azure devops and click the create pipeline button it will ask you where is your code located so this can also be on a GitHub repository or you know but here we're going to choose Azure repos G because it's literally in our repos here and it can already find it over there so we're going to select that repository and here it gives you a couple of options to get to help you get started so we're going to just use the starter pipeline since it gives us a lot of flexibility to build it in the way that we like it to so this is the editor that you get inside devops to edit your pipeline scripts they are yaml scripts which is kind of industry standard for these types of build scripts so here on the side you'll also see a show assistant button this essentially gives you a list of Quick Start options that you can fill in and then it will spit out the the required code for you so that can be quite useful in quickly configuring your pipeline the first thing that we're seeing here is just a comment from Microsoft telling you to go to this link which is a very useful link and I'd recommend if you get stuck to just first have a look over here because there's so much information on this the next is a mention of a trigger and there's a main here so what essentially what that means is like every time we're pushing code on the main branch this script will execute so we'll definitely want to change that but let's see what our options are if we go to that link and you go to the trigger section so it gives you a lot of good documentation on that so one important thing is triggers aren't disabled by default necessarily so if you don't have that in at all it will kind of just execute always so that might be a weird bug that you might Chase in the future so hopefully that saves you some time so if you don't want this to ever execute automatically you can set this to none but we do want it to execute we want it to execute on our production Branch so let's just go bit down so here you can select multiple branches as well there's also a batch option which is quite useful if you are on the free account since changes are pushed in a batch it will try and build for them together so you might save some build minutes so we'll probably want that to Cho so this is a nice little template that we can copy come over here important thing to note is your yaml scripts are indentation sensitive like python so we going to change the branch to production make sure you spell that exactly case sensitive as you created the branch on your git repo next we can choose the virtual machine that's going to be performing this build so there's quite a few options for your VMS so you can just scroll all the way down and you'll see the one place there's hosted images link if you go to that it gives you the list of VMS that you can Target at the top uh you can have a Windows Server building it you can use Linux abtu or have a Mac OS VM that can build for you so for example our IOS app will have to build on the map back OS image whereas Android you have a variety of choices but your Windows app will also be using the the windows image let's get started on using the windows latest one since we can Target both Android and Windows on on that VM next you'll see a steps mention and a inside it it runs a script just echoing hello world just as an example and then there's another step which is a a different uh script to just also Echo some additional lines of text so a important concept to understand on these steps is it's kind of a tiered system so on your outermost tier you have stages inside your stages you have jobs and inside your jobs you have steps and each step is the actual piece that you'll be executing which can be any of these tasks that you see on this side so it it might sound a little bit daunting at first but essentially it's just different ways of grouping it and you can for example run each stage in a different virtual machine for so the first step to building our windows.net app would be to set the net version that we'll be using unfortunately this task isn't actually listed in the side panel but you can just Google that so the at two stands for version two of this task so as they make breaking changes to the API to of this task they'll bump the version so if you look at the documentation it just gives you some examples on how you can set your net version it's quite a lengthy read but we don't really need all of that essentially what we want to be setting is the version this one so you can copy actually let's copy the whole thing and then we can just remove what we don't need okay so you can just paste it in here and remove all these excessive amount of comments and we can perhaps add that one and the version as well so you could specify this right here which would be 8.x but a better way than doing that so that we can update in the future is opening the library tab down here at the left so I'm just going to open that in a new tab so I don't lose my progress in this script over here we can create a what's known as a variable group and let's just call this variable group pipeline variables and let's add our variable so this is just going to be net version which is going to be 8.x can save this variable group now we'll just have to import this so let's copy that go back to our script and then we just want to add a variable step so it does have some also complete so you can just press tab once it gives you the right suggestion we want to indent and then this is going to be a group and it's called pipeline variables the variable that we created Wast net version and the way you reference a variable is with the dollar sign and in round brackets so let's copy paste that to make sure we don't make it typer and then in the future we can just change this value and without having to update our scripts and we'll be targeting a new net version so that's quite a powerful little extra tool at our disposal great so now we've set the net version but one thing that you'll notice when you run this pipeline you you won't be able to see exactly what this step is so there's something that they call a display name which will just kind of give you a readable name for this step so we're just going to call this setnet version and then we want to run a script to download our Maui workloads so in the side panel you're just going to se search for bash which is a script that can run on all three VMS and we're just going to specified inline so you can also have the script in your repository and Target to that or you can set it to inline so that's what I'm going to do here so I'm going to add that and I'm going to add a display name to this one as well which is going to be install Mai workloads great this script I'm going to remove this little default section here so what you want to be calling here isnet nugat locals all D- clear so it just kind of clears our environment and then we want to do AET workload install Android Maui so we're also going to be installing the Android workloads since we can use the same VM to BU both Windows and Android so we save on some build minutes since we only then have to install it once but you can also spin it up in a different stage if which can be useful if you have the paid for um parallel pipelines to get through the bolts quicker so then we have to specify the source so this is this is something I'll provide in the description below as well so here you're specifying which net version and that's just like the nga.org API that is also referencing over there so that will install the Maui workloads that we need on this virtual machine so each time the script runs it's a brand new VM instance and you have to install these workloads again so that's why we have to include this step all right and then add another bash script to just display the current working directories file structure since I think that's that's quite use useful sometimes to just see you know how how was it cloned into this repo you know what is our current working direct look like so we can take it from there so I'm just going to add an LS which then will just display the current working directory and I'll just add a little display name here as well called show current working directory so at this point I think we're at a good stage to do our first run let let's just change the location where we're saving this script so I want to put this in a folder called Azure scripts just to kind of keep my root directory clean of my repository and going to call the script production bolt. yaml so let's click save and run and it's fine so it just adds your commit message actually going to commit this script that we wrote now onto our repository so just click save and run and there we go this our first job executing now you'll remember that I said you get stages and then inside them jobs and inside them steps but we never even mentioned the job so the scripts are smart enough then to just kind of create a job for you and you'll see it didn't actually run because it's still needs access to our variable group so we can click here on view and then you can just click on permit so every time you add a secure file or a new variable group or so you'll just have to give it access first and then it starts executing so it's creating our Windows Virtual Machine and starting the job first off checking out the repository that we created and you on the the left hand panel you you can see the display names that we set for each step so it's now busy with the set. net version which we put as 8.x so it pulled that correctly from our libraries variables now it's executing the installing the Maru workload this this will take about 2 and a half minutes or so so that does add a little bit of extra time to your builds there are ways to kind of cach things between VM instances so that's something that you could look at if those two minutes are extremely crucial to you but yeah that is a bit more involved and not in the scope of this video great so the script finished the install Maui workloads took about 3 minutes and 40 seconds and you might be thinking oh no I'm losing my free minutes but you know 1,800 is a lot I know of companies that gone a really long time even before they needed to upgrade so don't be too worried about that and then also our show current working directory also executed which you can see over here it's but essentially the the root of our repository so if we go to the root it to compare it on Windows Explorer and you'll see the same files except it doesn't show our G ignore but it shows our readme and the M pipelines and remember we now added this aure scripts folder as well so this kind of gives us idea from where our current build directory is pointed at but if you cloned multiple repositories in this script it would put it One Directory up so just something to keep in mind so your parts might change slightly if you're restoring multiple different repositories in in the same script great so let's just then pull this latest code locally as well just to see the actual files that it created for us so it pushed it onto the main branch so we can check that out and we can go to the folder and we can see our new Azure script folder that it created for us and our yaml script now the online editor is great but I still prefer using vs code to do these edits so I'm going to open this in VSS code actually I want to open the whole folder in VSS code so that I have it as a working directory there here we go so by default it doesn't give you any lenting which would obviously be an issue since it's so indentation sensitive so what you want to do is go to extensions and search for Azure pipelines and install this first extension that you'll see over here it is developed by Microsoft so you know it's well maintained and it gives you some linting options and it can link to your organization as well and yeah do all sorts of fancy things I think I'm just scratching the surface of this extension but it's it's really useful so after you've installed that it you will see it still doesn't add your linting options for you so what we want to do is go down here where in the bottom right corner where it says yaml and then just click on Azure Pipelines it will then say select Azure devops organization associated with this repository select your organization it's going to load a little bit you're going to choose your organization might ask you a second time for some reason and then once that is set you'll start getting the linting so it also gives you some info if you hover over some things over here which is quite handy so get getting some info on on these specific tasks and also the autocomplete option so you can press control space and then it gives you the other properties that you can set on each of these steps so yeah pretty powerful stuff and then obviously if you do have an indentation error it will give you um your error warning then it will highlight your file in red as well so yeah pretty powerful stuff I wish I knew of this tool earlier on in my career but yeah okay great so we can now continue writing our script to build our Windows app so the next step would be to actually perform the build so it's going to be another bash script I'm just going to copy this previous one and then edit it so I'm going to change the display name to build Windows Maui app and we're just going to do a net publish command so I'd almost suggest first doing trying this out locally in visual studio so if we go to [Music] our Visual Studio instance and we write net publish and for our framework we want net 8.0 D windows so if you run it just like this you'll get an error because uh relating something to the Target version is lower because it seems by default if you say net 8- Windows it targets Windows 7 so you kind of need to specify the exact version that you want to Target so I'm just going to copy it directly from my CS Pro and then we have a dash C to say which configuration we want to build is it debug or release build so it's the equivalent of selecting it in this drop- down menu so we're just going to do a release build here since this is going to be our production build and then we can also specify an output folder so you can say D- output and let's just call it publish so it's going to create a a folder straight over here so let's just press enter and see what happens so restores our projects and there we go so allegedly it created our publish folder inside our project so we can do Explorer dot to oh sorry missed out the X Explorer dot to open our Windows Explorer in instance over there so it created our publish folder over here and here you can see the the published content so that's essentially what we want to be doing on the pipelines is exactly that command so you can select all of that that we executed successfully locally and we can take that over to our to our script and we can just paste it in here but we want to make a couple of changes firstly you might want to Target your CS project directly as you might have multiple different projects in your solution and not all of them are net8 windows you know a lot of these could just be normal net 8 ones or maybe even net standard libraries so you you might want to be a bit more specific about your exact project that you would want to build so if we look at our repository so we on our displaying our current working directory we saw it was in this directory so we can go and copy this folder slash go in there once again it's a folder with the same name go one layer deeper and in here is our CS Pro so we want to specifically be targeting this CS Pro we have our framework set we have our configuration set and our output we might want to change as well since we want to be publishing these this as an artifact that we can consume in our release pipeline so Azure devops has an AR fact staging directory that we can use and I'm just adding a subfolder for Windows over here since we're also be building for Android in the same VM instance so that we don't publish the windows artifacts as well with the the Android one the step that we will be using to actually publish our Windows artifact is publish build artifacts which is a common one if you've ever worked with Azure scripts so we can just quickly Google that publish build artifacts at one and you can see kind of the standard things that you get to your disposal so we can copy that and come back to our script we can paste it in here going to remove all these excessive comments so it just kind of gives you all the the various options that you can have but it looks quite daunting if there's so much comments all over the place right so by default this is exactly where it's pointing towards P to publish this artifact staging directory but we created a little subfolder in there so we actually want to be publishing from that folder and then it asks you what do you want this artifact to be named so I'm just going to call it Windows since it's our Windows build and you don't even need this since it's already container by default so nice and short we might also just want to add a display name over here called publish Windows app to artifacts so we can save this and if you recall correctly we set the trigger to our production Branch so I'm going to push this to Main and then we expect no bolds to be kicked off because it's not on our production Branch so I'm just going to say add Windows Maui bolt step and windows publish artifacts I'm going to commit and push that if we go to devops now even though it's been pushed we won't see any wa sorry we won't be seeing any builds being kicked off because it's not on our production Branch great so if we then merge the main branch into our production branch and we push this change to the server then we expect a bol to be kicked off okay so let's just go to pipelines and there you can see the new bold is pending it's currently queued just waiting to start the virtual machine and there we go our build has automatically been kicked off great so our Windows build is step is being executed correctly saw the Cs proach it's targeting our Windows 10 framework it set our configuration to release and here you can see the path that it actually is going to be outputting our Windows bold which is that artifact staging directory with our Windows sub folder it's fine that these slashes are in different directions it will still resolve that correctly and our build succeeded successfully so it finished the whole Windows build in about minute and a half and then it published the artifacts to the file container and yeah those post job so don't have to worry about those and if we just go back here and you look here under the related section you'll see one published so if you go in there then you'll see our artifact that was published for Windows and it contains all our required files over here and well done you've successfully built a Windows Maui app through Azure develops pipelines and published its artifact so next we'll be looking at building our Android app and also publishing it into its own container

Channel: App Alchemy

Views: 182

Keywords: CICD, MAUI, .NET MAUI, DevOps, Azure DevOps, Windows MAUI build, Production build, Build pipeline, Release pipeline, Build artifacts, Release Windows App, Windows store release, Cross platform releases, Publish build, dotnet publish, Android release, iOS release

Id: 42lUTVdHJgs

Length: 32min 2sec (1922 seconds)

Published: Sun Jun 30 2024