>> Hi, everyone. I'm Yohan and I'm
a Senior Cloud Developer Advocate working at Microsoft.
In this video, we'll have a look at all the tools you
need to work with Azure Static Webs Apps, and GitHub.
First, you need to have GitHub account and an Azure account.
Both are free to create.
You'll find the links to create these,
if needed, in the video description below.
You'll also need a code editor installed on your machine.
If you don't already have it,
I recommend you to install the Vscode
so you can use all the great extension,
I'll show you just after.
Let me tell you already that they will make your life way easier.
Vscode, you'll want to have at
least these two exceptions to work with Static Web Apps.
The first is the Static Web Apps extension.
Open the Extension tab and search for Static Web Apps.
Install this extension, and then you'll have a bunch of
useful action available to create
new Static Web Apps and manage existing one.
If you go to the Azure tab,
you can see all your Static Web Apps with the deployed branches.
From there you can see the deployed app,
update settings or see also the link functions.
Now speaking of functions,
the second extension that will be
useful is the Azure Functions extension.
Once you install it,
it will be easier to create functions API
within your Static Web Apps and test them or so locally.
Now, in addition to the Vscode exemptions,
there are also few CLI tools that may come in handy.
The first one is the function's core tools.
If you go to the docs linked in the video description,
you will end up on this page.
Now, depending on your operating system,
the installation instructions will be different,
so you should really follow what
the doc says that match your situation here.
Where this tool install,
it will be the func CLI that
comes along with the full functional runtime,
and that's allowing you to run
and debug all your functions locally.
Then another must-have CLI tool is the Static Web Apps CLI.
This CLI allows you to run your complex Static Web App locally,
including the API and
an authentication emulator so that
you can fully develop and debug your apps locally.
It requires Node.js to run,
so if you don't have Node.js installed,
you can see the video linked in the description.
Now, copy the npm install command in your terminal,
wait a bit, and you're done.
Now, if you tap SWA starts with the path to your Build folder,
followed by a dot dot and
the path to your API folder in the terminal.
It will read your configuration,
run a web server,
starts your functions API locally,
starts an authentication server,
and expose everything for you in the 4280 local host port.
This is honestly my most useful tool
when I walk with a Static Web App.
So you can even test your authentication workflow.
Now, what if I told you that instead
of having to manually install all these tools yourself,
you could also use a dev container instead,
that comes with everything already prepared for you.
Sounds nice. If you don't
know what's a devcontainer and how you can use it,
you can also have a look at the videos
that are linked in the description to hear more about that.
Using this icon from the Remote Development Exemptions select
"Add Devcontainer Configuration" and search for Static Web Apps.
It will add a few files to
your projects with all the container configuration.
Now, reopen your project in the container,
wait a bit until your Docker image is ready, and that's it.
You're ready to go with all the tools installed.
Now, you have everything you need to work with Static Web Apps.
Look at the next video to learn how to deploy
your first Static Web App. See you.
[MUSIC]