Thank you, Jason.
Hello and welcome.
My name is Natalia Venditto and I'm a program manager
for JavaScript and Node.js end to end developer experience in Azure.
This video series is for developers wanting to build
and deploy their applications to our Azure App Service.
In our previous videos, we got our Express JS Application
built, deployed and published within minutes
and we also added a Cosmos DB for MongoDB API Database,
a storage account and Blob Storage to start publishing listings
without ever leaving our VS Code editor.
Jason showed us how to leverage deployment slots to preview changes
to our code before deploying to production
and autoscale to prepare our application
infrastructure to support our worldwide rollout.
And now we are ready for our next adventure
but before we do, please make sure to meet the following prerequisites
you need to have Node.js LTS
installed with npm, Git
and a GitHub account to complete our GitOps deployment
and VS code installed with the static web
apps extension.
With things going this well,
the Contoso application
product owner wants to make sure we can promote the application
in every human resources department and new hires or promoted
employees around the world
can find it to run their searches for a suitable rental.
And for that they want us to quickly put together a blog feature
for the upcoming company All Hands Meeting.
Is this story familiar to you?
The product owner is really looking forward
to blogging all about Contoso app capabilities
and the team behind it and they want to do it now
because the all hands meeting is around the corner
so we should have this feature released by the end of this sprint.
But there is a problem.
The tech lead has realized we only have one frontend
developer in our team with enough capacity to do it
until then. Are we able to do this?
Of course we are.
We will use the power of Azure Static Web apps
to decouple this capability from the main portal
and create a static web app using next JS as framework.
Thanks to our GitHub centric approach, our editors
will be able to commit markdown and trigger a new static page
generation by leveraging our CICD integration.
We will then link our blog application
to the portal application stage area.
But before we can deploy to Azure, we need to add the export script
to the build step as shown in the package that Jason.
As we did
with all the resources before, we can use the VS code extension
to create the resource associated to the desired subscription.
For that, we will
find the static web apps VS code extension
select the
subscription, open the command palette,
create a new static web app,
give it a name
select the region,
choose our build preset in our case custom.
Enter the location of the application code
we will leave the root as default and then put the location of our build output.
Because this is a next JS application, it will be out
and the extensions GitHub
will start doing its magic to deploy this application
to Azure
we can now open the GitHub actions
and see it in action.
As we can see,
there is a workflow running already.
After one minute and 32 seconds,
The application was built and the deploy job was completed.
By creating the application,
the VS code, the extension generated the workflow file pushed it
to GitHub and triggered the action to run the workflow.
Now what we can do is go back to the blog,
copy this URL,
go to VS code where we have
our portal code
and add it to our stage link.
Our team has previously
developed this feature.
Now we need to
commit this change,
push it to GitHub,
and if we go to
the actions
on GitHub,
we are going to see the workflow is already running.
This is because we have set up our CICD integration.
Do you remember what the application looks like?
Because once this action is completely run
or this workflow is completely run, we will see a difference.
We will see a change.
And that's it.
A bit over 2 minutes later, the build is complete.
And that's it.
Only a few moments later we have our deployment complete.
We can click on the link to see the newly deployed application.
We can also access our application directly
from the URL link in our application overview in the portal
so we can click on this link and voila.
Now we have a stage that is linking directly to our blog feature.
Everything is
going so well, but how well is that?
Both our product owner and our development team
want to be able to run queries to diagnose problems
and see how our end users are leveraging our portals feature.
In our next video, Jason will show us how to use Log
Analytics to run log queries and identify trends and patterns
while monitoring both health and impact of our application.
Thank you very much.