(music)
>> We'll just dive into it, I think.
I've heard about Azure static web apps
since it came out several months ago.
So I figured why don't I take the Gatsby app
for stream overlays and try to get that
on an Azure static web app.
So that's what we're going to do
which I think is going to be fun.
I've done a little bit of it.
I haven't done everything that we're going to
try to accomplish today.
So there will be a learning experience there.
Expectations for me is that
I can easily create an app inside of Azure.
That thing will connect to a GitHub repository.
Anytime I'll push to that, GitHub repository
it will do a build and it will be up and running.
And that's basically what I expect.
Let's run a Gatsby develop inside of this thing.
So the goal of this thing, let me change the order of this.
There's my bot, by the way.
So I have an Figma, these are not finalized
but I think I've shown going through some design updates
something like this will be my new stream overlays.
So I haven't actually incorporated that fully
into Gaspy cause I'm waiting on final design stuff,
but, the stream overlays are a Gaspy app that is right here.
I can say like coming soon
or starting soon or something, I think, there we go.
So it'll add that text.
This will actually let me cycle
through different pages with my left and right arrow.
So you can see me doing that.
And there's some things to figure out with this
but that's basically what we have that I want to get hosted
but we'll use serverless functions.
So we'll try to get that up and running too.
So let's go into Azure.
Inside of Azure, I'm logged in now.
I am clicking on a static web app,
A new one, as you would probably expect
and then a name for our static apps.
So this will be jqq stream overleys.
And if I remember correctly
this should be completely unique.
So here's the thing that I think a lot
of us probably expect you sign up with, GitHub
you connect to a GitHub repository
and that's how this thing is going to get deployed.
So we've got basic settings for like the resource group
the name of the static app.
And now we want to actually connect it
to a repo so we can choose from a organization.
If you have multiple, you can then choose the repository
and I'm going to choose the jqq streams.
And the branch is a master branch.
let's review and create this.
So we should have it connected to the repository.
This is going to ask where is the application
and the API location.
So we will move some serverless functions
into the API part here.
So let's go ahead and do a create.
And one of the things that they do here is,
well at one point it asked me for what type of app it was.
It says it is complete.
Let's go to the resource, let's go and see this thing.
The web app is live and waiting for your content.
So even though this is connected to the GitHub repository
the code isn't actually deployed yet
what it does is it runs this, GitHub action to do a build.
The way that it works is, if I stopped my local copy
and I do a Git poll on master, notice right now
there is no GitHub folder or dot GitHub folder.
If I do a Git poll,
now there's a di GitHub folder inside of workflows.
There's Azure static web apps.
So if I look inside of my build
there's actually an air and the reason is,
cannot use the window inside of the server build.
So you can only use that on the front end and the hydration.
So you need to do, I think we can solve this by
just surrounding this little bit with that.
So inside of my navigation
I'm looking at the window to grab the URL.
And then based on my key down events,
I will be able to change pages.
So that's the way it's like a debugging thing.
I think what I'll do is I'll say that the current
route is this.
And then we can say, so if there is a window
then we can update current route to be this thing.
So we can call this let then current route will be updated.
If a type of window is not defined
meaning window is there.
Meaning we're running in the browser.
If this is still running our local host 8,000
I just want to see
that it's running left and right can switch pages.
So that stuff is good
which means that hopefully will work on the server.
Now conditionally looking at window object
if in the browser
I guess we could also do a Gatsby build locally to make sure
that, that is going to work.
Let's try that first, but we're getting another error
in here inside of where's that
inside of this one URL search params
we will start off with let text equals just nothing.
Let's move this thing up here.
And then let's update text accordingly.
Let's do a gst, gcam at checking for window
before using document.
If we look inside of Azure
let's go to the root of the repository.
Then actions is where I want it to get to.
And now is doing this new bill.
This also is looking for in here and API directory.
We don't have that.
So we're going to get to that right now.
My serverless functions are configured
for Netlify pretty cool
that we can kind of move from platform
to platform and not have a lot of changes in our code.
There'll be a little bit of configuration stuff
but that's kind of it, I think.
And I'm wondering
there may still be one thing we're missing.
Oh, it worked what?
Hey, look, that's great.
And if I left and right now I can switch.
So this thing is fully deployed.
So I think it's hosted up there on Azure.
That's cool.
Now the thing that you'll notice
and this is where the serverless function comes in
it is looking for James Q. Quick
and it should show this other name.
It's a four,
a four when it makes a request to the Git stream function.
So that's where our serverless functions
are going to come in.
So we'll need to take a look
at my migrating, moving, tweaking
the serverless functions that we have to fit.
That what Azure expects
Let's go to JavaScript and we want an HTTP trigger.
That is the name.
And this is what I'm looking for is just this file.
Let's move this inside of API.
So we're going to test this out here.
Maybe something like this.
Hey, so there is our HTB trigger permissions denied up here.
Okay. Not exactly sure why that is.
One of the things we can do is we can give this test.
So let's rename this.
Let's do a test and point.
If we deploy it, I would like to be able to see it
to be able to hit that end point directly.
Let's go ahead and publish this thing out
go to our terminal.
Let's add all of this stuff added first pass at a test API.
This thing looks like it completed this job.
So I did a build.
So it shows me that that thing got picked up,
which is great.
Azure has now picked up just from us having that file there.
It has picked up this end point
this file as an end point, which means
and hopefully this will work is we can go to
slash API slash test endpoint.
Hopefully this will just return
to us a little bit of Json suite.
So that works, which is pretty dope.
The only difference in what we already had and the end point
that they just created for us is a little bit of syntax.
So I think what we can do, I'm going to leave these files
and now change what they export.
So get stream, we will kind of copy this code just to start.
Let's paste this in down here.
Looks like we can just do the context.res.
So we don't need the status code.
We can do the context.res equals.
It's going to be this object.
And one of the things I like is
that you don't have to string a file your objects.
I don't need this log.
We can do context.res equals
and then do a status of 500.
So it goes out of API into source and then utils airtable.
So that should work the exact same
hopefully go into update stream.
This takes a little bit more logic.
So let's paste in this example here so we can have it ready.
And this one, we're wanting to do a little bit of chat.
So we'll grab the ID, the title
the guesthandle, the pass correctly.
So we've got our new definition.
It takes into context and req and what we need to check.
We don't need it to do the Json parse again.
So that is actually nice.
And then we'll look at the req body context.res equals
and then this is status like that.
So now let's grab this part.
All right.
And let's remove this part, context.res equals.
And this is status.
That rows is status 500.
Let's get into here, do a status.
We want to updated the two serverless functions
for Azure functions do moved serverless functions
into the right place.
All right, let's push that up.
It'll run a build and we'll see if we'll see if that works.
So it said the API was found.
So, and, it did that before, which is good.
It looks like it finished, or no
it's finishing no finished upload polling on deployment.
Let's go over to Azure again.
Let's do a refresh on here.
And do we see those come through?
Yes. Thank you.
Cool. Oh, this is an async function
which means I can do await.
It returned back a status of maybe we can do this.
We can return back a body and return the err in here.
Update stream index, same thing.
So down here, body is err
and then let's go into err table,
err table does the configuration, it gets the stream table.
Let's do added err to body.
It will make the request to get stream
since I didn't return anything.
I think it won't actually show me.
Let's try this out again, just to be sure.
So what I did is I ran F five, which should in theory
startup my serverless functions and do a debug of them.
So let's do an npm install here of airtable and dot env.
And let's check the, get ignore to make sure
this is ignoring node modules anywhere.
Yeah. So I think we're good there added package Json
in API folder.
Let's give that a shot.
It looks like it completed this job.
Hopefully if we try now to do,
all it looks like we got the same thing.
So not sure why that's happening.
We might have to,
I'd have to revisit this in the future to figure out.
I imagine it's some sort of small configuration thing.
We did ended up adding the package,
Json here for those two packages.
And I think those are the only packages that are referenced
something we're missing in there.
We'll need to figure this out, but this has been cool.
Everything seems to work the way I expected
with static web apps, connecting it to a repository
getting it deployed kind of cool
that it goes into the actions that GitHub actions
for doing those deployments.
And it does that configuration for you,
looked into getting the serverless function running
and there's some sort
of configuration or something that we're missing.
So I can get that figured out.
Once we have that, then that function will be
deployed right where we expect it to be.
And I'd be able to be used inside of this application.
But anyway, that was a fun experiment.
Getting to check out Azure static web apps.
It was cool.
Thank you for everybody for hanging out.
I appreciate it.
I had fun and I'll catch you later.