Have you ever wanted to build and deploy your very own podcast
application for web desktop and mobile?
Well, today I'm going to show you how with the open source.net podcast
application, where you can spin up an entire backend and front end
for your application in minutes.
So let's check it out.
Hey everyone.
I'm James.
And I'm back today talking about the.net podcast app.
This is a sample application at .NET Conf 2021.
I showed it off previously in some other videos.
It's open source.
Now what's really cool about it is that you can clone the repo, pull it
down locally and start developing.
Or you can actually spin up Azure resources and with a few little lines of
configuration, you can basically create your own podcast application and have
automatically continuous integration and delivery up with GitHub actions.
It's super duper cool.
And it takes us a few minutes.
So today I want to walk you through how to build and deploy
your very own podcast app.
So first things first, you want to head over to get hub.com/microsoft
slash.net desk podcasts.
And you want to browse the repo.
It's completely open source, and you can ask questions.
You can have issues, all those other things on there.
Now what's cool about it is that you can browse all the sources.
But you can also see all the tech that it was built on and you can even browse
alive running version of the app.
This is the asp.net core front-end.
You can click sign in over here and actually browse all the
different podcasts emerge conflict.
That's our podcast.
You can check out all of them.
Listen, this is all live.
And what we're going to do is create our own version of this application, all set
up on our GitHub repo, and then we can start deploying it, which is super cool.
So check this out.
You have all this stuff here.
Listen to gather, listen later, this is all going to work and really cool.
Dark modes.
Check it out.
Boom.
So let's go ahead and.
Now, down over here, like I said, you could pull down the source code and
deploy it yourself locally and use Docker.
We've shown that off, uh, before, and I'll link to some other videos
and notes on how to do that.
Um, but.
Um, there's two guides full deployment and then local development, quick start.
So this is what you want to run it locally.
You want to clone the repo and pull it down.
Let's do this full deployment with GitHub actions.
So this is going to do is create our own fork basically of the dinette podcast app.
So niche from my team who also worked on the application with
plane concepts, a bunch of other amazing individuals wrote this guide.
So this is going to basically deploy.
To Azure, which is super nice, all of our backend stuff.
So if you don't have an Azure subscription, you'll need a free one.
You can set that up.
There's also all sorts of things like student accounts, subscriber benefits,
if you're a visual studio subscriber.
And if you're just learning about that, As a Microsoft learn course.
So this is going to talk about here in the architecture what's going to be deployed.
So basically we run everything on Docker containers and the container
registry inside of this canoe Kubernetes environment with Azure app
service container apps, which is cool.
You have to worry about that because it'll figure it all out for you.
And it also has an app service plan for listen together and the web.
So here's what we're going to do.
We're going to follow the step-by-step guide on how to
do this, which is super cool.
And the first thing we're going to do is actually fork the repo.
So go to fork.
I'm going to put it in my own over here, obviously.
Cause it's.
And it's going to fork it and we're going to be off to the races.
So this just takes a few seconds and it's going to start doing stuff.
Cool.
All right.
So now we need to do is go back to that guide, which is down here,
full detailed guidelines, and we're gonna start doing stuff basically.
So what I'm going to do is I'm going to go ahead and take this tab out and
I'm going to put my Azure tab over here like this, and let's go ahead
and put this down as well over here.
That's look in modifying.
Perfect.
So first thing we need to do is actually create a resource
group before our podcast.
Now, what you can do over here is you can actually just go into cloud shell.
You can also install the Azure CLI, but you can tap on cloud shell here
and that'll pop up cloud shell for you.
Now, when you're going in, this is going to create a, a cloud shell bash for you.
It's going to be logged in.
It's going to give you all this stuff and you want to do a few things.
You're going to create an Azure resource group.
Now we're putting this in west, us too.
You can put it wherever you want.
Um, Um, so that'd be the first thing you want to do.
So I did that right here and I did that ahead of time.
You can see nothing is deployed inside of this resource group.
Now the other thing that you'll want to do besides creating the resource
group is we're going to create our Azure credentials, uh, basically over here.
Now what this command does, it creates a service principle.
And what this is going to enable us to do is allow get hub action.
To create and manage our resources in get hub.
So there's this long command.
Let me actually open up a notepad over here, show you what it looks like.
So it's going to create a service principle.
We're going to give it our podcast name.
This can be whatever you want.
It's going to be a contributor.
You're going to put in the subscription.
Okay.
That subscription ID is the same one that you created for the podcast
group and then the resource group.
So this would be your, in this instance, podcast, RG for resource
group, and that'll pretty much take care of everything for you
automatically, since you're already logged into the Azure portal.
And what that's going to give you is this big Jason blob of stuff back.
Basically.
Now this is super important because it's tied to this
resource group to your identity.
You don't want to share that with people, so make sure that you
don't share that with people and.
So we're going to get that set up.
All right.
Next things.
Next is we're going to add a bunch of GitHub secrets, and this is how this is
made, is all made with GitHub secrets.
So I'm going to go into my settings.
I'm going to go down into secrets.
And all I got to do is say new repository secret.
I give it a name and a given information.
Okay.
So I'm going to go ahead and copy this Azure credentials paste it here.
Now what I'm going to do is I have my information from the Azure portal.
I'm going to paste it in here.
I'm going to gray that out so you don't see it and just hit, add secret.
Cool.
All right, now we're done.
Now.
I'm just getting, we're almost done.
We're getting, we're getting there.
There's a few other GitHub secrets.
That'll basically configure our GitHub actions and there's a bunch of them here,
so we're going to want to set them all up.
So there is quite a lot here, but I'll talk you through them.
So let's do the first one here.
Let's create our Azure resource group.
That's going to tell our, get hub action, you know, And again, that is this
one here, podcasts RG resource group.
So I'll get that set up there.
Hit add secret.
All right.
Now we're going to create another one.
This'll be our podcast DB login.
So we're going to create a login here.
This is going to be our usernames.
I'm just gonna say James, that's a good username.
Hit, add secret.
And we'll do another one here at a new repository secret.
I'll say a secret here.
And I'll just say James 1, 2, 3, 4 exclamation point.
I'm going to delete this before the video comes out.
So you won't be able to log in it, add secret.
Now those are just configuration configuration settings for the
Azure SQL database, but there are more things that we'll need to.
So this ACR is Azure container registry.
This needs to be unique, and this is actually going to create the Azure
container registry and then deploy to it.
So I'm going to copy the reference here and then I'm just
going to put in James 1, 2, 3.
That sounds good.
Hey, add secret.
All right, next up, we have our storage name.
So let's go ahead and add that this is going to be our podcast storage.
I'll go ahead and copy this control.
Put it in their name.
There we go.
And let's go and put the storage in here and I'll do James 1, 2, 3.
That sounds pretty good.
Add secret.
Now we have a podcast database server name again.
If it doesn't say it needs to be unique, it can be generic.
So you can just use the default ones here.
So let's do that.
And let's do podcast DB server because that's for our own there let's now.
Uh, create our Kubernetes environment.
Again, this doesn't need to be unique.
So I'm just going to go ahead and paste in the default here, because this is my own.
The only time they really need to be unique is when it's, it's a URL
that's public out on the internet.
So our ad secret their workspace name.
This is for our log analytics and this will be all creative for us automatically.
So let's go ahead and put the podcast logs.
Um, I was going to copy that ad secret service plan name.
This is going to create a service plan for us automatically, which is quite nice.
Um, again, we're going to say podcast service plan, add.
Let's add a skew on here.
I'm going to go ahead and go in and add the skew here.
And we're going to use an S3 for it.
You can change this later, whatever you want to do.
Add secret.
All right.
A few more.
Now we have our hub name.
So let's do this here, hub name, and this one also needs to be unique.
This is our listened together hub.
And I'll say James 1, 2, 3.
Perfect.
And then our web app name or.
A new repository, secret web app name.
And again, this will be a URL.
That's exposed James 1, 2, 3.
Perfect.
Are totally good to go.
So now we have all of these different secrets here.
I can update them later if I want to all these different things.
Now what's cool about this repo.
Is that, uh, if I pull this over, is that there's all of these GitHub
workflows over here and you'll see that there's a code, a QL for analysis,
a podcast, API, a hub, and a web.
So we look at the API.
For example, there are a few different things.
One that happens on push and one that happens on pull requests.
So for the pull request, this will simply go off double check it's a pull request,
and then simply build our Docker files.
So it's going to build the source code, make sure validates and run it here.
But if we are going to be pushing.
Over here to Maine, whether push, if we merge a pull request or if we
manually kick off, um, one and as long as it's on main, it will go off.
It's going to log in with Azure, deploy our images, um, to ACR log to ACR.
It's going to build and deploy our podcast app, build our API,
do our podcast and ingestion feed.
And then it will.
Also when that's done go off and deploy into our container apps all
automatically for us, and also deploys, um, some images as well from this here.
So if we go back over to our guide over here, let's go and pull that back up.
The other thing that Nick talks about is to make sure you have all
your things here, double check them.
And of course, if for some reason something's not unique, then
it's going to fail deployment.
But we're going to go ahead and enable the get hub workflows here.
So let's go ahead and do that.
Perfect.
Let's go back up here, click on GitHub actions.
Check.
I understand my workflows.
Go ahead and enable them.
Perfect.
Now what we want to do is come over into our guide and make sure we read
it because I messed this up before.
So the first thing we want to do is run the podcast API CICT and we can kick
this off manually, but of course, when we do a, a commit to the main word it's
in a specific folder, it will read it.
So here, for example, um, this will tell you if you want to make
a code change, you can do it, or you can kick it off manually.
Then after that we'll run the hubs, the ICD and the web CIC ICD, but
you have to make sure that the podcast API has kicked off first.
So it creates all your resources.
Now, of course, you could go ahead and do this all manually, too.
It's totally up to you.
If you want to, you know, um, create all the resources manually.
You can do that too.
All right now, all I need to do is simply start my workflow over here.
So I'm going to select the podcast API CICT cause that's the
one we need to kick off first.
Then I can say run workflow, run.
And I could have also modified any of the code inside of that specific,
um, you know, source code as well, which would kick it off manually.
Um, but this, I can just kick it off without having to modify
any code, which is kind of nice.
So we can come in and see that this is going to build and push.
And this is.
Kind of create all the resources and Azure that we need.
Then after that, it will deploy all of our services that are out there.
Now the deploy may fail necessarily a few times.
If you know, your resources are unique names or maybe your password.
Strong enough, I've done this before.
Uh, and in fact, I'm rerecording this, because that password I put up like James
1, 2, 3, it was not strong enough to put a strong password in there with some symbols
and some numbers and some capital letters.
Uh, so, uh, that will, you know, you'll get error messages.
If that doesn't go now, the first time you run, this is
going to create those services.
So it's going to take a little bit of time, so let's go ahead and just play
a little Nintendo switch while we wait.
All right.
Cool.
We are deployed let's that over to our Azure portal?
Yep, sure enough.
There's a bunch of stuff inside of my Azure portal.
So inside of here, we have the database.
Uh, we have an Azure container apps or container registry
container app for our API.
Our database, a bunch of things inside here.
So this is cool.
If I actually tap on the API.
This should give me a podcast URL and sure enough, I get my swagger
back right here and I've just deployed my entire backend API.
So I tap on categories.
I can hit the, try it out, hit execute, and sure enough, I get back
all of my different categories right there, which is really, really cool.
All right.
So now what we need to do is we need to go back to our actions and kick
off the other application backends.
Um, so we need to run the hub and the web.
So it's a run that.
And hit run and we can run these in parallel.
This is fine because all of our, um, different backend Azure
services are all up and running.
So I can go back into this one, hit right.
And now what this will do is it will go off and fire off our web and our hub.
So if we go back over here and I go back to my resource group, we can
also see that I have not only the SQL database, the SQL server, my container
app registry, my logs, my container app updater and even my storage
container over here, which is really.
One thing to double-check to is make sure that your blobs are
public access available here.
If they're, for some reason, private double check that out in a redeploy,
just so you can click on this change access, and you want to make sure that
it's anonymous and what's inside of here specifically is a bunch of covers.
So just different images for the podcasts that have been optimized.
So instead of pulling from the RSS feed, they're all.
All right.
Cool.
So the next thing that we'll want to see is eventually some web apps
to, and different backend services.
So let's go ahead now and let's let these go and do their thing.
And again, these are going to go ahead and build and then deploy
the different backend services.
And these are independent services.
So these should go ahead and spin it off.
This will also build up our asp.net core website and our blazer backend,
and also do all the different blazer WebAssembly optimizations that we need.
So those will take a few more minutes.
So let's head back to super Mario to
all right.
So it looks like our backend has been deployed.
Let's check out.
Our hub has also been to.
They come back over here, hit refresh.
Sure enough.
We now have our listened together database over here, and we also
have our web apps over here too.
There's our hub and there is our app.
So let's go ahead and click on that.
And this will then bring up our URL for our application because
this is the web app service here.
So let's go ahead and wait for that to pop up over here in a second.
Should pop up.
Oh, there it is.
Perfect.
Your name dash podcast web app.
And there's our asp.net core raiser app right there with some of the most
featured stuff going on here, all the apps, and then go to sign in.
This is going to the same URL and sure enough, there's all our podcasts
now we're are missing an image here.
So that's a little bit weird.
So we'll get that fixed up, but yeah, you have a full podcast app.
You've got dark mode.
Yeah.
Uh, subscriptions over here.
We can add one and we can listen to one.
We can do all the things that we want to do, which is.
And you just did it all in like 10, 15 minutes or so.
That was also cool is that you can now come over into the podcast
apps, a repo, now that you have all the URLs, you can then configure
your mobile and desktop app.
So in the mobile app for Don and Maui, um, there's actually this Constance,
um, or this, uh, config CS file here.
And all you have to do is just simply put in your base URLs down here.
That's it?
That's it just put that in there instead of localized.
But in the new backend with the ports that you need, or actually no ports,
cause it'll just be online and you just put in those, you your eyes and then
you have amazing mobile application for iOS, Android, Mac and windows.
There you go.
We've just literally created our own.net podcast app for web, for mobile, for
desktop, for all the things, which is super cool and have to write any code.
We just set a few configuration flags and we're done.
If you run into any issues, post them over on the get hub or questions about
the architecture post-it over there too.
And if you want one of these suites, Monkey t-shirts or monkey hats, or
monkey artwork, or so much more.
I've launched a new merch shop over on spreadsheets.
So go and check it out in the links below.
I'll put it there.
I'll say Merck monkey merch.
And just go ahead and check that out.
If you want to support the channel even more, or just hit that subscribe
button, that light button do all the things that I always tell
you to do at super appreciate it.
Thanks so much for watching.
I hope that you enjoyed this, uh, and let me know if you have any questions at all.
Cheers.