{"id":1421,"date":"2020-10-31T12:38:01","date_gmt":"2020-10-31T19:38:01","guid":{"rendered":"http:\/\/blog.nillsf.com\/?p=1421"},"modified":"2020-10-31T12:38:09","modified_gmt":"2020-10-31T19:38:09","slug":"how-to-connect-github-codespaces-to-a-local-visual-studio-code","status":"publish","type":"post","link":"https:\/\/nillsf.com\/index.php\/2020\/10\/31\/how-to-connect-github-codespaces-to-a-local-visual-studio-code\/","title":{"rendered":"How to connect GitHub Codespaces to a local Visual Studio Code"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">I&#8217;m a huge fan of GitHub Codespaces. Codespaces deliver a fully powered and customizable Visual Studio Code (VS Code) instance in the browser. <a href=\"https:\/\/blog.nillsf.com\/index.php\/2020\/10\/19\/first-look-at-github-codespaces\/\">I&#8217;ve started using Codespaces recently to do my Covid analysis<\/a>. It&#8217;s a great tool because I don&#8217;t need to install anything locally, I can simply use Codespaces straight from the browser.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Codespaces open up a lot of possibilities. It enables people without a powerful development machine to get access to cloud-based resources to develop using a fully powered machine. For open-source projects, it would make it more accessible for new contributors to add code to a project. New contributors could focus on writing code immediately, with no need to configure a local workstation. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wouldn&#8217;t it be nice if we could connect to Codespaces from within VS code, without having to use the browser? That&#8217;s what we&#8217;ll explore in this post: How to connect GitHub Codespaces to a local Visual Studio Code. There are 2 steps involved:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Install and configure the Codespaces extension<\/li><li>Connect to and run the Codespace locally<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">To get started, you&#8217;ll need the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/github.com\/features\/codespaces\/signup\">Be accepted in the GitHub Codespaces beta. <\/a><\/li><li>Have VS Code installed locally<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">If you have those two things, let&#8217;s get started:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Install and configure the Codespaces extension<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The first thing that&#8217;s required is to install the Codespaces extension. Look for the &#8220;Visual Studio Codespaces&#8221; extension in VS Code and install it. (Don&#8217;t worry, the <em>Visual Studio<\/em> Codespaces extension works with GitHub Codespaces). <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"\/wp-content\/uploads\/2020\/10\/image-42-1024x768.png\" alt=\"\" class=\"wp-image-1422\" srcset=\"https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-42-1024x768.png 1024w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-42-300x225.png 300w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-42-768x576.png 768w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-42-1536x1152.png 1536w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Install the Codespaces extension<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Next, the extension needs to be configured to work with GitHub. To do this, once the extension is installed, open the settings window:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"\/wp-content\/uploads\/2020\/10\/image-43-1024x768.png\" alt=\"\" class=\"wp-image-1423\" srcset=\"https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-43-1024x768.png 1024w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-43-300x225.png 300w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-43-768x576.png 768w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-43-1536x1153.png 1536w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-43.png 2047w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Open the extension settings<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">In the extension settings, configure the account provider to be GitHub:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"767\" src=\"\/wp-content\/uploads\/2020\/10\/image-44-1024x767.png\" alt=\"\" class=\"wp-image-1424\" srcset=\"https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-44-1024x767.png 1024w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-44-300x225.png 300w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-44-768x576.png 768w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-44-1536x1151.png 1536w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-44.png 2047w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Configure GitHub as the Account Provider<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Once you hit the GitHub button, you&#8217;ll be prompted to log in. Log into GitHub to connect to GitHub:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"\/wp-content\/uploads\/2020\/10\/image-45-1024x768.png\" alt=\"\" class=\"wp-image-1425\" srcset=\"https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-45-1024x768.png 1024w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-45-300x225.png 300w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-45-768x576.png 768w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-45-1536x1152.png 1536w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-45.png 2046w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Log into GitHub<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Once you&#8217;re logged into GitHub, this will link back to VS Code, and configure the extension. With the login done, you can start using your codespaces!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Connect to and run the Codespace locally<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Now that the extension is configured, we can connect to a Codespace. From VS Code, you can either create a new Codespace &#8211; or connect to an existing one. For the purpose of this post, I&#8217;ll connect to an existing one, namely <a href=\"https:\/\/blog.nillsf.com\/index.php\/2020\/10\/19\/first-look-at-github-codespaces\/\">my Covid-19 Codespace<\/a>. To connect to an existing codespace, hover over it and hit the connection button. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"\/wp-content\/uploads\/2020\/10\/image-46-1024x768.png\" alt=\"\" class=\"wp-image-1426\" srcset=\"https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-46-1024x768.png 1024w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-46-300x225.png 300w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-46-768x576.png 768w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-46-1536x1152.png 1536w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-46.png 2043w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Hit the connection button to connect to the remote Codespace<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">This will resume the codespace, and then connect your local VS Code to that Codespace. After about a minute, I could see all my code files, and after opening the Jupyter notebook, I could see the notebook running in my Codespace. Without having to install Python or Jupyter locally:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"744\" src=\"\/wp-content\/uploads\/2020\/10\/image-47-1024x744.png\" alt=\"\" class=\"wp-image-1428\" srcset=\"https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-47-1024x744.png 1024w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-47-300x218.png 300w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-47-768x558.png 768w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-47-1536x1117.png 1536w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-47-2048x1489.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Opening the Jupyter notebook, without having to install Python or Jupyter locally<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">And, this allows me to look at the graphs that I&#8217;m interested in:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"746\" src=\"\/wp-content\/uploads\/2020\/10\/image-48-1024x746.png\" alt=\"\" class=\"wp-image-1429\" srcset=\"https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-48-1024x746.png 1024w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-48-300x218.png 300w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-48-768x559.png 768w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-48-1536x1119.png 1536w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-48-2048x1491.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>The graphs I&#8217;m interested in, in GitHub codespaces.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">And that how you can connect your local VS Code, to a remote codespace.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Summary<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">It is actually pretty amazing how easy it was to connect a local VS Code to Codespaces. Great job by the engineering teams in making this a great experience. Once Codespaces become more common, I can see this really benefit the open-source community. With a Codespace configured for a project\/repo, it would be so much easier to add contributions. No need to configure your own machine with all the binaries\/tools required. You can get started by forking the repo, opening a codespace, and quickly start contributing code. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Great times ahead.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;m a huge fan of GitHub Codespaces. Codespaces deliver a fully powered and customizable Visual Studio Code (VS Code) instance in the browser. I&#8217;ve started using Codespaces recently to do my Covid analysis. It&#8217;s a great tool because I don&#8217;t need to install anything locally, I can simply use Codespaces straight from the browser. Codespaces [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1430,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3,5,31],"tags":[152,52,53,114,55],"class_list":["post-1421","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-devops","category-open-source","category-software-development","tag-codespaces","tag-devops","tag-github","tag-python","tag-software-development"],"jetpack_featured_media_url":"https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/2020-10-31-12_36_10-PowerPoint-Slide-Show-Presentation1.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/nillsf.com\/index.php\/wp-json\/wp\/v2\/posts\/1421","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nillsf.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nillsf.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nillsf.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nillsf.com\/index.php\/wp-json\/wp\/v2\/comments?post=1421"}],"version-history":[{"count":2,"href":"https:\/\/nillsf.com\/index.php\/wp-json\/wp\/v2\/posts\/1421\/revisions"}],"predecessor-version":[{"id":1431,"href":"https:\/\/nillsf.com\/index.php\/wp-json\/wp\/v2\/posts\/1421\/revisions\/1431"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nillsf.com\/index.php\/wp-json\/wp\/v2\/media\/1430"}],"wp:attachment":[{"href":"https:\/\/nillsf.com\/index.php\/wp-json\/wp\/v2\/media?parent=1421"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nillsf.com\/index.php\/wp-json\/wp\/v2\/categories?post=1421"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nillsf.com\/index.php\/wp-json\/wp\/v2\/tags?post=1421"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}