Deploy With Azure Static Web Appsby by Nishu Goel || Azure Virtual Conference

All right. So, hi again, everyone. Thank you very much for joining today. And I'll jump right into the session. I'm really excited to be talking about deploying web applications with Azure Static Web Apps. And before we actually start the session and see what's in store for us, a little bit about myself

So my name is Nishi Goyal and I work as an engineer at the company called The Data Works

I'm also recognized as a Google developer expert and a C Sharp Corner MVP

Thank you C Sharp Corner for that. And the agenda, the session today looks mostly like this

So I'm going to start by talking about what Azure App Service, the Static Web App Service helps us to do

and how it has made the lives of us developers really easy, you know

with the aim to do everything from one place without having to go to either Azure or GitHub

or, you know, different front-end applications. The second part that we look at

is how to quicken our development process using Visual Studio Code and how it is integrated with different extensions

and, you know, how it would make the whole process seamless for us until the deployment part of it

So I'll mostly do all of this using the demo, doing the demo

So I hope you understand bits and pieces of it. during the demo

So let's start right away. So the first thing that I would say is that

if you are into the world of web, if you are developing web applications

you would know that JavaScript is currently ruling the world of web

And there are so many web frameworks out there like Angular, React, Svelte, Vue

There are so many different frameworks out there. So it's completely your choice which one framework

you want to go with or what is exactly the requirement of the project that you're trying to build

So that's the front end part of it. What Azure Static Services

the Azure Static Web Apps extension allows you to do from the Visual Studio Code IDE

is that the first thing you create your front end application using any framework that we just talked about

The second part about is having a backend, right? Now, for people like me

who are kind of newbies into backend, who don't understand, you know, the architecture of a backend application

be it a Node.js application or a Go-based application, If you don't understand that

we are really confused about where to place the API folder. Do I create a serverless backend

Do I know where to place the API folder in my application? Well, I really don't know that

I really want to rely on something to be doing this for me

That's when Azure Static Web Apps again, come into picture and help us with the serverless backend

We'll actually look in the demo and see how we can actually do that

There are two parts to it. First, building the front-end application. Second, being able to integrate it with the backend

but then using the service which helps us to do that. So the second part of the demo would be about how you can

integrate everything from within your VS code IDE, which is all our web developers favorite IDE

So yeah, we'll be building a front-end application first. I'll be using a very small demo React application

for the front-end part of it. Then we'll see how we can actually integrate it with the backend

I use the GitHub API for that, the GitHub avatar API for that

Then finally, we'll come to the deployment part of it. We'll also see how from within VS code

you can actually do CIC, continuous integration and deployment on your project

on your application that you're building, and be able to deploy it on Azure

I am sure it would be interesting for you, being able to do everything from your ID

not going to GitHub, but not going to Azure for that, but then everything in one place

This is a quick walkthrough about what I'll be doing, and then we'll actually start doing that

I'm going to start off with a Create React App application, which will be a basic landing page like this

which just says that edit the app.js file and the default landing page of a React application

We'll do that first. Then the second part is getting the extensions required

inside our Visual Studio Code IDE to be able to dealing with either a serverless backend

or to be able to use Azure Static Web Apps and have the Azure connection with our GitHub

or with our Visual Studio Code IDE. The next thing would be to see how actually

we integrate the serverless backend. So we'll walk through that and we'll see how all of it is placed inside an API folder

which like right now sounds strange to me, but then let's have a look at how actually to do that

The next part would be connecting it to the Azure portal, wherein you were switching to the deployment side of it

and you'll see that the app that you just developed, you would run it through the continuous integration process

you would run it through the continuous deployment process, and then finally deploy it to Azure

By the end of the presentation, you would be able to see an application actually deployed on Azure

The process looks like this. this is a very quick walkthrough of things that we'll be doing

The first snapshot that you see here is Visual Studio Code asking you about the location of your application code

Where do you want to place your React code in this case, for example

That will be at the root of your application because you want the React code

the index.html, which is the main landing page for your application, to appear on the deployed instance

The second thing that it would ask you is that where do you want to place your Azure Functions code, which is the serverless backend code

And that's where you mentioned the folder that you have created manually, or maybe you have used Azure Functions to create it for you within the API folder

Then the next thing would be Visual Studio Code actually asking you what is the path of your build folder, the files that get generated after you build your application

And that's when you would specify build in the case of a React application

but then if you're using an Angular application, there is this folder that is generated

once you build your application. So, considering the framework that you're using

for your front-end development, you can specify all these requirements that Visual Studio asks you for

The next thing is about deploying it to the GitHub and using CI-CD and then finally deploying it to Azure

That's where, again, you see no screenshots of either GitHub or Azure, right

This is because Visual Studio Code is actually doing all of this for you. The first thing that it asks you is that enter a name for your static web app

the name that you want to see your application on Azure. You enter some name according to what you want

The next that it would ask you related to Azure is that what proxy region

the region that you want to enter your application into and then deploy it there

That also is integrated within the VS Code You can specify any location from here and your application will be deployed there When you actually do that you will come to the GitHub Actions part of it

which is exactly like the build pipeline that you might have seen in Azure DevOps, for example

You have this pipeline that starts running once you push your code to the main branch

that is connected with the pipeline. The same thing we have here in GitHub Actions

Just like Azure Static Web Apps was announced at Microsoft Build 2020

GitHub Actions was announced a little before that. The idea was to be able to integrate

the front-end application with GitHub Actions in process, and then finally deploying it to Azure with the help of all of these things

and finally the extension that was announced in Build 2020, which is Azure Static Web Apps

As you can see here, it's running many tasks. It's setting up the job, it's building the pipeline

it's running the required actions, and then it finally deploys and runs the actions required

When the job is completed, it should finally go to Azure and create an instance of an application

where it is finally deployed. You would be able to see something like this in the resource that is created for you

This is the name of the instance where your application is deployed

As you can see, the URL here, it's something called gentle bush and some random numbers there

You can use this URL to be able to see your application now

Now, when you actually go to that URL that was randomly generated for you

you would see something like this. So this is the React code and the simple landing page

the default React application that you created, and ran it through the GitHub Actions process

ran it through the Azure Connectivity process, ran it through the Azure Functions process

and then you were able to deploy it to the Azure instance. So let's jump right in and do that before we go to the final part of it

So I'll go back here and open my terminal quickly. So let's expand this

This is here. Yes, so let me clear this quickly and see what's here, there's nothing

I'll increase the size of this so that you are able to see this properly

So yeah, I want to create first a basic React application and I'll use the packets create React app for that

But you might be wondering that, okay, do you need to even install the package to be able to create a react

application first? Well, you actually don't need to do that. So I don't have the create react app package inside my system

So what I would do is I would simply link to NPM and, you know

try to use create react app from there. So we can use the NPX command that you see here to be able to, you know

link to NPM, create react app, and then give any name to my application

Let's call it Azure conf, right? So I'm using NPX create React app here

And this basically starts creating the application for me. While that happens, let's go to Visual Studio Code

Expand it a bit. And the next task for us is to get the necessary extensions

that we need, right? So I'll go to the extensions icon here

And the first thing that I needed is the Azure Static Web Apps, right

So Azure Static Web Apps. Okay. I think this is something to do with the internet

Let's just check if there's any problem with the internet. This is working properly

All right. Let's try again

All right. There seems to be some problem with the extensions marketplace

but the idea is to get three extensions in your bucket. The first is the Azure Static Web Apps extension

which is Azure Static Web Apps. The first thing that I is done. The next extension that you would need

actually, I can show that to you here and it loads now. So you see, I have loaded this. I have downloaded this extension, Azure Static Web Apps

which is in preview right now. And if you've not installed it, you would

see an install button like this. Otherwise, you would have it here, just like

I have it. And once you install it, you would see an icon like

this of Azure in your Visual Studio Code. The idea is to, you know, integrate your code and GitHub

with the Azure extension. Once that is done, the next thing it would ask you

is to, as it says, the extension wants to sign in using GitHub

because the idea is to, you know, connect it to GitHub Actions so that your CI CD is in place

and you're finally able to deploy it to Azure. So you authorize GitHub to be able to use your Visual Studio code

and the extension within it. So when that is done, you would see something like this

So you see static web app extension here, and the plus icon is to finally deploy some application

that you have and all your subscriptions will be appearing here. This flash kind of an icon that you see here

is to integrate your Azure functions or any HTTP function as it says here, create HTTP function

So this is the extension that we're going to use about that

Then this is the extension that is the other thing. So let's go again to the extensions

and type in Azure Functions. So you see this extension about Azure Functions

This is the one that would help you integrate your front-end application with a serverless backend

Then you can simply use it for any HTTP trigger or any HTTP function that you want to

associate with your front-end application. Now when that is also done, the third thing if you need is to get

the Azure Database Extension as well, which would deal with your database

either Cosmo DB or SQL or any other database. Then you can get all the details about the tables in

your database all in Visual Studio Code. You don't need to go to your database to get that

This is again very useful if you're dealing with databases. When you have these three extensions

mainly static web apps, Azure functions, and the one about the database

If you have these three in your bucket, the task is very seamless for you because then Visual Studio Code takes it all over it to be

doing the thing that you're trying to do. So let's go back and assuming that our application is created

okay, it is still creating. So there seems to be some problem with the network

All right So yeah let wait for this to be create Instead we can actually open any other application that is already created So let clear this quickly and let me check

Let's open this demo application that is check check until our new application gets created

So I'll open it in Visual Studio Code. Yeah, so forget this API folder for now

and look at the front-end code that's generated for us. Let me close this file

Yeah, so as you can see, you have this index.js file, which is the, you know, kind of the entry file

to your React application. You have service worker, which deals with the offline rendering of your application

So if you're interested in, you know, showing the customized message when you're, for example

internet ditches you in between and starts showing that Chrome D, you know, You don't want to show that for your application

and you decide to have a customized message saying that maybe your internet connectivity is not as expected

or something like that. So Service Worker will help you to do that offline rendering

and you might want to check more about progressive web applications, PWAs

which allow you to deal with Service Worker and give many more other features to your application

So yeah, this is your React application. Now, when your front-end code is ready

this would just open the basic landing page of your default React application

When this is done, the next task that you wanna do is to integrate it with the backend

So you go to Azure Functions here, and now you wanna have an API, right

You want to have a serverless backend in your application. So as you can see, Static Web Applications here

this extension and this flash icon. So when I click on this flash icon here

this is still loading. So let's wait a bit for that. Correct, so when I click on the splash icon

it asks me that provide a unique, you know, HTTP function name for your API

So let me just call it get GitHub Avatar because that's what I'm trying to do

And as you see, I have already, you know, used API inside my application

because this is a demo application. So let's see what is that API that is created

So if you go here, I have this GitHub avatar. Let me just close this and close this as well

All right, let's leave that. Yeah, so let's see this one. So we have this API get GitHub avatar

which is integrated as a serverless backend inside our front end application

And if you go in here, the index.ps file, you would see that the idea is to just get the query

the API from GitHub, use it for querying on your avatars on your GitHub and then you can do your manual code here

to get the whatever thing that you're trying to get from your GitHub API

In here, it's very simple about getting the GitHub avatar and then you can show that on the UI if you need

but you see how the API folder within which the serverless backend exists about all the files

related to the backend is integrated with our frontend application. Now when that is done, we have our, you know

front-end and the backend code available here. The next thing for us is to be able to integrate it to GitHub

So we have the serverless backend, we have the front-end code as well

The next thing is to go to GitHub now, but do we actually need to go to GitHub or just

you know, Visual Studio Code should help us with that, right? So let's quickly have a look if our code is generated now

Well, it has now, right? So I'll quickly open this new code editor

I mean, this new code base that we have. Let's close this and yeah

let's go into this file that we have created the folder. It's called Azure Conf

Let's open this and also run this. So we'll add the Azure function to this quickly

Again, for that, we'll have to go to the extension here, the Azure icon, and you can see the app is running here

We can have a look at that later. When I click on this flash icon

it would prompt me again to add an API to my application

Let's try if that loads in time. Yeah, so I can quickly add it here and get GitHub Avatar

And it asks me which language I wanna use. So I'll go with TypeScript and you would see that Visual Studio Code

start showing you that it's creating a new project within my front-end application

And you can see that now in the front-end code, I have this API folder, which is about the Avatar

and the get GitHub API. But it is importing from this Azure Functions package

which we have not installed inside our application yet. So we would need to add that to our code base as well

So let's quickly go in here and come out of it. I'm using the Yarn Package Manager

So I'll do Yarn add at the Azure slash functions. So when this package is added

I should have no errors remaining in my application, which is kind of existing here now for now

So let's wait for this. Great, so it's added in the packet now

and you can see that there's no error remaining inside that application now

So let's quickly go and integrate it with GitHub. For that, the first thing that we need to do

is add all our code that is here to GitHub. So for that, we need to create a repository, right

So let's go to, you can see first of all that our React application, the landing page is created

Now the next task is to code, I mean, you know, push all my code to GitHub

So I'll quickly go to GitHub, I'll just say repo.new. Now this is very interesting and I really like this concept

of these .new domains, right? So you can see that I just did repo.new

and it opened GitHub for me. I didn't have to type like github.com slash

you know, an issue goal to be able to create a new repository

I could just do repo.new. There are many other interesting domains like that

So you would see this.new and this would create a, you know, new GitHub just for you

And you can also do story.new. So for example, if you're planning to write your own blog, right

So just do story.new and it will open a new story on Medium for you So this is a very interesting thing and there are many more dot new domains you might be interested in All right so let create a repository Let call it Azure Cont NISHU

This is the name of our repository. Let's simply create it without changing anything else

Pick it up from here. Let's go to the terminal. Let's check the status of our code right now

Add everything in here. Let's commit this to saying any message. for example, initial code for deploy

When that is done, I want to add a remote origin, git remote add origin

So where do I want to add that? In here. So let's check now git remote minus v

and it simply push our code, right? git push origin master. When my code is all pushed to the GitHub repository

the next thing that we want to do is to see if we can deploy our application to GitHub now

I mean, Azure now. So all of our code is here. So let's go back to our Visual Studio code quickly

and go into the Azure icon again here. Now I'm trying to deploy my application

So you see this plus icon here, this is very important to understand that the flash icon is actually to create a HTTP function

but then this plus icon here, the small icon next to our static web app extension

is about actually creating a static web app and deploying it on Azure

So I click on this plus icon, I can use any of these subscriptions

The reason I had these two subscriptions here is very important. So I'll, you know, at a later stage

I'll tell you why is that so. So I'll choose the, for example

free via subscription for now. They say, enter a name for the static web app

So let's call it Azure Conf, again, end code, right? This is the name, it asked me the brand

So let's call it master, the location of my application code. So this is exactly as per the snapshots

that you saw in the slides sometime before, right? So this is the location of my Azure Functions code now

which is API, then it's asking me the build path, which will be inside the build folder

Again, it's asking me the location where we wanna deploy. So I'll simply use ECUS2

And now as you see here, it says creating resource group, creating new static web app

but then it's taking some time, let's wait for it. It's basically trying to create a Static Web App for our application

As you see, it has created the name that I gave for my application

One important thing to note here is that when you click on this plus and it gives you different subscriptions

you might see that the subscription that you have is not allowed to use the namespace called Microsoft.Web

You might want to have to go to Azure portal and then registered the provider called Microsoft.Web to be able to use the Static Web App extension

So when I was doing it for the first time, I struggled for like one to two hours because I

was not sure how to register a provider. So this is something that you might want to consider. Now

my application is created. And if I reload this, I want to go to the action. And you can see this

actions part here which you know has started the pipeline for me one in progress one queue job so

if I go to this task here this job here the whole process is running here which is about you know the

triggering the pipeline then building the whole code that we have pushed and then running the

pipeline once this is deployed you would see an instance on the azure portal so just to check the

instance name, we would go to the Azure portal here, and this is some connection error. All right

The resources that you see here, inside these resources, you would see your new application

Let me try to reload this. Our code is still running, so you would not be able to see the React application already

pushed in here, but we can see a reference application. For example, this one, right

Check MS build. So let's click on this one. And if you, yeah, so you can see this URL here

right? Let me quickly just zoom this a bit so that you're able to see better. So yeah, this is the

URL. This is the place where your application will be deployed finally. And if you go back

where all your resources are listed down, you would see that this has been triggered now

Remember it was showing one hour ago, but this has been triggered now and our pipeline has been completed it seems

Yeah, this has been almost done. If we go to the Azure portal

it has been triggered and now when I go inside this and try to access the URL

if the whole pipeline is completed, it will show me the React app, otherwise it will show me a landing page

but it seems that it is created and this is the URL where you can access

your React application which you just pushed. You see how from your Visual Studio Code

you could create a front-end application, you could add the Serverless backend to it

The next step was to add CICD, which was the pipeline that was created here

and then it started running all your code in here. Since it has finished the deployment process

and you can see this here, the status also has succeeded. All your code has been completed and your pipeline has run

finally and you can see the change in here in your resources and we finally able to see the

deployed application on whatever random name this is which is generated for you. Obviously you can

change this random name that is generated for you but yeah that's a custom domain name that you can

use here. So yeah that's about creating your application and then adding a serverless back

into it and then being able to use CICD through GitHub Actions which is exactly how Azure DevOps

is works using a pipeline and then finally see your application on Azure

Now, one question that I'm sure that you would be coming in your mind is that if Microsoft has done

this static web apps extension, why was it not done for Azure DevOps and why for GitHub Actions

So the reason behind this was that since most of the developers are on GitHub and people are trying

it there, the first platform that they chose was GitHub. And if you're thinking that would it be up

for Azure DevOps, then yeah, this is in the pipeline and Microsoft might

surprise us very soon about this integrated with Azure DevOps as well

Yes, that's pretty much it. I'm sorry about the delays, about the connection and everything

But yeah, thank you very much for joining today. You can connect with me and if you face any problems

regarding while actually trying this out by yourself, you can reach out to me and we can do this together

Thank you very much