Overview of VS Code Extensions for Azure Government


>>Hi. This is Steve Michelotti from the Azure Government
engineering team, I’m joined here today by Yujin Hong my colleague on the Azure
Government engineering team. Welcome Yujin.>>Hi?>>So, today we’re
going to talk about VS Code extensions
on Azure Government, I think that based on the
conversations we’ve had in the office, this is a topic that
we both like a lot because we both are VS Code lovers.>>Yes.>>And we know that a lot of our
customers love Visual Studio, they do C#, and they’ve done
that their whole careers. But we have another huge population
of customers that aren’t necessarily Visual Studio users
but they love VS Code, it can run on any platform, Windows and Mac, whatever
the case may be.>>Right.>>So, it’s really exciting
to see that we have these powerful extensions for
Azure Government using VS Code.>>Yes, and a lot of Azure
developers can use VS Code, can use these extensions to have a more integrated experience
developing on Azure Government.>>So, I like what you just said
they’re integrated experience.>>Yes.>>It’s one thing to go into portal and be able to do all this stuff, but sometimes you don’t want
to always have to navigate over to the portal to
do these mundane tasks.>>Exactly. Especially, when you’re coding and you have
to switch back and forth, if you have everything in
one place, it’s much easier.>>If you already use of
VS Code as your environment, it’s nice to be able to
stay in one place perhaps.>>Exactly.>>So, let’s look at some demos here about the various extensions
that we have available.>>So, now I’ve actually opened up my Visual Studio Code and we can see, I’ve navigated to the
“Extensions Marketplace.” So, for people who
aren’t as familiar, we have a huge marketplace full with all of these extensions
that we’ve created or other people have created
to use one Visual Studio Code, and you can search
for some extensions. So, I’ve just search for Azure, and in order to actually
install something, you just actually click
this green button, install, and you just reload VS Code, and your extension is ready to use.>>So, this is feature VS Code,
you can do extensions, these extensions may not be
related to Azure at all. It just so happens that
we have a bunch of Azure related extensions
in the marketplace.>>Right. Exactly.>>Okay, great.>>Once you install something, it would show up under
this enabled com so we can see I already have some extensions
that have been installed.>>Yeah. So, we’re not going to
take time to install it now, but you’ve already
got these installed. Anyone that’s use VS Code has
probably installed an extension, click the Install button,
reload, you’re good.>>Exactly. So, I want to touch
on the Azure account extension. So, this is not something
that users actually see, it’s a background extension, and all of these
Azure extensions take a dependency on
this Azure account extension. It just handles
the whole login, experience, and giving authorization
to access all of your resources within
Visual Studio Code. So, if I click “Ctrl+Shift+P,” there are actually some commands
we can see that are part of this Azure account extension. So, we can see we have this Azure
sign-in to Azure Cloud command.>>That’s really key signing
to Azure clouds. It’s picked your cloud
otherwise it’s to Azure Public.>>Exactly. Obviously
government users, you want to be able to
choose that environment. So, we can see we have
this drop down and we want to use Azure US
Government, so let’s enter. Here we have this pop up on
the bottom right corner, so let’s click on copy and open, it’s going to open my browser.>>The copy was copying what?>>It’s actually copying
the device code, that is actually going to authorize VS Code and then I’m going
to sign into my gov.>>Great. So I don’t have
to memorize the code anymore and type it out directly.>>And we can see here, it’s
login.microsoftonline.us so, we’re definitely on the right
endpoint and I just Ctrl+P, pasted that code that was
already copied, and “Continue”.>>So, it’s Visual
Studio Code but this is the same experience that you might be familiar with if you
use the Azure CLI.>>Exactly. It’s all using the same experience and I’m going
to just pick my gov account, I’ve signed in to Visual Studio. So, let’s navigate back there. Here on the bottom, we can actually see
[email protected], so I’ve successfully signed
in to my gov account.>>Okay, great.>>All right. So, now I’m
going to actually navigate to this Azure icon right here, and this is basically where all
the Azure extensions are loading.>>So, these are the ones
that you have installed. If other people have
installed different ones, this might look slightly different
but we can see we’ve got about four extensions that you happen to have
installed at this book.>>Exactly, and the first one that we are actually
going to focus on, is the App Service Extension, and as we can see, it’s already populated with my subscription
when I signed it.>>So, speaking of us signing, I just want to double-click
on this a little bit. In the perfect world, I see service Azure account
extension thing up, but in a perfect world
I didn’t even know this Azure account extension exists. I don’t have to install, all
I really have to do is I have to install the
Azure app servers or whatever one I want to use in the background and it will install
the Azure account extension. It will be handled for me, they all use it, so
similar experience. I don’t have to worry about it, just install the extension I really care.>>Exactly. So, now I can see that it’s populated with all
of the App services that I already have deployed
to the subscription. So, if we actually
click on one of them, we can see application
settings for this app, we can see deployment slots, we could actually scale up our apps source from
within VS Code as well, you can see the actual files
that are running in your code that has been
deployed to Azure Government.>>So, I can literally see the physical files that are
sitting up in the cloud in Azure, but it’s almost gives me a view that almost makes it look like it’s local, even though we know
it’s the remote view.>>Exactly, and you can actually also see log files from here as well. So, that helps debugging things.>>We’re advocating
logging indirectly on your production server and changing code right? It’s cool that you can.>>Yeah. It’s cool
you can look at it. So, this plus arrow is actually creating a new web application
so, just click on that. So, let’s just say vscodetest, I’m just going to create
a web application from scratch, and then create a new resource group, and then I select Windows as my OS. Create an App Service plan, and then I can choose the tier for the app
service plan that I want. So, let’s just choose the basic and then I choose
which region I want.>>I mean, those are all
Azure Government regions.>>Exactly.>>Wow, that’s actually
a lot quicker. Sorry, that goes in the portal, that happened pretty fast, it’s pretty good experience.>>Right. So, now we see that
our deployment has succeeded, it says create a new web
app VS Code test, and we can actually, on this left hand side, we can actually see that it’s
already populated there, the application that we
just created from scratch, has already populated in
this extension and actually, if I click right-click on it, I can actually see
all these different options, I can open it in the portal, I can browse to the actual website, I can start, stop, delete it, I can deploy, I can start streaming logs, set up continuous delivery.>>You can mange it all from VS Code.>>Exactly. So, let’s
actually browse to the website just make sure everything actually
deployed successfully. So, we’ve provisioned
our empty web application, and we provision all the
resources you need to host this with App Service plan that
resource group storage account.>>When we see dot US
it’s on Azure gov.>>All right. So, let’s navigate
back to Visual Studio so, I actually already have
this web app deployed, it’s called the InnovateAppSample. So, let’s actually look at
the application settings. So, let’s actually look at this Innovate AppSample application
that I’ve already deployed. So, if I right-click I’m just
going to browse to the website, it’s just a very
simple boiler template ASP.NET Core web application. So, I just wanted to take
a look at this homepage, it says this is my homepage. So, I’ve configured
this application to actually load whatever is in a specific environment variable to this front homepage. So, currently we see this is my homepage since I actually
go back to Visual Studio Code, and we click on
our application settings, we can see there is
this config value, and this config value
is what is actually populating that, the homepage. So, let’s say I want to change that, so I can actually edit
this application setting. So, let’s say something like, VS Code is awesome.>>And this is actually,
you’re not changing the app settings that
JSON configuration file, you’re actually changing
an environment variable. So, we’re not messing with
any physical files on the server, which is dynamically
changing conflict settings.>>Exactly. And I
just click enter and right away we already see
that it changes there. So, let’s actually go
back to that application. So, right now, this is my homepage
and when we click refresh. All right, we see that change
VS Code is also, I changed that one application variable
and that change has already been shows up in
my deployed web application.>>All right, okay. Looks good. So, we’ve seen a lot of
awesome features with Azure app servers running
in Azure Government in, it’s smart enough to know this
is the URL and Azure Gov, the Azure gov portal. So, it’s really nice to
see how well that works, let’s look at some of
these other extensions you have installed in your VS Code
instance for Azure Government.>>So, let’s take a look at
our functions extension. So, I’m going to load
that up and here we can see I already have some function applications that
I’ve deployed in my subscription. So, this folder icon we
see right over here, it allows us to create a new project. This is just an empty folder
that I’ve created, and it’s going to populate with this function app project that
I’m going to create locally. So, I’ve created it, I can select the language I want, let’s just use C# and we can
see here on the bottom right, it’s creating the new project. All right. So, it says it’s
finished creating that project. So, let’s actually go back and we see this “Create
Function” icon right here. So, I’m going to actually
create a function into that same function
application folder. So, I’m going to
click on that folder, and I’m going to just choose a simple “HttpTrigger” and
provide a simple name, provide a name space and I’m going
to also have it be anonymous.>>So, it’s creating a physical file on your local machine somewhere?>>Yes.>>In that empty folder
you showed us, no longer empty now, I presume.>>Exactly. So, if we actually go to, I actually have that folder
open in my “VS Code,” we can see this is the HTTP trigger
function we have just created.>>So, I’ve done this in Visual Studio where I can
run a function locally, but we can also run it right
from VS Code just opening a directory in VS Code like we’re
used to dealing with VS Code.>>Exactly, exactly.>>So, let’s actually click “Debug.” All right. So, our build
has succeeded, we can see the “Func host
start command,” which means Azure functions
is starting up.>>I can do this in
a cross-platform way, usually in VS Code to start a.net core application
even in the C Sharp, this could run on a Mac if I want it, and test everything locally
before even deploying to Azure.>>Exactly, exactly. Now, we can see that we have
that URL that has been generated, it’s running on localhost. So, let’s actually go to that link.>>Oh, It’d be nice to have, if Visual Studio had that feature where
I could just, URL and [inaudible].>>I was just thinking that actually. So, that template function that we just created is
actually looking for the name query parameter
and it’s just going to print out whatever I’ve given it. So, it says, “Hello, Yuj.”>>Okay. Cool.>>All right. So, we verified that our function is running locally, so I’m going to “Disconnect.” Now that we verify that
it’s running locally, I want to deploy it to
my Azure Government subscription. So, I’m going to “Deploy
to Function App” that I’ve already created. Yeah, “Deploy.”>>We can see it’s spinning
there on the deployment.>>Yeah.>>You can see it’s
actually in process.>>All right. So,
our deployment has completed. So, let’s actually open up our “Function Application” and
we can see the function that we just deployed to this empty function
application, it’s there now. So, another really cool feature is, I just right-clicked
on that “Function Application” and similar to
the App Service Extension, it has these other options
where you can manage and “Start” and “Restart,”
“Delete the Function App.” I want to actually look at the “Streaming Logs” from
my function application.>>So, I can actually get the streaming logs from
Azure in the Cloud.>>Yes.>>But just shown to me right
here locally in VS Code.>>Exactly. So you
don’t need to go to the “Portal” and click “Start.” So, we see we’ve connected
to the log streaming service and I’m actually
going to, for my function, I can “Copy my Function URL”
that I’ve just deployed, so let’s copy that, navigate back
to the browser, paste that in.>>Now you can see it’s running in Azure Gov and got that.us extension.>>Yeah.>>Yeah.>>Yeah. I’m going
to put in that name query parameter again. All right. So, we see that it’s running, the function has run successfully. Now, let’s actually check
that in the logs. All right. So, we see in the logs that our trigger function was
executed and processed requests.>>Awesome. So, we got
all real-time results. I can do everything in VS Code. It’s amazing too because we’ve
talked about how VS Code is such a more lightweight
editor experience than Visual Studio, let’s be honest. It’s been around for years,
it’s pretty heavyweight.>>Yeah.>>Despite being
a lightweight editor, I can do all these rich activities
like debug locally, tests local, manage my resources, deploy to Azure, view streaming logged real-time from Azure,
I mean, that’s pretty cool.>>Exactly. You can delete things, you can start, stop
applications as well, yeah. All right. So next, let’s look
at the “Storage” extension. So, it has just loaded all my storage accounts
and if we click into it, we can actually see this “Blob
Containers” that I have, and I can actually click
into this “Blob Container.” We can actually see
the files that are in there. So, let’s actually just
open this simple text file.>>Oh. So, this is interesting. So, we are always used to using
the Azure Storage Explorer. But what you just did right
there with so subtle. You are opening and looking at that text file right within VS Code, I can’t do that in Storage Explorer.>>Exactly, exactly. If these files
are things like text files, you might just want to
edit it within VS Code.>>Oh, okay. So what you’re saying is not only can I open it in VS Code, look at it, but I can’t
edit it real time? Okay. Now, you’ve got my attention.>>Right. So, let me just make like, let’s say this is a simple change.>>Okay.>>I actually have
my settings to auto save.>>So, that’s why I
got it, popped up.>>So now, we see it will update this in my container
and I do want that. So let’s “click” upload.>>So, your auto save is probably wait for a thousand milliseconds, saved and it detected the save
said, “Hey, do you want to upload?”>>Exactly, exactly. Then we can see from my output,
it successfully updated. So let’s actually confirm that that text file was
updated successfully. So, I’ve just navigated
to my Storage Explorer, it’s the same blob container and we can just open
up that text file.>>So, It’ll open like
an external tool.>>Yeah.>>In this case, notepad. Okay.>>All right. So, we can see that the change that I made
that wasn’t there before has already been uploaded to the “Blob
Container” in Azure Government.>>All right. Very
nice, very nice. Okay.>>All right. So, let’s again
open up my subscription. You could see these are some
of the databases that I already have and you can actually click into it and see what databases you have and then within the what
collections you have. In the “Documents,” so
you can actually see documents that you have directly
in your VS Code editor.>>So, somewhat similar
experience that we get within Azure Storage Explorer
or if we use Cosmos DB.>>Yeah.>>Okay.>>I just “right-click”
again and there’s options to create collections, delete the database and obviously
add documents to your database.>>Okay.>>So, one of the coolest features of this extension is actually comes with the graph API and being
able to visualize it. So this is a simple
Graph API that I have. So, let’s click on “Graph” and
here we can see it’s nice UI. It is actually like a query explorer. It allows you to query
against your graph database.>>You could actually
issue graph queries. I don’t think I can do that
from Storage Explorer, so that’s pretty cool.>>Yes. Exactly. You will see soon that actually being able to visualize
it is really the cool part.>>Whoa, so this is in
pretty big database.>>Yes it is, it is. It looks very, very confusing. But basically, all it is, it’s basically showing
the relationship between, we have like a bunch of
different organizations and within those organizations, they have different tenants and subscriptions and
different types of offers. So, it’s just showing like the dataset that you might
actually have to deal with. This query that I just ran
is just querying everything.>>Getting everything, yeah.>>Exactly, exactly. So, let’s actually see
what labels I have. So, this is just a JSON
of showing me what exactly am I looking at here because that was a very
difficult graph to look at. So, we can see these are
the different labels we have. We have like agreements, the subscriptions, like these,
like I said the orienta->>It’s like an Azure
deployment kind of thing.>>Yeah. So, it’s exactly what
you said when you sign up for an Azure or an Azure
Government subscription or as a company, you sign up. These are the terms
you’ll have to deal with.>>Okay.>>The organizational, yes.>>Not only the graph queries, but we can actually just see
straight JSON results as well.>>Exactly.>>Okay.>>This is just the
same kind of query, but this is just showing you the actual relationships that
we’re going to be seeing. So, the edges of the graph.>>Got it.>>So, let’s actually
execute this query. So, this query is actually
going to have a graph results. So, we can see that nice
graph visual effect. So, it’s just showing some enterprise offers and how they’re tied to
different subscriptions. So, within an offer there’s
equal subscription. So, this is graphing. As you can see, there’s the arrow, so pointing from the offer
to the subscription.>>You can see the relationships.
You can zoom in, zoom out. You can even move some
of these nodes around and make it a little
easier to view. Okay.>>All right. Now, this query is going to make it
even more smaller. Actually, we just queried for
specific subscription ID and then seeing what relationships
that specific subscription has.>>Okay. So you can
see the organizations and tenants and that sort of thing.>>Right, and you can see the arrows. See how they’re related
to one another.>>Yeah.>>Yeah.>>That’s very cool.>>Exactly.>>You know, as we’ve gone
through these extensions, what strikes me is that we also
have a lot of customers that frankly use both Azure Government
and Azure Public.>>Yes.>>So, the reality is that
these extensions make it really easy to just switch back
and forth because you can say login Azure Government, boom! You’re logged in Azure
Government for everything.>>Right.>>Login to Azure Public? Same thing, it’s really not, few seconds to switch back and forth.>>Exactly, exactly. There’s all these really
cool extensions that you can manage and deploy resources
and debug locally, and like you said connect
this experience that you have in the Cloud with your local
development environment.>>Right. Exactly. So, today, we’ve shown four Azure App Service, Azure functions, Storage, and Cosmos. But actually there’s
a couple more that we also have with Azure Government
and we’ll continue to build that. But, I think this has
given us a good taste on some of the things we
have available today that developers can use today to make
themselves more productive and use the tools that they really love to use on an everyday basis as it is.>>Exactly.>>Right. Cool. All right.
Thanks a lot Yujin. This has been Steve Michelotti with Yujin Hong of the Azure
Government Engineering Team, talking about VS Code extensions in Azure Governments Thanks for watching.




Leave a Reply

Your email address will not be published. Required fields are marked *