Visual Studio Online 2019 – Step by step guide

In our previous post on Cloud Migration with Azure Migrate we saw how to assess and migrate existing web applications running on IIS 7.0 to Azure App Server using Azure Migration Assistant Tool. In this post we will look at Visual Studio Online 2019 with a step by step guide, why do we need it and its features as well. On Nov 2019, the public preview of Visual Studio Online 2019 was announced at the Microsoft’s Ignite conference. I hope you are excited so let’s start.

Update April 2020 – As of April 2020, Visual Studio Online has now been renamed as Codespaces. You can find the latest article here.

Why is Visual Studio Online needed?

Now with almost every business going onto the cloud environment, the number of stacks, frameworks, services and resources available has increased exponentially. Teams are increasingly distributed geographically and the deployment strategies are being devised around containers and DevOps. With these kind of features, businesses need a development environment which is cloud-powered and can be accessed from anywhere whether it is through the code editors, integrated development environments or through the browser.

Also feedback from the developer community was taken and it was observed that

  • Heavy CPU intensive processing and data workloads like Artificial Intelligence, Big Data and Machine Learning are demanding more cloud like performance instead of a stand-alone development machine.
  • Products are being developed by teams which are distributed remotely and geographically. Hence on boarding of local resources is an issue. Also developers are accessing code repositories across locations.
  • The number of multiple languages being used in a stack is increasing due to use of micro-services and cloud native development.

What is Visual Studio Online?

The above set of features are available in Visual Studio Online. It is cloud-powered. You can integrate you customized environments with VS Online. It provides a development environment for any long / short term projects using a variety of editors. These can be either Visual Studio, Visual Studio code or you can even work with it using a browser-based code editor. Hence can be accessed from anywhere. Not to mention that other benefits like DevOps are also available.

Features of VS Online

Faster on boarding

Environments can be created and disposed quickly, allowing new resources to on board faster to project environments. You can create a Visual Studio Online environment from you choice of development tool and it will automatically configure the editor, source code, compiler and debugger. You can take full ownership over the environment by defining your own Docker file.

Step towards modern development

The result of the developer feedback resulted in Visual Studio Code Remote Development and subsequently Visual Studio Online. VS Online essentially is an extension of Visual Studio Code Remote Development. Developers can connect to environments from anywhere using either the Visual Studio IDE, Visual Studio Code or the browser-based editor which is included in it.

Performance of the cloud

VS Online environments are hosted on Azure with all the benefits of the cloud and also can scale to meet developer needs.

Tools support

Currently three editors are supported. Our very favorite Visual Studio IDE, Visual Studio Code (by installing the VS Online extension), a browser-based editor. Also there is support for tools like Live Share and IntelliCode.

Tutorials – We will see the following tutorials in this post

  1. VS Online in the browser
  2. VS Online in VS Code
  3. VS Online in Visual Studio

1. Tutorial for VS Online in the browser

Let us do a tutorial on one of the VS Online features which is the ‘VS Online in the browser’

Prerequisite – You will need a Microsoft account and an Azure subscription for all the tutorials mentioned in this post.

Sign-in to VS Online

Browse https://online.visualstudio.com/login and click on sign-in

NOTE: From here till the entire post, all images are taken from https://online.visualstudio.com/ and https://docs.microsoft.com/en-us/azure/

There will be informational dialog boxes, follow them and complete the sign-in process.

Create a VS Online Plan

The first step is to create a VS Online environment for which a ‘Plan’ is required. You can create the same by

  1. Click the blue Create new plan button or
  2. The header contains Create new plan in the Plan Selector menu, click it
visual studio online create new plan

A form will appear where you will need to choose

  • Subscription: Your Azure subscription
  • Resource Group: Your Azure resource group
  • Region: Any below supported region
    • East US
    • Southeast Asia
    • West Europe
    • West US 2
  • Plan Name: Test-VSO-Plan

The plan will be created and will be selected in the Plan Selector.

Create a VS Online Environment

The VS Online environment will be cloud hosted.
To create it, select any of the Create environment buttons in the portal.

visual studio online create environment

Enter the remaining details in the form

  • Environment Name: Test Environment
  • Git Repository: <Enter your git repo details >
  • Put environment to sleep after…: 30 minutes
  • Instance Type: Standard Environment (Linux)
visual studio online fill form details

A tile with the name Test Environment will appear in the portal with a status as Creating.

Connecting to the environment

When the status turns to green Available click Test Environment to connect.

Then open the Readme.md from File Explorer, and then press Ctrl+Shift+v to render the file which is nothing but a markdown file.

Read and follow the instructions in Readme.md

Clean up resources

To delete our test environment, click Test Environment ellipsis and select Delete.

vso delete resources

2. Tutorial for VS Online in VS Code

The previous tutorial was for VS Online in the browser. In this one we will learn about VS Code and how we can use it with VS Online.

Installation of VS Code

VS code needs to be installed. You can download and install the same from https://code.visualstudio.com/download

Sign-in to VS Online

Once in VS code IDE, press F1. Then select VS Online: Sign In from the command palette. Follow the instructions in the dialog boxes to complete the sign in process.

Create a VS Online Environment

In the same way that we created and environment in the previous section of the tutorial we will be creating the same in VS Code too.

Select Create New Environment button on the VS Online title bar in the side bar where the Remote Explorer is there.

vso create new environment

Input following details in the dialog boxes:

  • Name: Test Environment
  • Git Repository: <Enter your git repo details >
  • Auto-suspend Setting: 30 minutes
  • Azure Subscription: Your Azure subscription
  • Instance Type: Standard Environment (Linux)

The below notification will appear
Creating environment: Test Environment. On completion it will change to Environment created: Test Environment, press the Connect button.

Connecting to the environment

On pressing Connect button, you will be connected to the cloud-hosted environment Test Environment. Then open the Readme.md from File Explorer, and then press Ctrl+Shift+v to render the file which is nothing but a markdown file.

Read and follow the instructions in Readme.md

Clean up resources

To delete our test environment, right click Test Environment in the VS Online panel of the Remote Explorer and select Delete.

3. Tutorial for VS Online in Visual Studio

As of Nov 2019, Visual Studio’s support for Visual Studio Online is only in Private Preview. Hence if the user needs to access to the Private Preview, they need to sign up at https://aka.ms/vsfutures-signup

Note that the above link might be not available further with time as the preview is only for a limited period until it is generally released.

Important Note

As of Nov 2019, Visual Studio Online is in public preview as mentioned at Microsoft Ignite. This means there will be more feedback and Visual Studio Online will become even better.

Summary

This was a very detailed post on Visual Studio Online 2019. In this post we saw why Visual Studio Online 2019 was needed and the new features of VS Online. We also learnt the three tutorials on how we can use VS Online in the browser, with VS Code and Visual Studio. Some of the features are still in preview hence they will be enhanced based on the feedback from users. I hope you have learnt something new and enjoyed this post. So do come back and don’t forget to share.

Hitesh Boricha

I have a little over a decade experience in the IT industry. Having worked in various roles in this industry, I am passionate about technology.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.