.NET Aspire for Mobile Apps?!
What would a world look like where you could use .NET Aspire to inspect everything about your .NET MAUI app during development? We're about to find out in this video! And... I need your help. Let me start by telling you how you can help me with this video. I need your feedback. It's as simple as that. I've been working hard to make
.NET MAUI work with .NET Aspire or .NET Aspire work with .NET MAUI however you want to go. And the thing that you're about to see is definitely pass the proof of concept stage, but it's also not a final product yet. So especially setting it up has a couple of manual steps, a little bit of a rough process, especially for your existing project, but there's also a repo that you can just pull down and that should mostly work. So the thing I want your feedback on is, do you want to use this? Is this useful to you? What do you like? What do you not like? Right. So the actual usage of Net Maui with Net Aspire together and not so much the process on how to get there. I'm working hard to make that easier. I'm talking to the right teams. I'm opening PRs to reduce the manual steps, hopefully to zero, so that you can just say, hey, enlist my .NET MAUI
app in this Aspire orchestration. You click the run button and boom, it works. I'm going to show you a little bit on how to pull down the repository that I have prepared for you so you can play with that. And I have added some steps, but I'm not going to go over that in too much detail in the readme of the repository on how you can add that to your existing project, which is probably the most useful to you. Right. And also kind of like this is very much
tailored for the development experience. I don't really see, right now, at least I don't really see a scenario where we are going to use .NET Aspire in your production systems for your apps. I think that's not really the target here, the goal here. So this should really help you with your development of your .NET MAUI apps locally because
this will also finally solve the problem where you have like your Android emulator and that talks to localhost, but localhost can't be reached, so having to mess around with all the addresses there and whatever, we're going to fix that. So, let's just hop over to my screen share right here and I have the repository open. I'll post the link down below in the description, so go check it out. There or type it over from the screen right here. And I've got two variations. I'm going to focus on one for most of the time and then I'm going to blow your mind with the last one. Hopefully to show
you how it can be even easier. Keep in mind all the feedback is welcome. Do it in an issue here. Be super very detailed with like, I like this, I like that, I don't like that. And also what did
you do? Did you apply this to your existing project? How did you make it work? Okay, with all of that? We have this repository here. I'm not going to go over all of it. I'm just going to show you that we will scroll down here. Very important. You need Visual Studio 17.13+ or later on Windows for the time being. I'm sorry, that's the way it is. There is some stuff built into the tooling. You will have to use this for the time being. But it does work with
the iOS Remote Simulator. So if you're developing with that, please try that out and let me know how that goes. It should work with that. Now, as you can see, there's a lot going on here, right? Like I said, there is a good number of manual steps so you could go through here to add it to your own project. But you can also pull down this project which has the NuGets. It has a special build of .NET MAUI provided with it and then all the project right here, right? So if you want to try this, you need to pull down the NuGets from a .NET MAUI build that has some .NET Aspire specifically builds. Okay, so got it right here in Visual Studio.
I've loaded it all up here in the Solution Explorer and here you can see all the different projects. Right? So I have the solution item with the readme. You can go over it in Visual Studio as well. They have a little nifty preview right here, right now. So that's cool too, right? So you have all the markdown, you can do the preview so that it's a little bit easier on your eyes. So we got all of that. That's cool. But for the rest we have our MauiApp service defaults. I'll get to that in a little
bit. We have the MauiAspire AppHost. So that's kind of like the bootstrapper of all things Aspire, right? That tries it all together and that runs the whole thing. Then we have the MauiAspire Service Defaults which is the service defaults for Aspire Again, I'll get back to that in a little bit.
Then a sample MAUI app just to our file > new > MAUI project. And then a sample Web API which is just a ASP.NET Core, nothing fancy, serves up some weather forecast. You probably know it if you've been looking into. Net asp NET projects, right? This does the weather forecast through a couple of controllers. Nothing fancy, nothing changed here. So that is cool. Now let
me pin this right here. So let's start with the Aspire app host. What you want to do is add that. If you are doing this on your existing project, go to your solution and you can say, hey, add new project and you will have like a bunch of Aspire project, right? So you can search for Aspire here and you can add the Aspire app host to your solution. If you have not done that already. It takes a little bit to load here. There we go. So you can add that app host to here, right? You also have the Aspire service defaults. You'll need to add that. And then you'll get this, which is actually a pretty simple project which has a Program.cs where you're going to build the references to
the projects that you want to run whenever you start the. Whole .NET Aspire orchestration. So I've added my sample Web API in here. I'm going to assume that you know a little bit about Aspire already.
I'm not going to go into detail with explaining everything here. If that's something that you're interested in, let me know in the comments too. I'll make you more .NET Aspire content if that's what you want. And you can say builder, add project. I've added the reference from this sample Web API to my AppHost. And you can reference it now and you can say, hey, I want to now reference it with this kind of like identifier, right? Just a web API thing.
We'll get to that later again. And then I can say builder.AddProject<Projects.SampleMauiApp> I also added the MauiApp reference to the app host. And little pro tip right here, you know that you can add references to another project by just dragging them, right? I can just drag and drop it right here. And it will add the reference to this project and I've done that. And then it will do some code generation to create this
project sample MAUI app. And again, I need a little identifier here. And then I can say with reference. So what this will do is in code in the .NET Aspire orchestration will have this project will now have the reference to the Web API. So that it knows later on how to connect the two. And then it's going to builder, build, run, it's going to run that Aspire orchestration, bring the whole thing up and show you all the things, the dashboard. All the
things. All the things. Now, what I want to point out in this project again, we'll get to that, back to that in a little bit is the appsettings.json. Actually not the app settings, I'm sorry, under the Properties, the launchSettings.json. And we'll
need this port right here. So the DOTNET_DASHBOARD_OTLP_ENDPOINT_URL and you want to know about this port 21014 and then we'll get back to this dev tunnel ID right here. So just keep that in mind. We'll revisit that in a little bit. So we've got that. And then for what
comes together with .NET Aspire is the service defaults is a piece of code that you can get through a template as well as we've just seen. And that adds kind of like the service defaults values that you want to use in your .NET Aspire orchestration. ConfigureOpenTelemetry(), If you don't want to use it, comment it out. It's not here. Health checks
for your web API services, service discovery. That's kind of like a cool thing too that we really want. Configure HTTP client defaults. So all the defaults that you want to have in services using .NET Aspire that will light up the telemetry, the metrics, all the things that you are seeing for your services. Cool. Now our .NET MAUI app, just a plain .NET MAUI app, just added it to the solution
right here. And what I did do is have a couple of things in here to make things light up. First thing, not a great thing. I'm working hard to get that resolved.
There is a bug when using .NET Aspire with multi-targeted projects. So you cannot do kind of like the cool .NET MAUI single project thing with target frameworks and then do all the things.
So you will need to change and pick whatever platform you're going to do. Do a little bit of manual work, make sure that you have TargetFramework no S at the end and then choose the one that you want to run on. All the ones should work. Also with the iOS remote simulator, Windows, Android, they should all work, but you have to pick just one in the TargetFramework tag. Okay, so that's kind of like sucks. That's the priority
one thing that I want to fix right here because this is something that you'll immediately hit and can't really work around. So that's something that I want to fix for the time being. Please do that. I'm going to use Android right now and then we have a couple of things to actually get the metrics doing that will at least start your .NET MAUI app with the Android emulator as part of your Aspire orchestration. That works today. I think you can just add that shouldn't be any problem. But if you want to see more useful
info, and we do, we need to add a couple of properties to our project. First thing is the HTTPActivityPropagationSupport, that will light up your HTTP tracing. So whenever you do HTTP requests from the .NET MAUI app to the web API,
you can inspect like, hey, how long did this request take? How long did it take to get back? We need to do that. I added the conditions in here. We need to do that for Android and for iOS and probably only for Debug. Right. We don't want this to kind of like bleed into release builds. Don't know what it actually does specifically. So you just want to keep it for debug. Again, I see the .NET Aspire stuff only working for
development scenarios for .NET MAUI apps for this, so we got that going on. And then for the metrics for Android. So if you want to see how much memory is being used, how much HTTP calls are being done, et cetera, et cetera, you will have to set the MetricsSupport to true. And I think this PR is already merged
for the next .NET for Android version. So that should away. But for now you still need to do it. And we only want to do that for Android and again only for Debug. Okay,
cool. So we have that and then the service defaults. Right. So I'll get back to that in a little bit. Make sure that you have the MAUI.Controls with that specific version that you pulled down from the PR or the ones included in this repository so that we have all the things to light up Net Aspire for this. Cool, cool, cool. So we have that the service defaults.
I'll get back to that in a little bit. Then the main page. Again, this is just your plain file new .NET MAUI app with a counter button, but it's not a counter button anymore. I just
made a little call here to that Weather API client. So I've created a Weather API client that will call that web API that we have here the sample web API so that we get like the first weather summary. Right? Like something stupid isn't really about what data it's getting. You can get anything if you want, but just to get something
and see a little bit of communication going over the line. Cool. So let's look into the weather API client. That's something new that I added. Nothing, nothing. Rocket science, right? It should be all self explanatory mostly. So we are going to get the weatherasync from the remote service and we're going to do that get forecast with an HTTP client, get JSON from this endpoint weather forecast. Cool. Then we just get a couple and this is kind of like hey what the model should looks like or whatever, right. So that's nothing fancy. We just get it
registered that in my Maui program it's injected to the main page right here and then I can call on that weatherasync and show me whatever result comes from that. Now the real magic, the real power is coming in from our Maui program right here where we have this httpclient because this is where the service discovery comes in. Service discovery is not something new, but it's part of Net Aspire and Net Aspire is magic. So you can say add HTTP client for this weather HTTP client. So it knows hey, whenever I need to use
it for this one I'm going to inject the HTTP client with the configuration here and you can set client base address is new HTTPs HTTP web API. Now that looks a little bit strange if you've never seen it before. But this means like I want to prefer HTTPs over HTTP. We should all do that and then it's going to use web API and this comes back to what we set in our app host right here. So if we go to
the program CS for this web API. Got it. So this is going to automatically replace the address for this web API to whatever it to get to that web API whether you're on localhost or whether you're on something else, it's going to discover this service discovery to actually resolve that endpoint and fill that in the right way for you so that you can actually reach the right point. Now for mobile this is
a little bit harder so I'm going to add a little bit of more magic in that too. But we'll get to that. So above that you will see the add service defaults. Now I can't use the service defaults that are provided by Net Aspire itself because they have references to asp.net which will not compile for Net Maui because they're not multi targeted. They don't have any code OR targets for iOS or Android or that kind of stuff. So I created a service defaults project specifically for Maui that is almost identical, identical to the. Net Aspire one, but actually it removes some stuff so it
has less references to asp.net stuff. So this looks very familiar. This is to light up the open telemetry. So the telemetry going in again, configure OpenTelebry. All the stuff here. I have added this one. It's actually not called, but you can use it if you want. Disable Dev Search security check. So if you're going to connect to a service that runs
on localhost, it will use the ASP. Net self signed certificate which is not marked as secure. You can kind of like disable the check for that so that you can communicate with it. There is a whole docs page on it. Now you can just do this call and it will work perfect. If you need it, there it is. If you don't need it, that's fine
too because we're going to see how to make this even better. A little bit of initialize right here, et cetera, et cetera. You can go through the code if that's what you want. The important thing is that you can just
say builder add service defaults and it's done. We have all the service defaults for you set up now. If you're going to do this on your existing project, you want to take this project and add it to there. I also, as part of the changes,
added a new project template for this. So again, I think I have Aspire Maui. Will that show up? NET Maui for. Net Aspire service default. So I have a template already for this as well. Click Next, click Install and you will have that project and you can just say, hey, builder add service defaults and it will automatically light up. You will need to add the reference too. But there we go.
So we have that. Now the one thing that will make it easier because again, this is the problem, right? You're going to run this on Windows and it's all fine, Local Host works because that's all on the same machine. But you're now going to do it on the Android emulator or the iOS simulator or whatever else. And localhost is suddenly the emulator and not your Windows machine anymore. So now you have to have different configurations for the base address right here.
Like, oh, is it localhost? Is it this IP address? Is it whatever, whatever. That is something that we can perfectly solve with. Net Aspire by using dev tunnels. So if you don't know What Dev Tunnels is, it's a service that has been around for a little bit. Maybe you know,
ngrok or ngrok. I still don't know how to say it. Where you can say, hey, I have this tunnel. Connect that to my localhost and now I have this public endpoint that I can can point to and it will loop back to my local development machine and you can do all the things Dev Tunnels is built into Visual Studio. I'm going to show you how to do it manually for now and then in a little bit. I'm already over the time that I've planned for this,
but doesn't matter. I want to get you to get this right. I will show you a little bit on how I also took a step to automate setting up the Dev Tunnel. So if you're really crazy, really wild, if you're really adventurous, you can look at that too and let me know the feedback for that one. Okay, so what we want to do next is make sure Dev Tunnels is installed. I'm not going to go all over that in this video. Find the instructions, I'll link that in the video description
as well. Install the dev tunnel CLI and you can say Dev Tunnel host. So that's the command to spin up a dev tunnel, allow Anonymous because else you'll have to add some kind of authentication. You can perfectly do that with Net Aspire as well. Add it to this HTTP client configuration right here. Whatever header or whatever you want to add, you can do it right here. But we're going do allow Anonymous and then protocol
HPS and then the ports. Here you can see the one that we remembered from earlier 21014 and this one is the one for our web API 7291. Let's make sure that they actually get it correct so that I don't have a failing demo. Also here in our sample web
API, let's go to the launchsettings JSON and you can see right here 7291 for HBS. Right. If you want to also add HBS, we have the other one, but we're not animals, we should use HTTPs. Okay, cool. So I'm going to start that. Press Enter here, press return. Do it and it's going to spin up this dev tunnel and you will get a little id, a little URL that you can now use to reach your local host.
So actually let me spin up this Net Aspire thing at the same time. No, I should not. I need a little thing here for the configuration. So let's wait for this to spin up. Here we go. And then for each port you will get a specific URL, Right? So you can see this little identifier right here, 7291 and 21014 because that's the ports that we have. So to be honest, I'm not sure if
we actually need to do this, but it doesn't hurt. Go to the URL, click, continue. Because for the first, even if you do allow Anonymous for the first request, you should actually go here and accept this little thing here. I've discovered that when I spin up the dev tunnel automatically, it doesn't need it. There are some conditions for when you do or do not need to do this, but just to be sure, do it or don't do it, spin up the Aspire app host and let me know what that does. I need all your feedback. So now we can do this. Perfect. Let's bring up this. And I need this
little ID that I pointed to. So this one, let's copy that. And oh, you can see actually the request coming in, right? But now it's refusing it because nothing is listening here. But you can see that the requests are coming in. So this is running. That's perfect. So I need this little thing after the slash and before the dash. That's a good quote.
After the slash, before the dash. So we are going to copy this and we're going to go back to the launch settings for our Aspire app host. And you'll already notice that I have this dev tunnel ID in here. So let's just put this
in here, make sure the quotes match. I'm messing this up right here. All right, so now I got the ID in here and this tells Aspire app host to use this dev tunnel id because what Aspire will do by default is point everything to localhost. Right? I think you can do some configuration in the program CS to say with like, with endpoints, with external endpoint. I don't even know, I'm not an Aspire expert yet. But you can do all these things. But by doing this, this is what I added is it will replace all the localhost URLs with this devtool URL. So it will regex
regular expression. Do all the things, look for all the localhost with all the port numbers and whatever, it's going to replace it with this dev tunnel URL so that whether you. Independent of if you're running on an Android emulator or the iOS remote simulator or Windows or Whatever, it's going to always find this endpoint because it's using this dev tunnel. So that is available externally. You can just go through that and you can reach your endpoints on your localhost to that. So let's wait for our app to come up here a little bit. So what's happening right here right now is our Android
Emulator is coming up. We've all seen that, right? But here in the Aspire process what we're going to do is hey, this builder thing, the web API thing, it's added that, it's added this Maui program thing right here. And actually what I didn't show you is whenever you add the reference from your Maui app to the app host here in the Run menu it says htt, right? Because Net Aspire is targeted towards like cloud solutions, web applications, containers, that kind of stuff. So it will show you the HTTPs profile thing right here, which is the profile of our web thing that we want to run. But if you do the little arrow right here and you do the drop down menu, you will see the same familiar menu for your Net Maui apps and you can say, hey, for my Net Maui project there is an entry in there. You can now select your Android Emulator or your Windows machine or your iOS simulator, right? Dep, depending on the target framework that you have. And whenever we fix that bug to do the multitargeting,
you will just see them all in there. You click the right one and that's the one that you will start. So I have deployment errors right here. Let me quickly see what is going on. I'm not really sure actually. Perfect solution, perfect opportunity to show you. So here is this HP hps and you can select here like hey, Windows Machine, Android Machine, you can do all of that, right? So that's how you can pick your startup project, your startup target for this thing. I think here it's just a little bit,
bit too slow with starting the emulator. I'm not sure what's going on. I've never really seen that happen before. Wait, all right, It's a little bit slow because I may be also recording this whole thing right here. So let's try again. Deploying the application to the Pixel and whenever it's done that, it's going to also spin up the web API, right? And it's also going to bring up the Net Aspire Dashboard. So let's wait for that for a little bit to actually come up this time. Time. All right, there we go. We got the first window coming up.
What's This, I suspect this is like the web API and the dashboard that's going on. Yeah. Here you can see Aspire hosting distributed application. Cool, cool, cool. All the endpoints, application host at the same time. We can see our Net Maui app being deployed here in the background. Then I expect a browser window. Oh, that's already popping up down here. So we get the Aspire dashboard. Right. And we can see. Let me zoom that in for you a little bit. We can see
Project Maui app. So our Maui app is in there just like any other project that you would add to Net Aspire. We can stop it. I think that actually stops the emulator too. Doesn't have any endpoints, so that's great. So let's see. Our application
is up 2, so that's great. That means we should be able to inspect the metrics right here. You can see Maui app is now listed in here. I can inspect all these things. If you don't add that Property to the MSBuild thing for Android, this is not going to show up. No problem if you don't need it. But then if you wanted to
have this too, you can get all that metrics in here. And then let's set it to traces. There's nothing right here, but if I click this button, then it's now going to go out to my dev tunnel, connect to my local host, send that HTTP request to the weather forecast service, and it's actually going to get it right here and you can see the traces coming up.
Right. So I have this request originating from my Maui app. It's taking a little bit of time because slowness, first request. I don't know what's going on. It takes a little bit of time. And then my weather forecast is coming back and I can drill into this. Go into this again, just like you're used to from Net Aspire.
Inspect all the things here, get the full URL, see the source, see all kinds of things that are going on here. And you can drill into that, go into the structured logs. You can do the same thing, drill into that as well. Inspect the resources right here. I can do it again and again and again. See, now it's a little bit faster. And I can get again, all the traces are coming up here and you can see that all light up. So this is the Net Maui with Net Aspire integration right here.
Like I said, like I predicted, a couple of manual steps. But let's see just really quickly what we can do to automate this even more. So let me quickly close this down. And what I did also is took it a step further because spinning up that dev tunnel and getting the ID in there, it works. That's probably going to be like the first version that's something that you want to play with, but how cool would it be if we can do that automatically? So if I switch, if you're going to go to that repository, there is a. A branch
as well that's called dev tunnel integration. You want to have that one bring my changes? No, I don't want to have any changes actually. So let's just do that. Are you sure you want to? Yes, yes. So switch to that branch and it's going to be a little bit confused at first, but then you will find another project right here. So this would
be something that you would not probably have as code in here. This would be a nuget package. I've called it communitytoolkit.aspire.dev tunnels right now, maybe it will live in the. Net Aspire Community Toolkit. Maybe it will be integrated into Net Aspire directly, who knows. But I wrote a little extension right here that does add dev tunnels and it will spin up a dev tunnel through the dev tunnels SDK and it will get the. Actually, this is something that I would be very
interested in. If you've never done anything with dev tunnels before in Visual Studio or whatever, let me know if this kind of like just works for you, I suspect, but I haven't really verified it. If you have a Microsoft account that is logged into Visual Studio and that is linked to an Azure account account, this will just work. You can kind of like, I don't know, try it out, let me know any feedback is welcome. And then it sets up like this dev tunnel for you and it will automatically scan through the launchsettings JSON files that we've just seen to get the port numbers out there and set up all the endpoints for you.
So I've done that. And the only thing is that you want to do extra kind of like to light this up is go into your for Aspire app host and then in the program cs you will now see Await builder add dev tunnels that will add dev tunnels. Now you're very welcome to also try this in other .NET Aspire enabled projects that don't have anything to do with .NET MAUI. I'm not sure if that
will work, but again, I'm very interested if it will. This is right now very much built for this scenario and not really generic or for other things in mind. So keep that in mind. While trying this out out. So we've got that and now I don't need to spin up the dev tunnel or do whatever. I can just say, hey, start running this thing. It will go through the same process.
It will do that app host thing. That's the one, that's our starter project, right? Nothing else. It's going to bring up my Android emulator again, it's going to bring up my web API again.
But now as part of that process, it's going to set up a dev tunnel through the SDK. You need to be authenticated, right? So that's why I said like, hey, that little piece of code, sorry, that might not have been super clear, but I think that gets, that's the authentication from your Visual Studio from the logged in Microsoft account and get it through that way and you can see like, hey, now it detected everything tunnel created with ports. This one's. There's a couple of more there because I'm scanning all the things now. I'm just adding all the ports and adding endpoints for all of those. And now what? I'm not always the proudest person on myself, but I'm a little bit proud of this. I can start crying right here, right now. I've added
this to the dashboard too, with all the endpoints here. So you can see all the dev tunnels endpoints in here that you can use as well. So that is super cool. It's running metrics again. We should
see the MAUI app is coming up again right here and we can see the traces. And now I didn't need to do anything, I didn't need to manually spin up that dev tunnel. It will automatically get that through the service discovery. It will know which endpoint to hit. You can see the trace
coming in here with a little bit of delay right here and you can see all the dev tunnels endpoints right here in the dashboard as well. Now again, let me know if this is useful for you because I just built this. I think it's super useful for whenever you're doing .NET Maui development and you have this amazing solution that is called .NET Aspire.
So why not connect the two and get all that information out there, the metrics, the HTTP tracing I think is super valuable because you can see whatever might be going wrong with connecting to your endpoints to your backends. So that would be super useful. And just the service discovery, right? Like no more flipping localhost. Oh no, the other address, all those things just. That is, I think, worth it alone. Thank you so much for going through me. This is going to be like a
half hour video just looking at the little timer right here. So thank you so much for sticking with me. Please provide me that feedback right here under this video on the repository in the issues.
That's fine too. Is this something that you want to use? Is this what is working well right now? What could be better? What are your future plans and dreams for this? I would be very curious to know. Thank you so much and please don't forget to like and subscribe. And maybe check out this other video on my channel as well. I will see you for
that one.
2025-03-24 18:58
