Create & Publish MSIX Installer for Flutter Windows App to Microsoft Store

[Music] let's go yeah i'm like an addict do i gotta have it i ain't even playing got a really bad habit if it moves gotta grab it fuse like a magnet lose won't have it till i'm doomed in a casket i ain't playing hello everyone welcome back to xcoding with alvian in this video we are going to learn on how to create an msix installer for a flutter native news windows app that we have created in the previous video i'll provide the link in description if you haven't watched the video so what is an msix msix is a windows app package format that provides a modern packaging experience to windows apps so basically using this msix it can be installed locally here by clicking a file msix file and then we can also upload or publish this through the microsoft store let me show you the local installation using the app installer so here we have this axia news msix let me click this it will show this window to install the axiones it shows the publisher and the version the capabilities and we can simply install this okay it installs the app to our windows and it opens the app and you can see the icon of our app in the taskbar here nice slide and if you see here in the application list we can also search this excel news so it will be shown in here you can see the advanced options is the publisher the version the size and the total data usage and that's basically it uh for the msix introduction now let's learn on how we can create a msix file locally and also msi's file that will be that can be uploaded to microsoft store okay let me close this if you want to learn more about this msi x in detail you can also take a look into this microsoft documentation site for the msix here so here it expands what is msix the key features the highlights as well as the introduction video and it provides the architecture of the msix in this visualization and i'll provide the link to this website in the description below so to begin let's open this pup.dev and find the msix package here i already opened this so basically using this msis splatter package we should be able to create a msix package for our app by just running this command we there are also some configuration that we can pass here to for customization so we need to put it in the pubspec.yaml file such as display name publisher display name the version the path of the logo the capabilities of the app such as the ability to access internet location camera and it provides all of this available yaml name that we can customize the build configuration and the sun configuration we're going to configure this letter first let's add this to the axianess project let's copy this and open the exchanges project so if you don't have this project you can also use your own flutter project maybe or you can also clone this in the github repository that i provide in the description so here i have my terminal i just need to pass this father pop app dash dash dev msix so this will install the msix and add it to the top spec dot yaml here msix version 3.5.1 so now let's go back to the commentation and here you can see that you will almost certainly want to customize various settings in the msx installer such as the title icon and which windows schedules your application needs so we need to add this msis underscore config note in the box spec of the ammo and then configure it let's do this okay so at the bottom of our box spec in here let's create this msis underscore config as the name and remember indentation is important for editing a yaml file so let me use a tab there and then the first one is display name i'm going to give the name of action is you can give it any name that you want for your app the second one is publisher display name so here's the publisher name in my case i'm going to give it my name i'll be on low sorry and next one is publisher this is the publisher code that we can when that are that is needed when we want to upload to microsoft store so basically we need to copy something from there and then pass it here so let me just pass a simple number here a random letter xyz and the identity name as well we need to basically copy and paste this from the microsoft store dashboard so for now i'm just going to give it a press holder abc and the next one is the languages that we are supported i'm only going to support english and class and capabilities which is internet ion okay and next was next one is the logo logo underscore path so here i have my logo inside these assets it's a 60 by 60 icon so i put in the assets so basically in the logo path i just need to pass the location to that folder so for my father project i put in the c drive and here alvia and documents and this is my application folder excel underscore news and here is it inside this assets assets and then logo.png okay and this is the minimal configuration that we can pass so let's try to grab the msx installer using this minimal configuration so basically we need to run this command platter pop run msi script let's copy this and let's go back comment video in the terminal so actually if you see here it asks us to install the certificate so if you go to documentation so here inside the signing options it says published msix installers should be signed with a certificate so basically that our msis package need a need a certificate to help ensure that app instant numbers come from trustworthy sources so for the development purposes this package is configured by default to automatically sign the app with the self-signed test certificate okay but if we publish our app to the microsoft store the installation package will be signed automatically by the store so we don't need to create our own self-signed test certificate but if we don't want to use this test certificate and we want to generate our own signing certificate for security reason we can also create our own certificate here and then put it into the certificate path and provide the certificate password in this video i will show you also on how can we create our own self-signed certificate so in here let me just cancel this because we want to create our own sales and certificate first so actually for this self-signed certificate creation i found this very good article by sahaj rana on how to generate a dot pfx certificate for flutter windows msi sleep so here it provides all of this step-by-step installation so first we need to basically download the open ssl and basically for me i'm using this shining light production slproweb.com and and i installed this queen 64 open ssl v 3.0.2 lite you can either install x or the msa format and after that you basically need to add the environment variable so it can be executed in the powershell so basically find this environment variable click this environment variables and you need to go to this path and make sure you add the path to the folder where you install the open ssl so for me i installed inside the program files open ssl win64 slash bin so after you added this in here you should be able to just type open ssl in the powershell so i also provide the link to this stack admin article on how to install the open ssl now let's go back in here so let's assume we have already created installed the open ssl what we need to do is just open uh powershell terminal okay so basically in here let's just follow this let's say i want to put it in my documents folder so basically just use open ssl gen rsa and then this dash out and give it the name of your key let me give it a name of alvin dot key and then 2080 okay now we have this key now and max if you see here we have this auvian.key okay ignore the other ones and next we need to generate the csr file with the help of the disparate key and basically we can just use this open ssl error queue dash new key and give the name of the key that we have carried before of in.key in my case and for the output it should be let me also use the same name alfian.csr and we need to provide some information the country name in my case i'm in indonesia i'm going to pass i i i end probably is it india i don't know not sure and for the state i'm just going to give the name of jakarta the capital of indonesia locality name jakarta as well organization name let me give you the name of xcoding with alvion ltd we don't need the unit name the common name let's me let me give alvin lozari mr salvian lozari gmail.com and then the password this is important so let me just give it a password of test test okay provide your own secure password for that so after we credit the csr we need to continue with creating the crt this is a multi-step process so open ssl x50909 sorry dash in ma and give it a name of alvin.csr and out of youn dot crt those are the previous files that we have created and that's right the sign key and this is the name of the key that we have created often.key and [Music] this let's pass 365 days okay now we should be able to have the crt file okay and finally we need to generate the pfx file this is the final file so use open ssl p k cs 12 that's export that's out and let me give you the name of alvin dot p p f x dash in key give the name of your key of indeed key dash en lvn.crt okay enter export password let me just pass test test okay let's see okay now we have this aldian.pfx file so next we need to add this alvian.pfx certificate file reference to the msix configuration the pub spec for the current working directory for me here is this c user's only documents so basically i need to refer to this path adding the certificate.pfx certificate file so let's do it now and let's go to the resource video code here inside the pubspec.yaml so let's add a new yaml here name certificate path certificate underscore path and for me it's going to be c users elvia documents and then alvin dot yes okay provide your own directory there the certificate path and next is sir vk password the password so for me it's it is test here for my password very simple right okay so we have our own self-signed certificate now so let's create the msix again do you want to install the certificate often.pfx so it found our certificate so yes okay so just select yes here okay so the certificate installed successfully and if you can see msi excreted in this location so let's open this build windows and runner and release let's open this in the file explorer okay this release so if you see we have this msrx file you click here so basically it will disable the install install a button because the certificate hasn't been installed in our system she says this app package is not signed with a trusted certificate okay so because we are creating ourselves some self-signed certificate we need to also add this certificate to our trusted profiler let me show you on how to do this so basically let's assume we have trusted that this app is from our maybe our company or maybe developer that we trust here we can simply right click and click properties click digital signatures and click this signature list okay and click details you see the digital digital signature information so this is still showing not installed so just click view certificate can we need to install this because we know that this is our certificate so this could be trust this can be trusted right okay and select local machine and select next and select place all certificates in the following store so select trusted root certification authorities click ok click next and click finish the import was successful okay then click ok click ok again click ok now let's try again now it finally enable this install button and we can install this so if you see this is very this profiles a very very safe way to install app from a third-party profiler right so let's say we download our maybe msx file that content of fires or maybe malware it provides a security that we won't be able to install the app and still we add the certificate into our trusted certificate authority root file and this is basically uh msix installation using a local app installer let me install this okay install successfully so here is the icon if you see the taskbar that we have added before this is a 60 by 60 icon okay and now this is working nice using the local star file with a self segnet self signed certificate for security now let me show you how to create a msx installer for publishing to microsoft store to be able to publish and sell your app in the microsoft store you need to become a microsoft partner so basically you need to sign up and just pay it once it's around maybe 20 to 30 us dollars after you sign up then you should be able to access this microsoft partner center dashboard so here there are several options you just need to click on the apps and games and basically you can click on this new product to create your own product so here i have created this axial news as my product name and basically in here first thing you need to go to this sidebar select product identity from this product management menu and if you see in here there are several things first one is the package identity name you see in here so basically we need to copy this as well to the msix so the first one is the package identity name right let's copy this go back to visual studio code so basically this package identity name will be we need to replace this here this abc with this identity underscore name okay and the next one is the publisher currently you see currently is xyz we need to also [Music] copy this okay package annotative publisher and replace this with the one from the microsoft store make sure these are matched properly this publisher display name is already correct all the loads sorry you see in here so i don't need to change anything and the name of my app is actions okay those are the requirements so basically we only need to run this flutter paper on mss script but there are several options if you see here in the documentation publishing to microsoft store so we can simply pass the under store flag or alternatively add store through to the ammo so for me i think this is better using those flat dash dash store so let's do it here the use of steel coat dash dash store enter so this will create the msix intended to be published for the to be uploaded to the microsoft store it finished creating the msix intended for the publishing to microsoft store inside this folder as well so basically here after it created this we simply need to open the microsoft store and go back to the mecca submission actually let me go back so here i already make a submission one but i haven't complete this here packages you need to provide your information for pricing availability properties edge ratings just on your own application but for the msix so just click on the packages and simply here you just need to drag and drop your msix file so here msix just drag and drop this and basically it will upload it to the microsoft store you see in here let me cancel this okay after all of that you just need to fill all of the relevant informations and just submit your app to be reviewed by the microsoft after it has been reviewed then it should be shown up in the microsoft store for all the users to download and install the app okay so that's basically it for this short video on how to create a msix installer or a flutter windows app i hope this information is useful to you and you can use this as a reference to create a msx installer and maybe publish an app to a microsoft store and if you have maybe you can provide the link to the app that you have created in description below so that's it for this video and let's keep on being a lifelong learner until the next one see and stay safe and healthy goodbye

Channel: Xcoding with Alfian

Views: 6,079

Keywords: flutter, msix installer, windows, flutter windows

Id: 2S9W0YGY4nw

Length: 26min 0sec (1560 seconds)

Published: Sun May 01 2022