%3CLINGO-SUB%20id%3D%22lingo-sub-1436412%22%20slang%3D%22en-US%22%3EHow%20to%20setup%20Visual%20Studio%20Codespaces%20for%20collaborative%20use%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1436412%22%20slang%3D%22en-US%22%3E%3CP%3EIn%20an%20ever-changing%20climate%2C%20we%20find%20ourselves%20working%20remotely%2C%20many%20organizations%20were%20not%20prepared%20for%20such%20a%20change.%26nbsp%3B%20There%20has%20been%20a%20vast%20cultural%20shift%2C%20but%20also%20a%20technical%20shift.%26nbsp%3B%20IT%20teams%20are%20now%20almost%20entirely%20remote%2C%20prior%20to%20that%20many%20teams%20did%20have%20a%20remote%20option%2C%20but%20primarily%20worked%20onsite%20to%20access%20their%20IT%20systems.%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ERecent%20customer%20projects%20I%20have%20been%20working%20on%20have%20required%20the%20developer%20and%20operations%20teams%20to%20innovate%20remotely%20in%20an%20effort%20to%20deploy%20infrastructure%20as%20code%20and%20develop%20their%20application%20into%20Azure.%20While%20working%20alongside%20these%20customers%2C%20I%20noticed%20they%20were%20writing%20all%20of%20their%20code%20in%20Notepad%2B%2B%20(I%20mean%20everything%20%E2%80%93%20Bash%2C%20HCL%2C%20Go%2C%20PowerShell%2C%20C%23%2C%20etc.).%20Source%20code%20repositories%20are%20not%20always%20used%2C%20and%20development%20is%20done%20locally%20on%20each%20persons%E2%80%99%20laptop.%20Productivity%20was%20severely%20limit%20because%20of%20this%20and%20the%20project%20itself%20seemed%20to%20take%20longer%20than%20it%20should.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EIn%20introducing%20VS%20Code%2C%20the%20customer%20team%20was%20transfixed%20seeing%20all%20the%20features%20that%20enabled%20us%20to%20write%20code%20%3CSPAN%3Ecollaboratively%3C%2FSPAN%3E.%26nbsp%3B%20The%20plethora%20of%20extensions%20and%20the%20ability%20to%20use%20things%20like%20IntelliSense%20and%20LiveShare%20mase%20it%20easier%20for%20us%20to%20work%20together.%20This%20shift%20in%20development%20enabled%20the%20customer%20team%20to%20be%20productive%20from%20any%20location%2C%20share%20their%20sessions%20from%20their%20browser%2C%20and%20maintain%20data%20residency%20and%20compliance%20approval%20from%20the%20security%20and%20operations%20teams.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ETo%20get%20VS%20Codespaces%20setup%20it%E2%80%99s%20really%20quick%20and%20easy.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3COL%3E%0A%3CLI%3EBrowse%20to%20%3CA%20href%3D%22https%3A%2F%2Fonline.visualstudio.com%2Flogin%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fonline.visualstudio.com%2Flogin%3C%2FA%3E%20and%20click%20the%20%E2%80%98sign%20in%E2%80%99%20button.%20Sign%20in%20with%20your%20login%20(this%20will%20be%20your%20Azure%20subscription%20login).%3C%2FLI%3E%0A%3C%2FOL%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3COL%20start%3D%222%22%3E%0A%3CLI%3ECreate%20a%20new%20Codespaces%20environment%20by%20selecting%20%E2%80%98Create%20new%20plan%E2%80%99.%26nbsp%3B%20You%20can%20create%20a%20new%20plan%20from%20the%20blue%20button%20or%20the%20selector%20at%20the%20top%20of%20the%20page.%20Once%20you%20create%20a%20plan%2C%20you%20can%20create%20one%20or%20more%20actual%20codespaces.%26nbsp%3B%20The%20plan%20is%20effectively%20your%20billing%20plan%2C%20where%20your%20codespace%20is%20an%20instance%20(billing%20is%20down%20to%20each%20codespace%20and%20its%20usage).%3C%2FLI%3E%0A%3C%2FOL%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22plan.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F196201iA71140DA3902D107%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20title%3D%22plan.png%22%20alt%3D%22plan.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3COL%20start%3D%223%22%3E%0A%3CLI%3ESelect%20the%20subscription%20and%20location%20where%20you%20would%20like%20to%20run%20your%20plan%20from.%20It%20is%20suggested%20that%20you%20choose%20the%20region%20that%20is%20geographically%20closest%20to%20you%20(or%20where%20your%20organization%20is%20permitted%20to%20deploy%20its%20resources%20into).%20%26nbsp%3BSelect%20%E2%80%98Advanced%20Options%E2%80%99%20and%20give%20your%20plan%20a%20name%2C%20as%20well%20as%20assigning%20it%20its%20own%20resource%20group.%3C%2FLI%3E%0A%3C%2FOL%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22billing.JPG%22%20style%3D%22width%3A%20301px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F196202i0A7F05A470990AA7%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20title%3D%22billing.JPG%22%20alt%3D%22billing.JPG%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3COL%20start%3D%224%22%3E%0A%3CLI%3EOnce%20the%20plan%20is%20created%2C%20you%20can%20create%20your%20Codespace%20by%20selecting%20the%20blue%20box%2C%20%E2%80%98Create%20Codespace%E2%80%99.%26nbsp%3B%20Name%20your%20Codespace%2C%20you%20also%20have%20the%20option%20to%20add%20in%20the%20link%20for%20your%20Git%20repository%20here.%26nbsp%3B%20This%20is%20where%20you%E2%80%99ll%20choose%20your%20%E2%80%98Instance%20Type%E2%80%99%2C%20you%20will%20have%20various%20size%20and%20performance%20options%2C%20varying%20in%20OS%2C%20RAM%20and%20CPU.%26nbsp%3B%20Choose%20the%20performance%20that%20best%20suits%20your%20needs.%20Choose%20%E2%80%98Suspend%20Idle%20Codespace%20after..%E2%80%99%2C%20this%20will%20allow%20you%20to%20suspend%20an%20inactive%20session%20so%20that%20you%20are%20not%20getting%20billed%20for%20the%20Codespace%20being%20online%20and%20using%20compute.%20Once%20you%E2%80%99ve%20chosen%20your%20configuration%2C%20select%20%E2%80%98Create%E2%80%99%3C%2FLI%3E%0A%3C%2FOL%3E%0A%3CP%3E%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%3CSTRONG%3ENote%3A%3C%2FSTRONG%3E%20You%20can%20choose%20a%20smaller%20instance%20and%20scale%20up%20when%20you%20need%20to%2C%20saving%20you%20spend%20on%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3Byour%20Codespace%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22createcodespace.JPG%22%20style%3D%22width%3A%20165px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F196203i2B94FADA6D652567%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20title%3D%22createcodespace.JPG%22%20alt%3D%22createcodespace.JPG%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3COL%20start%3D%225%22%3E%0A%3CLI%3EViola!%26nbsp%3B%20Your%20Codespace%20will%20initialize%20and%20will%20be%20up%20and%20running%20in%20a%20matter%20of%20seconds.%3C%2FLI%3E%0A%3CLI%3ECustomize%20your%20Codespace%2C%20add%20in%20extensions%2C%20and%20code%20away!%3C%2FLI%3E%0A%3C%2FOL%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22newcodespace.JPG%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F196204iFB6EEC3E1C00C6D5%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20title%3D%22newcodespace.JPG%22%20alt%3D%22newcodespace.JPG%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EIt%20is%20really%20that%20easy%20and%20quick%20to%20get%20a%20development%20environment%20up%20and%20running!%20Take%20the%20time%20to%20customize%20the%20environment%20to%20suit%20your%20needs%2C%20it%20will%20make%20developing%20on%20a%20cloud-hosted%20environment%20feel%20much%20more%20natural.%26nbsp%3B%20You%20can%20bring%20your%20collection%20of%20dotfiles%20and%20synchronize%20your%20Git%20identity%2C%20themes%20and%20settings%20so%20that%20every%20environment%20you%20create%20is%20setup%20to%20what%20you%20like.%20You%20can%20also%20tailor%20Visual%20Studio%20Codespaces%20by%20bringing%20your%20own%20Dockerfile%20or%20images%2C%20making%20it%20a%20seamless%20and%20completely%20personal%20setup%20for%20the%20developer.%26nbsp%3B%20Visit%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fdevblogs.microsoft.com%2Fvisualstudio%2Fintroducing-visual-studio-codespaces%2F%3FWT.mc_id%3DITOPSTALK-blog-abartolo%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehere%3C%2FA%3E%26nbsp%3Bto%20further%20learn%20about%20the%20latest%20features%20Visual%20Studio%20Codespaces%20has%20to%20offer.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-TEASER%20id%3D%22lingo-teaser-1436412%22%20slang%3D%22en-US%22%3E%3CP%3EIn%20April%202020%20Microsoft%20announced%20Visual%20Studio%20Codespaces%20(formerly%20Visual%20Studio%20Online).%26nbsp%3B%20With%20the%20announcement%20came%20a%20load%20of%20new%20features.%26nbsp%3BYou%20can%20bring%20your%20collection%20of%20dotfiles%20and%20synchronize%20your%20Git%20identity%2C%20themes%20and%20settings%20so%20that%20every%20environment%20you%20create%20is%20setup%20to%20what%20you%20like.%20You%20can%20also%20tailor%20Visual%20Studio%20Codespaces%20by%20bringing%20your%20own%20Dockerfile%20or%20images%2C%20making%20it%20a%20seamless%20and%20completely%20personal%20setup%20for%20the%20developer.%3C%2FP%3E%3C%2FLINGO-TEASER%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1436412%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EApril%20Edwards%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EAzure%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1477987%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20setup%20Visual%20Studio%20Codespaces%20for%20collaborative%20use%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1477987%22%20slang%3D%22en-US%22%3E%3CP%3Ewe're%20really%20in%20this%20process%20and%20need%20to%20agree%20on%20which%20development%20environment%20we%20all%20going%20to%20be%20working%20in.%20Maybe%20codespace%20gives%20us%20the%20ability%20to%20prepare%20dev%20env%20centrally.%20Thanks%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F204137%22%20target%3D%22_blank%22%3E%40April%20Edwards%3C%2FA%3E%26nbsp%3Bwe%20will%20take%20a%20look%20at%20it.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1480347%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20setup%20Visual%20Studio%20Codespaces%20for%20collaborative%20use%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1480347%22%20slang%3D%22en-US%22%3E%3CP%3EThat's%20great!%26nbsp%3B%20You%20can%20import%20your%20preferred%20settings%20into%20DevSpaces%20and%20takes%20the%20burden%20off%20having%20to%20lockdown%20the%20dev%20environments%20on%20each%20developers%20machine.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1498230%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20setup%20Visual%20Studio%20Codespaces%20for%20collaborative%20use%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1498230%22%20slang%3D%22en-US%22%3E%3CP%3ECan%20you%20explain%20why%20you%20would%20have%20a%20codespace%20(i.e.%20pay%20for%20a%20VM)%20and%20not%20just%20have%20a%20free%20repo%20in%20GitHub%20or%20Azure%20DevOps%20and%20work%20from%20that%20via%20VSCode%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1498258%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20setup%20Visual%20Studio%20Codespaces%20for%20collaborative%20use%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1498258%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F424288%22%20target%3D%22_blank%22%3E%40thommck%3C%2FA%3E%26nbsp%3BSince%20we're%20working%20with%20BYOD%20usages%20models.%20Every%20employee%20is%20using%20a%20different%20dev%20setup.%20With%20CodeSpace%20we%20could%20ensure%20that%20development%20is%20done%20on%20a%20predefined%20centrally%20stored%20setup%20to%20lift%20the%20burden%20of%20incompatibilities.%20As%20well%20we%20could%20do%20this%20with%20a%20good%20set%20of%20test%20before%20commits.%20But%20as%20told%20we%20look%20into%20this%20option%20and%20figure%20out%20what's%20best%20for%20us.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1498264%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20setup%20Visual%20Studio%20Codespaces%20for%20collaborative%20use%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1498264%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F424288%22%20target%3D%22_blank%22%3E%40thommck%3C%2FA%3E%26nbsp%3B%20there%20are%20various%20reasons.%26nbsp%3B%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F561080%22%20target%3D%22_blank%22%3E%40pheeeling%3C%2FA%3E%26nbsp%3Bstated%20what%20his%20team%20uses.%26nbsp%3B%20We%20also%20find%20customers%20lock%20down%20their%20developers'%20machines%20and%20VSCode%20cannot%20launch%20properly.%26nbsp%3B%20Some%20users%20cannot%20run%20VS%20Code%20in%20a%20container%20instance%20due%20to%20local%20resources%20on%20their%20machines.%26nbsp%3B%20Most%20importantly%2C%20we%20see%20the%20consistency%20enabled%20by%20being%20able%20to%20work%20from%20anywhere%20to%20deploy%20your%20code.%20Some%20users%20can%20then%20work%20from%20different%20machines%20and%20BYOD%2FSecurity%20is%20no%20longer%20a%20major%20issue%20as%20it%20can%20be%20secured%20and%20contained%20from%20one%20environment.%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EI%20have%20been%20working%20with%20quite%20a%20few%20customers%20lately%20that%20have%20such%20restrictive%20limits%20on%20their%20developers'%20machines%2C%20that%20they%20couldn't%20write%20their%20code%20effectively.%20This%20has%20been%20an%20awesome%20workaround%2C%20also%20it%20takes%20so%20little%20time%20to%20setup!%3C%2FP%3E%3C%2FLINGO-BODY%3E
Microsoft

In an ever-changing climate, we find ourselves working remotely, many organizations were not prepared for such a change.  There has been a vast cultural shift, but also a technical shift.  IT teams are now almost entirely remote, prior to that many teams did have a remote option, but primarily worked onsite to access their IT systems. 

 

Recent customer projects I have been working on have required the developer and operations teams to innovate remotely in an effort to deploy infrastructure as code and develop their application into Azure. While working alongside these customers, I noticed they were writing all of their code in Notepad++ (I mean everything – Bash, HCL, Go, PowerShell, C#, etc.). Source code repositories are not always used, and development is done locally on each persons’ laptop. Productivity was severely limit because of this and the project itself seemed to take longer than it should.

 

In introducing VS Code, the customer team was transfixed seeing all the features that enabled us to write code collaboratively.  The plethora of extensions and the ability to use things like IntelliSense and LiveShare mase it easier for us to work together. This shift in development enabled the customer team to be productive from any location, share their sessions from their browser, and maintain data residency and compliance approval from the security and operations teams.

 

To get VS Codespaces setup it’s really quick and easy.

 

  1. Browse to https://online.visualstudio.com/login and click the ‘sign in’ button. Sign in with your login (this will be your Azure subscription login).

 

  1. Create a new Codespaces environment by selecting ‘Create new plan’.  You can create a new plan from the blue button or the selector at the top of the page. Once you create a plan, you can create one or more actual codespaces.  The plan is effectively your billing plan, where your codespace is an instance (billing is down to each codespace and its usage).

plan.png

 

  1. Select the subscription and location where you would like to run your plan from. It is suggested that you choose the region that is geographically closest to you (or where your organization is permitted to deploy its resources into).  Select ‘Advanced Options’ and give your plan a name, as well as assigning it its own resource group.

billing.JPG

  1. Once the plan is created, you can create your Codespace by selecting the blue box, ‘Create Codespace’.  Name your Codespace, you also have the option to add in the link for your Git repository here.  This is where you’ll choose your ‘Instance Type’, you will have various size and performance options, varying in OS, RAM and CPU.  Choose the performance that best suits your needs. Choose ‘Suspend Idle Codespace after..’, this will allow you to suspend an inactive session so that you are not getting billed for the Codespace being online and using compute. Once you’ve chosen your configuration, select ‘Create’

         Note: You can choose a smaller instance and scale up when you need to, saving you spend on             your Codespace

createcodespace.JPG

 

  1. Viola!  Your Codespace will initialize and will be up and running in a matter of seconds.
  2. Customize your Codespace, add in extensions, and code away!

newcodespace.JPG

 

It is really that easy and quick to get a development environment up and running! Take the time to customize the environment to suit your needs, it will make developing on a cloud-hosted environment feel much more natural.  You can bring your collection of dotfiles and synchronize your Git identity, themes and settings so that every environment you create is setup to what you like. You can also tailor Visual Studio Codespaces by bringing your own Dockerfile or images, making it a seamless and completely personal setup for the developer.  Visit here to further learn about the latest features Visual Studio Codespaces has to offer.

 

 

5 Comments
Occasional Contributor

we're really in this process and need to agree on which development environment we all going to be working in. Maybe codespace gives us the ability to prepare dev env centrally. Thanks @April Edwards we will take a look at it.

Microsoft

That's great!  You can import your preferred settings into DevSpaces and takes the burden off having to lockdown the dev environments on each developers machine.

New Contributor

Can you explain why you would have a codespace (i.e. pay for a VM) and not just have a free repo in GitHub or Azure DevOps and work from that via VSCode?

Occasional Contributor

@thommck Since we're working with BYOD usages models. Every employee is using a different dev setup. With CodeSpace we could ensure that development is done on a predefined centrally stored setup to lift the burden of incompatibilities. As well we could do this with a good set of test before commits. But as told we look into this option and figure out what's best for us.

Microsoft

@thommck  there are various reasons.  @pheeeling stated what his team uses.  We also find customers lock down their developers' machines and VSCode cannot launch properly.  Some users cannot run VS Code in a container instance due to local resources on their machines.  Most importantly, we see the consistency enabled by being able to work from anywhere to deploy your code. Some users can then work from different machines and BYOD/Security is no longer a major issue as it can be secured and contained from one environment. 

 

I have been working with quite a few customers lately that have such restrictive limits on their developers' machines, that they couldn't write their code effectively. This has been an awesome workaround, also it takes so little time to setup!