{"id":1393,"date":"2020-10-19T14:57:48","date_gmt":"2020-10-19T21:57:48","guid":{"rendered":"http:\/\/blog.nillsf.com\/?p=1393"},"modified":"2020-10-19T14:57:51","modified_gmt":"2020-10-19T21:57:51","slug":"first-look-at-github-codespaces","status":"publish","type":"post","link":"https:\/\/nillsf.com\/index.php\/2020\/10\/19\/first-look-at-github-codespaces\/","title":{"rendered":"First look at GitHub Codespaces"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">GitHub Codespaces is a way to get a fully powered Visual Studio Code experience in the browser. It&#8217;s your cloud-enabled development machine, without needing anything but a web browser. It&#8217;s currently in beta and I got access a couple weeks ago. Today, I wanted to give it a spin.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Rather than provide a simple demo, I actually had a use case for this. I run some of my own <a href=\"https:\/\/blog.nillsf.com\/index.php\/2020\/07\/21\/how-im-doing-my-own-covid-19-data-analysis-using-jupyter-python-pandas-and-matplotlib\/\">COVID-19 analysi<\/a>s in the Bay Area. I used to run this on Azure Notebooks, which is discontinued (never made it out of preview). So, I&#8217;ll be taking <a href=\"https:\/\/github.com\/NillsF\/blog\/blob\/master\/COVID-19-python\/COVID-19.ipynb\">my notebook<\/a> and run it on GitHub Codespaces.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Getting started<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To get started, I spun up <a href=\"https:\/\/github.com\/NillsF\/covid-jupyter\">a new repo<\/a> to host the Codespace. I could have done this on the repo of my blog itself but decided on a new dedicated repo.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"790\" height=\"1024\" src=\"\/wp-content\/uploads\/2020\/10\/image-23-790x1024.png\" alt=\"\" class=\"wp-image-1394\" srcset=\"https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-23-790x1024.png 790w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-23-231x300.png 231w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-23-768x996.png 768w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-23.png 1102w\" sizes=\"auto, (max-width: 790px) 100vw, 790px\" \/><figcaption>Creating a new repo<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s do nothing now in the repo (aka adding no code at all), and open a CodeSpace:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"540\" src=\"\/wp-content\/uploads\/2020\/10\/image-24-1024x540.png\" alt=\"\" class=\"wp-image-1395\" srcset=\"https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-24-1024x540.png 1024w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-24-300x158.png 300w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-24-768x405.png 768w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-24-1536x810.png 1536w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-24.png 1682w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Opening a new Codespace<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"555\" height=\"543\" src=\"\/wp-content\/uploads\/2020\/10\/image-25.png\" alt=\"\" class=\"wp-image-1396\" srcset=\"https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-25.png 555w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-25-300x294.png 300w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-25-60x60.png 60w\" sizes=\"auto, (max-width: 555px) 100vw, 555px\" \/><figcaption>Creating a new codespace<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Once I clicked the new codespace button, this started initializing the repo and loading vscode. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"281\" src=\"\/wp-content\/uploads\/2020\/10\/image-26-1024x281.png\" alt=\"\" class=\"wp-image-1397\" srcset=\"https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-26-1024x281.png 1024w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-26-300x82.png 300w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-26-768x211.png 768w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-26-1536x421.png 1536w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-26.png 1699w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Initializing the codespace<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"541\" src=\"\/wp-content\/uploads\/2020\/10\/image-27-1024x541.png\" alt=\"\" class=\"wp-image-1398\" srcset=\"https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-27-1024x541.png 1024w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-27-300x158.png 300w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-27-768x406.png 768w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-27-1536x811.png 1536w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-27.png 1708w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>It took a couple seconds for VS Code to load the repo<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"473\" src=\"\/wp-content\/uploads\/2020\/10\/image-28-1024x473.png\" alt=\"\" class=\"wp-image-1399\" srcset=\"https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-28-1024x473.png 1024w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-28-300x139.png 300w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-28-768x355.png 768w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-28-1536x709.png 1536w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-28.png 1711w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Finally, the readme.md loaded.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Configuring the workspace<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">What we had in the getting started experience was an out-of-the box codespace. In my case, I want to configure it for Python3 and Jupyter Notebooks. Typically, to configure your codespace, you&#8217;ll use three files:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Dockerfile: codespaces create a container to run your Codespace in. In the Dockerfile you can start from the right image, and install the required tools for you. <\/li><li>devcontainer.json: Used for codespaces configuration.<\/li><li>.vscode\/settings.json: Used for configuration of VS Code.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">In my case, I&#8217;m lucky that Microsoft did some of the work already for me with a pre-configured <a href=\"https:\/\/github.com\/microsoft\/vscode-dev-containers\/tree\/master\/containers\/python-3-anaconda\">Python3-anaconda<\/a> system that has Jupyter notebooks built-in. To use this configuration for my Codespaces, I&#8217;ll copy-paste all the documents I need in my git repo. I&#8217;ll do all of this from within the Codespace terminal (that&#8217;s the point, right?)<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>cd ..\ngit clone https:\/\/github.com\/microsoft\/vscode-dev-containers.git\ncp -rT vscode-dev-containers\/containers\/python-3-anaconda\/ covid-jupyter<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This makes the files available in my repo. It did overwrite my README.md file, which I&#8217;ll revert in the vscode git pane:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"575\" height=\"659\" src=\"\/wp-content\/uploads\/2020\/10\/image-29.png\" alt=\"\" class=\"wp-image-1400\" srcset=\"https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-29.png 575w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-29-262x300.png 262w\" sizes=\"auto, (max-width: 575px) 100vw, 575px\" \/><figcaption>Discarding the readme.md changes.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Once that is done, we&#8217;ll add all these changes to the actual GitHub repo rather than the copy in the container (ie. git push. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"508\" height=\"687\" src=\"\/wp-content\/uploads\/2020\/10\/image-30.png\" alt=\"\" class=\"wp-image-1401\" srcset=\"https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-30.png 508w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-30-222x300.png 222w\" sizes=\"auto, (max-width: 508px) 100vw, 508px\" \/><figcaption>Adding changes.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">This asks about staging the changes for the commit. I simply hit yes to stage all the changes we made.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"786\" height=\"297\" src=\"\/wp-content\/uploads\/2020\/10\/image-31.png\" alt=\"\" class=\"wp-image-1402\" srcset=\"https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-31.png 786w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-31-300x113.png 300w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-31-768x290.png 768w\" sizes=\"auto, (max-width: 786px) 100vw, 786px\" \/><figcaption>Stage the changes.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Don&#8217;t forget to also push the changes:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"712\" height=\"657\" src=\"\/wp-content\/uploads\/2020\/10\/image-32.png\" alt=\"\" class=\"wp-image-1403\" srcset=\"https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-32.png 712w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-32-300x277.png 300w\" sizes=\"auto, (max-width: 712px) 100vw, 712px\" \/><figcaption>Don&#8217;t forget the git push.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Now that the config files are updated, let&#8217;s restart the codespace. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Running the notebook in the Codespace<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/github.com\/NillsF\/blog\/blob\/master\/COVID-19-python\/COVID-19.ipynb\">I have a notebook<\/a> I use for my own personal covid analysis. I copy-pasted that notebook into the codespace, restarted the codespace (i.e. create a new instance that now uses the new config files we copy-pasted in), and had it run all cells.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"444\" src=\"\/wp-content\/uploads\/2020\/10\/image-33-1024x444.png\" alt=\"\" class=\"wp-image-1404\" srcset=\"https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-33-1024x444.png 1024w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-33-300x130.png 300w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-33-768x333.png 768w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-33-1536x666.png 1536w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-33-2048x888.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Running all the cells.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">And this generates all the graphs I like to have a look at. For now, these charts make me a little bit happy, since the overall trend lately has been downwards. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"508\" src=\"\/wp-content\/uploads\/2020\/10\/image-34-1024x508.png\" alt=\"\" class=\"wp-image-1407\" srcset=\"https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-34-1024x508.png 1024w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-34-300x149.png 300w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-34-768x381.png 768w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-34-1536x762.png 1536w, https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-34.png 1885w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>The COVID-19 trend in the Bay Area counties is trending downwards.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Summary<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Getting GitHub CodeSpaces running was very easy. The built-in codespace spun up in a couple seconds and was available. There&#8217;s a large library of pre-configured codespace templates that you can use for your specific environment. In my case, I could use the pre-built python-anaconda codespace to continue my COVID-19 analysis. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>GitHub Codespaces is a way to get a fully powered Visual Studio Code experience in the browser. It&#8217;s your cloud-enabled development machine, without needing anything but a web browser. It&#8217;s currently in beta and I got access a couple weeks ago. Today, I wanted to give it a spin. Rather than provide a simple demo, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1396,"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,55],"class_list":["post-1393","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-software-development"],"jetpack_featured_media_url":"https:\/\/nillsfblog.blob.core.windows.net\/media\/2020\/10\/image-25.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/nillsf.com\/index.php\/wp-json\/wp\/v2\/posts\/1393","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=1393"}],"version-history":[{"count":2,"href":"https:\/\/nillsf.com\/index.php\/wp-json\/wp\/v2\/posts\/1393\/revisions"}],"predecessor-version":[{"id":1408,"href":"https:\/\/nillsf.com\/index.php\/wp-json\/wp\/v2\/posts\/1393\/revisions\/1408"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nillsf.com\/index.php\/wp-json\/wp\/v2\/media\/1396"}],"wp:attachment":[{"href":"https:\/\/nillsf.com\/index.php\/wp-json\/wp\/v2\/media?parent=1393"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nillsf.com\/index.php\/wp-json\/wp\/v2\/categories?post=1393"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nillsf.com\/index.php\/wp-json\/wp\/v2\/tags?post=1393"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}