Visual Studio in the cloud

You can now use Visual Studio Codespaces to develop your applications with. This means that you can open a browser and start coding. Or you can use VS Code or Visual Studio (available soon) on your local machine and connect that to Visual Studio Codespaces. This is a great way to develop a resource-intensive application on a simple device. You run VS Code on a laptop without much power and Visual Studio Codespaces does the heavy lifting in he cloud.

In this post, we'll use Visual Studio Codespaces to develop a simple Azure Function in a browser.

Prerequisites

If you want to follow along, you'll need the following:

  • An Azure subscription (If you don't have an Azure subscription, create a free account before you begin)

Developing an Azure Function in Visual Studio Codespaces

Let's get started!

  1. Go to https://visualstudio.microsoft.com/services/visual-studio-online/ and click the Get started button or the Sign in button in the top-right corner
  2. Sign in with your Microsoft or GitHub account that is associated with your Azure subscription. The resources that Visual Studio Codespaces uses will show up on your Azure invoice
  3. When you've signed into Visual Studio Codespaces, you get to see and manage your environments. These are environments that can run Visual Studio Codespaces and can have different pricing plans and options. Let's create our first environment by clicking on Create Environment
  4. Because this is the first environment that we create, we also need to create a Billing plan a. Select the Azure Subscription and Location for the Billing plan b. Optionally, select the Name for the Billing plan and the Azure Resource Group that it will be created in c. Click Create to create the Billing plan

(Create a new Billing plan)

  1. Now that we have a Billing plan, we can create an environment in it

    a. Fill in a Name for the environment

    b. Optionally provide a Git Repository that will be connected to the environment. You can leave this blank for now

    c. Select the Instance Type. this is the Virtual Machine that runs your environment

    d. Configure the Suspend idle time for the environment This shuts down the environment when you aren't using it for a certain amount of time. You'll be charged for the VM time when you use the environment, and you'll be chared a much smaller fee when he environment is suspended

    e. Optionally, you can tell the environment to load your Dotfiles, which are files that begin with a period, like .bashrc, .gitignore and .editorconfig

    f. Click Create to create the environment

(Create a new Environment)

After a while, your environment will be ready to use. You can use it from your browser or connect to it from VS Code or Visual Studio (available soon). Click on the name of the environment to open it in the browser.

(Connect to the new environment)

You are now connected to Visual Studio Codespaces in your browser. It looks and feels exactly like VS Code and it has the same capabilities. By default, it has IntelliCode and Live Share enabled and you can install any VS Code extension that you want.

(Visual Studio Codespaces in a browser)

Let's create an Azure Function and run it.

  1. In Visual Studio Codespaces, go to the Extensions tab
  2. Search for the Azure Functions extension a. Install the official Microsoft Azure Functions extension and click reload to reload the environment
  3. We also need the C# extension, so search for C# a. install the official Microsoft C# extension and click reload to reload the environment
  4. We just need one more thing, te Azure Functions Core Tooling. Open the Terminal (Menu > Terminal > New Terminal)
  5. Install the Azure Functions Core tooling by executing the following command in the Terminal:
npm install -g azure-functions-core-tools
1
  1. Next, open the Command Palette (Menu > View > Command Palette)
  2. In the Command Palette, type Azure Functions: Create New Project
  3. Select workspace to store the files for the project in
  4. Select C#
  5. Select HttpTrigger
  6. Fill in a name for the Function and press Enter. This creates a default HttpTrigger Azure Function
  7. Leave the out-of-the-box code and press F5 to start the Function and start debugging. The terminal will show the build progress and will show the URL of the Function
  8. The Azure Function is reachable through a URL and its port is forwarded to your local machine automatically. You can see this in the Remote Explorer

(Port forwarding in Visual Studio Codespaces)

  1. Click on the Azure Function URL in the terminal to open it in your browser. This uses the port forwarding technology to call he Function. Append the URL with ?name=tips to feed the Function a name that it displays on the screen

(Azure Function called from local machine)

You can also open Visual Studio Codespaces from VS Code. Lets try that. Go back to the Visual Studio Codespaces dashboard. Now right-click on the menu of the environment, like in the image below and select Open in VS Code.

(Open Visual Studio Codespaces in VS Code)

When you open Visual Studio Codespaces in VS Code for the first time, you'll be asked to sign in and create a firewall rule and to install a VS Code extension. Once you've done all of that, you can use Visual Studio Codespaces just as you did in the browser. The same code is there. It also has the same extensions installed, you don't have to do that again for your local environment. And when you run the code, it runs in Visual Studio Codespaces and has port forwarding so that you can open the result in your local browser.

(Visual Studio Codespaces in VS Code)

Conclusion

Visual Studio Codespaces provides a full-fledged development environment in the cloud that you can access from your browser, or from your local VS Code or Visual Studio (available soon). It can replace your development Virtual Machine and enables you to do compute-intensive work from a simple machine. Go and check it out!