>> Now that your Azure Static Web App is deployed in Azure,
I want to show you in this video how you could leverage that CI/CD
that you just create to preview some change from your code,
I'm Frank Hushei, and today we're talking Azure Static Web App.
Now that your static app is deployed in Azure,
I want to show you how you could use that CI/CD that you
just create to preview some changes.
Here in GitHub, when you create a GitHub action,
it's visible in this tap,
but it's all defined in a file. Let's have a look.
This file is here
under the subfolder GitHub and workflows. Let's have a look.
We'll open this and open the file and now we can see that
the first thing that is defined is
the name of our process and then the trigger.
Right now I'm looking for the event push and pull requests.
Right now, I'm only looking for the branch main.
It could be something else or it could be multiple branch that
I'm looking at and for pullr_request,
I'm looking also at many different event type
and it's really useful because we will
be using this in this video.
Secondly, it's the job,
so there's two job right now.
Let's have a look to the first one,
I'll try to put that in the screen.
What it does, it does a checkout, getting our code,
and then it will build and deploy and that's really interesting
because whatever you're using
different JavaScript framework or even C-sharp,
this step will take your code, process it,
or maybe compile it if it's in C-sharp
and then move that to Azure.
To get access to Azure,
it will use here the secrets,
those secrets are defined inside
the GitHub Secrets Section in the settings.
They're very, very secure.
Those are the credential you need to get
access to your resource group in Azure.
Now we need to specify
where is the thing we want to move to Azure.
This is done with those tree property
just here so the location app,
this is where my code is.
The API location, if you add one,
this is where the API code is and then the output location.
Sometimes if we're using, I don't know,
TypeScript or C-Sharp, the code,
and the output artifacts are different so this is why we
have those two and that's the artifact that will be pushed.
The value in there are highly customizable.
It depends on the framework you're using
or your favorite location.
You need to customize it the way you want.
Now let's have a look to the last job just here.
Right now this one is focusing on the pullr_request and when we
create a new pull_request that will create a staging environment,
a new deployment slot inside Azure,
and this way we'll have
two different version of our application available online,
sharing the same resources.
This is very useful.
But then when we're done,
maybe we merge, maybe we just close that pull_request,
we need to get rid of
that staging environment and that's what that task does,
it inform Azure using again
our special secret token to delete that station environment.
Let's have a look and try to do one.
I'll just want to show you briefly the app I'm using.
Right now, that's the current version in
production and I want to change the color in this menu.
Right now it's dark to purple so I want to change it,
make it a little bit more colorful.
I'll go here in the code and we'll go back to
the root of my repo and I want to create a new branch.
Here I will just call that branch demo,
so I'll create here.
Obviously, you could use different tool.
I'm using GitHub interface because it's available for everyone.
Now I want to change the code of my app.
For me, I know that it's in the folder app,
and then it's in the folder shared and I want to change that CSS.
We'll click on that because I want to edit it,
I will click this little pen
and that's the value here I want to change,
just put something else and now I need some comment message.
Voila, comment the change,
and now if I look my GitHub action
nothing is showing up, nothing is running.
Why? Because my trigger is only looking for pull_request
or the branch main and right now I'm in the branch demo.
There's nothing happening. If I want to
trigger that new environment,
I need to create a pull request. Let's do that.
If I go back to code,
I see here demo has
changed and I can compare and create a pull request.
That's exam, we'll do that and I will
just click that "Pull request" button.
It takes few seconds for the GitHub Action,
the workflow to get trigger and it will generate something here.
That's wonderful. But you know what?
I have already something prepared
so we don't need to wait so let's have a look.
If we'll go again in the branch,
we see how the final,
so I create the same thing but in advance,
and if we go in the pull request,
I have another pull request that is already ready.
After a little while,
the pull request will compile,
deploy your code in that staging environment,
and you will have this status and here
your Static Web App staging environment
is ready and you can see it here.
If I click on that, now,
I will have my new menu with dark purple and pink. I like that.
I will suggest this,
but my version is already present.
Both are right now in Azure sharing the same environment
and we can also see that from the portal so if I go in the portal,
the portal.azure.com, this is
my Static Web App and I have a bunch of
information so see here I have my URL and if I go
in Environment in the left panel,
I will see here staging and I will see just here,
my branch where I did with
the title of my pull request and everything that is available.
I could see everything here and when I'm done,
I could merge, I could delete,
that environment will be deleted.
That's how you could leverage the CI/CD from
GitHub to see preview of your code in your Static Web App.
Stay tuned for learning more.
[MUSIC]