Posts in the 'Visual Studio Code' category

The posts below all relate to the topic you selected.

A few months ago I let the community know that I'd be deprecating some features from the Azure Tools for Visual Studio Code. Some amazing new extensions have appeared in the Azure category of the Visual Studio Marketplace that make it easy and fun to party with Azure. With the great work that's getting done by folks in the Visual Studio Code Azure Tools team, I think it's safe to say that full deprecation is in order.

Why? What's the deal?

To make it as short and sweet as possible, I don't want to confuse anyone who is looking in the marketplace for the real Azure tools. This extension has been in the marketplace for a long time, and as a result of frequent updates at our beginning, we've had a great running and our download count has gotten pretty great. We wholly appreciate the great feedback, contributions, and issues we've received on the extension.

I started this extension with a few goals:

  1. Learn more about the Node.js SDK.
  2. Use the Node.js SDK with the VS Code extensibility API.
  3. Have a tool I could use to do things I have to do frequently when I'm building stuff in Azure.

The extension definitely gave an opportunity for those learnings, but it also introduced a lot of folks to developing with Azure within VS Code. Since those early beginnings there's been a huge set of investments in enabling Azure developer experiences within VS Code, and I want to make sure customers don't stumble onto our humble beginnings and miss out on the true awesomeness of the official Azure extensions.

When?

I'll remove the extension from the marketplace on April 27th, 2018.

What's Next Here?

Simply - nothing. The original extension's repository will remain intact so developers can learn from the code or clone-and-package it on your own using the VSCE tools for packaging and publishing your own extensions.

Again - thanks for your use of the extension, contributions, and ideas. Please take my advice, try out the new and official extensions for App Service, Cosmos DB, mssql, Azure Functions, IoT - all of it! Happy coding!

 

Visual Studio Code offers some great extensions for use when you're developing your applications on Azure or using Azure resources. You can find the collection of Azure extensions in the Visual Studio Marketplace. I'm investigating ways I can use these extensions together to build apps. This post will walk through how you can use Visual Studio Code to build a set of Docker images. Then those images will be published to the Azure Container Registry, so I can share or deploy them later. I'll use the Docker extension for Visual Studio Code to see the images once they're published.

Starting with the SmartHotel360 Microservices

Given the recent work I've been doing with the SmartHotel360 code and demonstrations, I had the back-end microservices built on my machine, so I'll use those images for this demonstration. You can learn more about SmartHotel360 by watching some of the great videos we've recorded on the Visual Studio Toolbox show with Robert Green. Our demo leader Erika introduces SmartHotel360, then Maria and I talk about the Web & Serverless areas of SmartHotel360 with .NET Core 2 and Azure Functions, and Robert talks to James about the SmartHotel360 mobile apps. We have a few more shows coming, so stay tuned to Visual Studio Toolbox.

Build the Images

The screen shot below shows the SmartHotel360 docker-compose.yml file open in Visual Studio Code. Since I have the Docker extension installed, I can see the base images I've got from other builds on my machine. Note, none of the actual SmartHotel360 microservices are built yet, so none of those images are visible.

No images built

The first step is to run docker-compose build to build all of the images. This will take a few minutes to build the numerous images that comprise all of the SmartHotel360 back-end microservices.

docker-compose build

Once the images are built, they'll show up in the Docker Visual Studio Code extension's tree view. I especially love that this is automatic, and I don't even have to manually refresh the list.

Images visible in VS Code

Composing the Databases

The docker-compose.yml file indicates we'll be creating a PostgreSQL database and a Microsoft SQL Server database. You can learn more interesting things on how to run SQL Server in Containers from the Connect(); 2017 session, Use SQL Server 2017 in Docker containers for your CI/CD process.

I prefer to make sure my data tier services are up first, so I'll run docker-compose up sql-data reviews-data tasks-data in the Visual Studio Code terminal.

Data services building

Once these images are built, I see the containers light up in the Visual Studio Code Docker extension treeview.

Data services contained and running

Now, I'll run a docker-compose up to fire up the remaning images. Each of these provide a specific unit of functionality to the SmartHotel360 public web app, or to the individual mobile apps. If you peruse the code, you'll see Java, Node.js and C# code dispersed all throughout the source. This demonstrates how a team of developers using a variety of technologies and frameworks to isolate their functionality, but share in the construction of a community of dependent microservices.

Building the APIs

Now that the containers are built I can see all of them in the Docker tools for Visual Studio Code. The handy context tools allow for easy management of the images and containers, and the integrated command line gives me a place to enter those frequently-used Docker commands.

APIs and Data services are ready

Deploying to Azure Container Registry (ACR)

I want to make use of Azure Container Registry to store the SmartHotel360 private images, so I can share or deploy them later. I'll use the Docker extension for Visual Studio Code to see the images once they're published.

Below is a screen shot of the SmartHotel360 private container registry, provided as an ACR instance.

SmartHotel360 private registry

Note in particular that the Admin user property is disabled. This setting is documented well, as is implications for using it (or not using it) on docs.microsoft.com. The short story is, I can't really access my registry outside of my cloud resources.

Admin account disabled

As long as I've got this set, I won't be able to see my ACR instances and the repositories they contain.

No registries found

So when I first get started, I'll want to enable Admin user (you can always turn this off later, and passwords can be regenerated whenever you need).

Then I'll use the username and password to publish images from the command line. As I do this, I'll see my container images lighting up in the Azure Registry pane in Visual Studio Code's Docker extension.

Enabling the Admin user

Now my Azure Container Registry (ACR) instances light up, and I can begin using the Docker command line interface from within Visual Studio Code to push images into Azure.

Registry visible

Now I'll enter a few commands into the terminal that will log me into my Azure Container Register instance and allow me to publish a Docker image into ACR. There, it'll be ready for deploymnet to App Service, Azure Container Service, or Azure Kubernetes Service.

Pushing images to ACR

Once the image has been published, you can see it as a repository in the ACR tree view node in the Docker panel in Visual Studio Code.

See the repository in VS Code

Other Ideas for using Visual Studio Code & Azure?

This post shows just one simple thing you can do with Visual Studio Code and Azure together. If you have other ideas you'd like to see, drop me a comment below, or send me a message on twitter to let me know what sorts of things you'd like to see.

 

Visual Studio Code offers some great extensions for use when you're developing your applications on Azure or using Azure resources. You can find the collection of Azure extensions in the Visual Studio Marketplace. I'm investigating ways I can use these extensions together to build apps. This post demonstrates how, when you're developing an Azure Function using Visual Studio Code's Azure Functions extension, you can also use the Azure Storage extension to make configuration a snap.

The Azure Functions extension makes it really easy to create a new Functions project (red arrow) in your workspace's active directory. It also provides a button in the Functions Explorer pane that makes it easy to create new Function files in my project (green arrow).

Function toolbar buttons

In my case, I want to create a Function that wakes up when new blobs are dropped into a blob container. You can learn more about blob-triggered functions on docs.microsoft.com.

Create a blob trigger function

During the handy Function-creation process, I'm asked if I'd like to configure my Function project with the storage account's connection string. I don't have this yet, as I'm still experimenting, so I click the close button.

Skip this

The new Function code opens up in Visual Studio Code, and I'm ready to start coding. At this point I'm curious what'll happen, so I go ahead and hit F5 to start debugging.

Blob Triggered Function code

Debugging immediately throws an error to let me know I should've given it a connection string.

Humorous narrator: If you're like me, you don't always let the tools do their jobs for you, accept the defaults, and pray things will be okay. As a result, I tend to do a lot of configuring (which I later replace with devops fanciness). This "I'll do it later myself" attitude results with my hastily copying connection strings and accidentally pasting them into emails later. Keep reading and I'll save you hours of the repeated process of copying and not-properly pasting your connection string.

The good news is that the Azure Storage tools make it easy to fix the Missing value for AzureWebJobsStorage in local.settings.json error message shown below.

Missing value for AzureWebJobsStorage in local.settings.json error

Whether I forgot to create a Storage account, or didn't have one and wanted to create it later, or I'm migrating from my localhost Storage emulated environment to a live one in Azure, the tools make it easy.

By simply expanding the subscription so I can see all of my Storage Accounts, I can right-click the account I'm after and select the Copy Connection String context menu.

Copy the connection string

The results can be pasted into my local.settings.json file in a jiffy.

Paste the connection string

And with that, I've configured my Azure Function, and it runs just fine in the debugger.

Running fine now

Other Ideas for using Visual Studio Code & Azure?

This post shows just one simple thing you can do with Visual Studio Code and Azure together. If you have other ideas you'd like to see, drop me a comment below, or send me a message on twitter to let me know what sorts of things you'd like to see.

 

Some time has passed since the last update of the Azure Tools for Visual Studio Code, and in that time there have been some great advancements in the extensions available to Azure developers who use Visual Studio Code. Some amazing new extensions have appeared in the Azure category of the Visual Studio Marketplace that make it easy and fun to party with Azure.

V2 will remove some features

The short version is that the official extensions - Azure App Service and Azure Storage - provide much better experiences for their service areas than does our (myself, Christos Matskas, and Ian Philpot) extension. So we're removing the redundant functionality from the Azure Tools for Visual Studio Code in lieu of the official extensions' features. There will be a notice of this change when the extension is updated.

The official extensions are so much easier to use, offer richer experiences and more discoverable features, and the authentication experience is great. Plus, the official extensions share certain components, yet revise independently. Smaller pieces, easier autonomy for the individual feature owners. Yay extensibility!

Future Plans

The great folks in the Azure SDK and Visual Studio Code teams have worked together to create not only a great set of extensions for Azure developers, but they've also given extension authors a common dependency to get started, the Azure Account extension. There's guidance for developers who want to write Azure extensions for Visual Studio Code, too.

With so many improvements in the community of extensions being developed around this great SDK and new directions in how authors contribute Azure features our team has some opportunities ahead for distributing the individual resource management areas into separate, smaller extensions. Obviously, there's a huge benefit to retrofitting our extension with the new common underpinnings, too. We'll keep everyone updated in the README.md updates to the extension, link back to this blog for updates to the extension.

Question - to depend or not?

There are various schools of thought on adding arbitrary dependencies for feature redirection. My personal feelings on this is that I'd be receptive to an extension author who takes a dependency on a later extension that improves/replaces the original feature. But some find this intrusive.

What's your opinion? Leave a comment. Given the potential intrusiveness of taking a dependency on the official extensions, I'll hold off, but given it'd be my own personal preference, I'd implement this next if the community prefers it.

 

Today you can download the new version (v1.2.0) of the Azure Tools for Visual Studio Code (ATVSC). A team of contributors have collaborated, responded to issues reported on our public GitHub repository, and spent some time cleaning up some of the less-than-desirable early code in the extension to make contributions more easy and isolated. This post will describe the new features in v1.2.0. In addition to a doing some refactoring to ease extension contributions, we've added a ton of new features in this version.

Export Template

In 1.2.0 we've added support for exporting existing resource groups to ARM templates saved in your workspace. First, you invoke the Export command using the palette.

Export command

Then you select an existing resource group.

Select a resource group

A few seconds later, the resource group's contents are downloaded as an ARM template and stored into your current workspace's arm-templates folder.

Export command

Note: As of the 1.2.0 release time frame there are a few kinks in the particular Azure API call we're using; certain details of your resources might not be persisted exactly right. You can use the great features contained in the Azure Resource Manager Tools extension (which bundled with this extension) to make tweaks. The API owners are working on making great improvements to this functionality so it'll improve in future releases of the back-end API.

Azure Batch account creation

Christos Matskas, a colleague and fellow Azure speaker rich in the arts of FOSS contributions submitted some great features like Key Vault in 1.1.0, and he continued to contribute in 1.2.0, adding support for Azure Batch.

From within Visual Studio Code you can use the Create Azure Batch command from the palette, shown below, to create new Azure Batch accounts. Future releases may add support for scripting against your Batch account, creating Jobs, and so forth. Feel free to send the team requests for additional Batch features via our GitHub Issues page.

Create Key Vault

Telemetry Collection

This release introduces the collection of basic usage telemetry. We're using Application Insights to collect and understand how customers are using the extension. To disable the collection of telemetry data simply edit set the azure.enableTelemetry configuration setting to false as shown below.

How to disable usage telemetry

Note: No performance degradation has occurred during this addition, and no private customer information is being persisted. Our telemetry code tracks the name of the call being made (like CreateAppService) and the GUID-based subscription id being affected. We capture the subscription ID so we can understand the frequency of customer usage; the ID can't be used to reversely-identify customers. No customer-identifying data, passwords, connection strings, or resource names are being persisted to our telemetry system.

Existing Features

You can learn more about the ATVSC in the initial announcement post or on the ATVSC marketplace page. Here's a bullet list of the other features the tools provide to make it easy for developers to party in the cloud.

  • Azure Key Vault Creation
  • Search the Azure QuickStart Templates GitHub repository
  • Download Azure Resource Manager (ARM) template and parameter files to workspace
  • Uses the Azure Resource Manager Tools extension to simplify the template-editing experience
  • ARM template deployment to live Azure subscription
  • Login with Microsoft Account (@hotmail.com, @live.com, etc.)
  • Login with Azure Active Directory (or "Organizational") account
  • Create App Service Web Apps
  • Create App Service Function Apps
  • Create Storage Accounts
  • Get Storage Account connection string
  • Browse to resource in portal
  • Browse to resource group in portal
  • Support for multiple Azure subscriptions
  • Supports all Azure data centers

Thanks!

Thanks for taking the time to learn about all the new features we've put into the ATVCS. If you're a Visual Studio Code user, take a moment to try the tools out. Send us a GitHub issue if you have any ideas. Your votes or comments are also welcome on the marketplace site, if you're finding the tools useful.

Happy coding!

 

Today I'm excited to officially announce the 1.0.0 release of the Azure Tools for Visual Studio Code extension. This post will summarize the features available in the extension, provide you with links to demonstration videos so you can learn more, and let you know how you can install the extension and get going with it. In seconds you'll be managing your Azure resources and deploying new topologies on a Mac, PC, or Linux development workstation.

Bring Azure Development to Every Platform

The Azure Tools for Visual Studio Code (ATVSC) began as a simple enough idea: Visual Studio Code supports extensions built using, among other languages, Node.js. We have a great Node.js SDK for Azure, so it felt like a natural combination that would deliver Azure developer features to any desktop that supports Visual Studio Code. Even though developers already have great Azure management features via the Azure CLI and XPlat CLI tools for managing resources, Visual Studio offers an integrated experience tailored for the developer. With so many developers using non-Windows workstations to develop for Azure, why should Visual Studio developers be the only ones who have an integrated Azure development and management experience in their code editors?

So I started working on the product and within a few hours was installing a very early prototype on my wife's Apple laptop as she stood behind me with a concerned look on her face wondering why I was typing in a command line and enjoying it.

Minimum Viable Product and Reality

After a few days I'd made some decisions about the extension in order to come up with a tangible list of feature ideas I'd tackle for my initial release:

  • Be built using the Node.js SDK for Azure
  • Target Web, Mobile, API, and Azure Function developers
  • Provide Azure Resource Manager (ARM) template search and deployment features
  • Not persist authentication tokens between Visual Studio Code user sessions
  • Be exposed primarily via the Visual Studio Code command palette

Realistically, I didn't have a lot of time to dedicate to the development so I recruited help, too. My good friends and colleagues Ian Philpot from Atlanta and Anze Vodovnik from Slovenia (who's now in the UK), offered some ideas and coding assistance on a few features in the extension. We also ran some of our ideas by Stuart Leeks, who naturally had some great feedback. During the 1.1.0 release, Christos Matskas got involved and contributed a great list of features like Key Vault and Batch account creation functionality.

All of the folks working on the extension did so in their spare time. We worked for a few hours here and there in the evenings and put this together skunkworks-style. The ATVSC is free-form, open-source, and unsupported aside from the growing community of folks interested in it.

It was great to see an organic interest in my colleagues and from the Visual Studio Code team, namely Chris Dias and Wade Anderson who supported us and gave some ideas. What's interesting is that the time I'd thought I'd need to get things done was far loftier than reality - the Visual Studio Code extension framework and Azure Node SDK are both pretty easy to use, if not elegant in places.

Features

We came up with a great list of features for the 1.0.0 release, which are also listed on the Azure Tools for Visual Studio Code marketplace page.

  • Browser-based login - No logging into the editor directly. Instead, we use device authentication and a browser-based authentication flow to keep the tool less complex. There's no authentication code to manually copy, either - the extension copies the authentication code to your clipboard and directs you to the device login page, where it can be easily pasted, streamlining login.

  • Multiple Azure Subscription support - login once, select any of your subscriptions to manage.

  • Multiple region support - Use the toolbar button or command palette to specify your active data center.

  • Web App Creation - the extension offers a "basic" and "advanced" mode. Basic captures the name of your Web App and then creates a resource group, hosting plan, and app named the same. Advanced mode allows you to specify new or existing resource group, customize the hosting plan and resource group name. Here is a demonstration video on a Mac of developing a .NET Core web app that's deployed to an Azure Web App created using the Azure Tools Visual Studio Code extension.

  • Function App Creation - the extension offers a "basic" and "advanced" mode. Basic captures the name of your Function App and then creates a resource group, hosting plan, and app named the same. Advanced mode allows you to specify new or existing resource group, customize the hosting plan and resource group name. Watch a video here on deploying an Azure Function built using Yeoman templates to a live Azure subscription.

  • Storage Account Features - Create storage accounts directly within Visual Studio Code and retrieve their connection strings for pasting them into configuration files or Azure Key Vault. You can watch a video here on Storage functionality provided in the extension.

  • Azure Resource Manager (ARM) template support - From within Visual Studio Code, search for and download Azure Resource Manager (ARM) templates directly from the QuickStarts repository. The ATVSC takes ships bundled with the Azure Resource Manager Tools, so once you download the templates they're easily editable directly within Visual Studio Code.

  • Azure Resource Manager (ARM) template Deployment - Once you've edited your template and parameters files, these can be deployed directly to Azure using the ARM template deployment features of the Azure SDK. Here is a video (also shown below) demonstrating an end-to-end experience of searching for, downloading, editing, and finally deploying a topology directly to Azure.

Installation

Thanks to Visual Studio Code's built-in extension tab, finding the extension is as easy as searching for "Azure Tools" and then installing the extension.

Installation

Once the extension installs you'll need to restart Code. Then you can login and get started. The login command supports Microsoft Account and Organizational Account login, so you have a pair of authentication options.

Note: If you want to login with a @outlook.com, @live.com, or @hotmail.com account - a.k.a. a "Microsoft Account," you'll need to set the azure.tenantId setting using the File -> Preference -> User or Workspace settings gesture within Visual Studio Code. The screen shot below demonstrates this.

Configuration

What's Next?

At this point we're sure the Azure Tools for Visual Studio code offers a great tool for developer who are already using the Azure portal for managing their resources and the command line tools for provisioning or configuring things during the development or devops lifecycle. Our goal was to enable developers for whom Visual Studio isn't an option with Azure development tools and with provisioning and template capabilities, and this first release delivers that goal.

The extension is available as an open-source project and can be found in the GitHub repository https://github.com/bradygaster/azure-tools-vscode. If you experience any issues or have suggestions or feature requests, use the GitHub repository's Issues page. Of course, contributions are welcome too, and all pull requests will be reviewed carefully.

Enjoy it!

Take a moment and give the extension a spin. We're interested in what you think, how to take it to the next level, and what sort of features you'd like to see next. Happy coding!