mirror of
https://github.com/LukeHagar/jims-blog.git
synced 2025-12-10 04:20:17 +00:00
10 lines
18 KiB
HTML
10 lines
18 KiB
HTML
<!doctype html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=x-ua-compatible content="ie=edge"><link rel=icon href=/fav.png type=image/png><link rel=preconnect href=https://fonts.googleapis.com><link rel=preconnect href=https://fonts.gstatic.com crossorigin><link rel=preload as=style href="https://fonts.googleapis.com/css2?family=Alata&family=Lora&family=Muli:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Roboto&family=Muli:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"><link rel=stylesheet href="https://fonts.googleapis.com/css2?family=Alata&family=Lora&family=Muli:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Roboto&family=Muli:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" media=print onload='this.media="all"'><noscript><link href="https://fonts.googleapis.com/css2?family=Alata&family=Lora&family=Muli:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Roboto&family=Muli:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel=stylesheet></noscript><link rel=stylesheet href=/css/font.css media=all><meta property="og:title" content="Getting started with GitHub Codespaces"><meta property="og:description" content="Speed up setting up a new dev environment with GitHub codespaces"><meta property="og:type" content="article"><meta property="og:url" content="https://jimbobbennett.dev/blogs/github-codespaces/"><meta property="og:image" content="https://jimbobbennett.dev/blogs/github-codespaces/banner.png"><meta property="article:section" content="blogs"><meta property="article:published_time" content="2022-01-27T00:00:00+00:00"><meta property="article:modified_time" content="2022-01-27T00:00:00+00:00"><meta property="og:site_name" content="JimBobBennett"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://jimbobbennett.dev/blogs/github-codespaces/banner.png"><meta name=twitter:title content="Getting started with GitHub Codespaces"><meta name=twitter:description content="Speed up setting up a new dev environment with GitHub codespaces"><meta name=twitter:site content="@jimbobbennett"><meta name=twitter:creator content="@jimbobbennett"><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css integrity=sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3 crossorigin=anonymous><link rel=stylesheet href=/css/header.css media=all><link rel=stylesheet href=/css/footer.css media=all><link rel=stylesheet href=/css/theme.css media=all><link rel="shortcut icon" type=image/png href=/fav.png><link rel="shortcut icon" sizes=192x192 href=/fav.png><link rel=apple-touch-icon href=/fav.png><link rel=alternate type=application/rss+xml href=https://jimbobbennett.dev/index.xml title=JimBobBennett><script type=text/javascript>(function(e,t,n,s,o,i,a){e[n]=e[n]||function(){(e[n].q=e[n].q||[]).push(arguments)},i=t.createElement(s),i.async=1,i.src="https://www.clarity.ms/tag/"+o,a=t.getElementsByTagName(s)[0],a.parentNode.insertBefore(i,a)})(window,document,"clarity","script","dctc2ydykv")</script><style>:root{--text-color:#343a40;--text-secondary-color:#6c757d;--background-color:#000;--secondary-background-color:#64ffda1a;--primary-color:#007bff;--secondary-color:#f8f9fa;--text-color-dark:#e4e6eb;--text-secondary-color-dark:#b0b3b8;--background-color-dark:#000000;--secondary-background-color-dark:#212529;--primary-color-dark:#ffffff;--secondary-color-dark:#212529}body{background-color:#000;font-size:1rem;font-weight:400;line-height:1.5;text-align:left}</style><meta name=description content="Speed up setting up a new dev environment with GitHub codespaces"><link rel=stylesheet href=/css/index.css><link rel=stylesheet href=/css/single.css><link rel=stylesheet href=/css/projects.css media=all><script defer src=/fontawesome-5/all-5.15.4.js></script><title>Getting started with GitHub Codespaces | JimBobBennett</title></head><body class=light onload=loading()><header><nav class="pt-3 navbar navbar-expand-lg"><div class="container-fluid mx-xs-2 mx-sm-5 mx-md-5 mx-lg-5"><a class="navbar-brand primary-font text-wrap" href=/><img src=/fav.png width=30 height=30 class="d-inline-block align-top">
|
|
JimBobBennett</a>
|
|
<button class=navbar-toggler type=button data-bs-toggle=collapse data-bs-target=#navbarContent aria-controls=navbarContent aria-expanded=false aria-label="Toggle navigation"><svg aria-hidden="true" height="24" viewBox="0 0 16 16" width="24" data-view-component="true"><path fill-rule="evenodd" d="M1 2.75A.75.75.0 011.75 2h12.5a.75.75.0 110 1.5H1.75A.75.75.0 011 2.75zm0 5A.75.75.0 011.75 7h12.5a.75.75.0 110 1.5H1.75A.75.75.0 011 7.75zM1.75 12a.75.75.0 100 1.5h12.5a.75.75.0 100-1.5H1.75z"/></svg></button><div class="collapse navbar-collapse text-wrap primary-font" id=navbarContent><ul class="navbar-nav ms-auto text-center"><li class="nav-item navbar-text"><a class=nav-link href=/ aria-label=home>Home</a></li><li class="nav-item navbar-text"><a class=nav-link href=/#about aria-label=about>About</a></li><li class="nav-item navbar-text"><a class=nav-link href=/#projects aria-label=projects>Recent Highlights</a></li><li class="nav-item navbar-text"><a class=nav-link href=/blogs title="Blog posts">Blog</a></li><li class="nav-item navbar-text"><a class=nav-link href=/videos title=Videos>Videos</a></li><li class="nav-item navbar-text"><a class=nav-link href=/livestreams title=Livestreams>Livestreams</a></li><li class="nav-item navbar-text"><a class=nav-link href=/conferences title=Conferences>Conferences</a></li><li class="nav-item navbar-text"><a class=nav-link href=/resume title=Resume>Resume</a></li></ul></div></div></nav></header><div id=content><section id=projects><div class="container pt-5" id=list-page><div class="row justify-content-center px-3 px-md-5"><h1 class="text-left pb-2 content">Getting started with GitHub Codespaces</h1><div class="text-left content"><small>|</small>
|
|
Jan 27, 2022</div></div></div></section><section id=single><div class=container><div class="row justify-content-center"><div class="col-sm-12 col-md-12 col-lg-9"><div class=pr-lg-4><article class="page-content p-2"><p><img src=banner.png alt="VS Code running a code space"></p><p>The bane of every new developers life is getting your environment set up to be productive. And when I say new developer - I don’t just mean a dev who is new to a team, but every developer who needs to work on a project they haven’t worked on before.</p><p>Each project has it’s own dependencies, required tools, required libraries, a whole swathe of things that need to be installed, and can in some cases cause problems when projects have conflicting requirements. I certainly remember having to uninstall/reinstall different tooling versions when switching projects, sometimes multiple times a day 😱.</p><p>What if there was a way to fix this? If we could instantly have a pre-configured developer machine with the right tools that we need available at the click of a button? Even better one powered by the cloud so we don’t even need to worry about the power of our local machine, or even be able to access from a tablet or phone? This is where <a href=https://github.com/features/codespaces>Codespaces</a> comes in.</p><p><a href=https://github.com/features/codespaces>GitHub Codespaces</a> are virtual developer machines in the cloud that you access through VS Code, running either on your desktop or in a browser. You can launch any GitHub repo inside a Codespace, with everything you do running in that Codespace - your code lives there, your debug sessions run there, your terminal runs commands there, it’s as if someone teleported a dev machine into your office!</p><h2 id=setting-up-a-codespace>Setting up a Codespace</h2><p>I’ve been recently working on a project for my team that consists of a Python app that I want to run as a Docker container, so I thought it would be fun to configure the repo for this to run inside a Codespace so when anyone else on the team wants to work on it, they won’t have any local configuration to do.</p><h3 id=sign-up-for-codespaces>Sign up for Codespaces</h3><p>Codespaces needs to be set up for a team or organization - mainly so someone can pay! Despite the claims that the best things in life are free, you do need to pay for Codespace.</p><h3 id=open-your-repo-in-a-codespace>Open your repo in a Codespace</h3><p>The first step is to open the repo in Codespaces. From the repo in GitHub, select <strong>Codespaces</strong> from the <strong>Code</strong> button, then select <strong>New codespace</strong>.</p><p><img src=image-2.png alt="The new codespace button"></p><p>This will set up your code in a new Codespace - essentially a blank VM using a default image from GitHub. This image is based off Ubuntu, and comes pre-configured with Python. Node, Docker and other stuff. You can read up on this default image at <a href=https://aka.ms/ghcs-default-image>aka.ms/ghcs-default-image</a>.</p><p>This image contains almost everything I need - the tools are all installed, and VS Code is running with my code in it.</p><p><img src=image-3.png alt="VS Code running in a browser under Codespaces"></p><p>My code is in Python, and this image comes with Python 3.8 installed. It means I can create a Codespace, and run my code in only a few seconds!</p><h2 id=configure-your-codespace>Configure your Codespace</h2><p>The good news is Codespaces are configurable - you can define the details for the container in which your Codespace runs in a <code>devcontainer.json</code> file. I can use this to change the image used, configure what tools are installed, that sort of thing. The big upside of this is to ensure I have the right versions - the default container currently has Python 3.8 installed, but I can create a devcontainer file to set another version.</p><p>I’ll start by creating a devcontainer file. The Codespaces extension is installed for you in VS Code, so you can use the command palette to access options to configure the devcontainer file.</p><p>I started by selecting <strong>Codespaces: Add Development Container Configuration Files….</strong></p><p><img src=image-4.png alt="The Codespaces: Add Development Container Configuration Files command palette option"></p><p>From there I selected <strong>From a predefined container configuration definition…</strong> to use a pre-defined image. I could also use any container I have in my container registry.</p><p><img src=image-5.png alt="The From a predefined container configuration definition option"></p><p>From the images I chose a Python 3 image, and selected Python 3.10.</p><p><img src=image-6.png alt="The image options with a range of images to choose from"></p><p><img src=image-9.png alt="The python 3 version options"></p><p>I then had an option to add a Node version, so selected None as I don’t want Node.</p><p><img src=image-10.png alt="Node version selection"></p><p>Next I could select features to pre-install. I selected Docker as I need support for that.</p><p><img src=image-11.png alt="Selecting the docker option for the container"></p><p>2 things now happen. 2 new files are created in my explorer, <code>devcontainer.json</code> and <code>Dockerfile</code> in a folder called <code>.devcontainer</code>, and a toast will popup suggesting I rebuild the container. When I do this, Codespaces will restart with a new image based off my selections. It takes a while the first time as the container needs to be built.</p><p><img src=image-12.png alt="The toast popup"></p><p>The devcontainer.json file directs the Codespace to use the Dockerfile that was created to define the image. It then includes things like a list of extensions that VS Code will need - in my case PyLance.</p><div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-json data-lang=json><span style=display:flex><span><span style=color:#e6db74>"extensions"</span><span style=color:#960050;background-color:#1e0010>:</span> [
|
|
</span></span><span style=display:flex><span> <span style=color:#e6db74>"ms-python.python"</span>,
|
|
</span></span><span style=display:flex><span> <span style=color:#e6db74>"ms-python.vscode-pylance"</span>
|
|
</span></span><span style=display:flex><span>]<span style=color:#960050;background-color:#1e0010>,</span>
|
|
</span></span></code></pre></div><p>I could and any more extensions here if I wanted, such as the Docker extension.</p><p>I could also edit these files to create a virtual environment, install Python packages, that sort of thing - though I’m not sure I’d need a virtual environment as my container will only be used to develop from this repo, so I could install packages globally and not worry.</p><h3 id=check-in-your-files>Check in your files</h3><p>Once you are happy with your dev container setup, you can then check the .devcontainer folder and all it’s contents into your repo. This will then be used by anyone who creates a Codespace for your repo!</p><h2 id=learn-more>Learn more</h2><p>If you want to learn more, check out the Codespaces docs - <a href=https://docs.github.com/codespaces>docs.github.com/codespaces</a>. There was also some great videos on it from GitHub Universe, this particular one by <a href=https://twitter.com/2PercentSilk>Allison Weins</a> and Bailey Brooks works through the configuration of Codespaces.</p><div style=position:relative;padding-bottom:56.25%;height:0;overflow:hidden><iframe src=https://www.youtube.com/embed/X9Z-rUixnzk style=position:absolute;top:0;left:0;width:100%;height:100%;border:0 allowfullscreen title="YouTube Video"></iframe></div></article></div></div><div class="col-sm-12 col-md-12 col-lg-3"><div class=sticky-sidebar><aside class=toc><h5>Table Of Contents</h5><div class=toc-content><nav id=TableOfContents><ul><li><a href=#setting-up-a-codespace>Setting up a Codespace</a><ul><li><a href=#sign-up-for-codespaces>Sign up for Codespaces</a></li><li><a href=#open-your-repo-in-a-codespace>Open your repo in a Codespace</a></li></ul></li><li><a href=#configure-your-codespace>Configure your Codespace</a><ul><li><a href=#check-in-your-files>Check in your files</a></li></ul></li><li><a href=#learn-more>Learn more</a></li></ul></nav></div></aside><aside class=tags><h5>Tags</h5><ul class="tags-ul list-unstyled list-inline"><li class=list-inline-item><a href=https://jimbobbennett.dev/tags/github target=_blank>github</a></li><li class=list-inline-item><a href=https://jimbobbennett.dev/tags/codespaces target=_blank>codespaces</a></li><li class=list-inline-item><a href=https://jimbobbennett.dev/tags/vscode target=_blank>vscode</a></li><li class=list-inline-item><a href=https://jimbobbennett.dev/tags/python target=_blank>python</a></li><li class=list-inline-item><a href=https://jimbobbennett.dev/tags/container target=_blank>container</a></li></ul></aside></div></div></div><div class=row><div class="col-sm-12 col-md-12 col-lg-9 p-4"><div id=disqus_thread></div><script>var disqus_config=function(){this.page.url="https://jimbobbennett.dev/blogs/github-codespaces/",this.page.identifier="24a5e3e19757bc924edba49cfea32e8e"};(function(){if(window.location.hostname=="localhost")return;var e=document,t=e.createElement("script");t.src="https://jimbobbennett.disqus.com/embed.js",t.setAttribute("data-timestamp",+new Date),(e.head||e.body).appendChild(t)})()</script><noscript>Please enable JavaScript to view the <a href=https://disqus.com/?ref_noscript>comments powered by Disqus.</a></noscript></div></div></div><button class="p-2 px-3" onclick=topFunction() id=topScroll>
|
|
<i class="fas fa-angle-up"></i></button></section><script>var topScroll=document.getElementById("topScroll");window.onscroll=function(){scrollFunction()};function scrollFunction(){document.body.scrollTop>20||document.documentElement.scrollTop>20?topScroll.style.display="block":topScroll.style.display="none"}function topFunction(){document.body.scrollTop=0,document.documentElement.scrollTop=0}</script></div><footer><div class="container py-4"><div class="row justify-content-center"><div class="col-md-4 text-center">© 2023 All Rights Reserved</div></div></div></div></footer><script src=https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js integrity=sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13 crossorigin=anonymous></script>
|
|
<script>document.body.className.includes("light")&&(document.body.classList.add("dark"),localStorage.setItem("pref-theme","dark"))</script><script>let loadingIcons;function loading(){myVar=setTimeout(showPage,100)}function showPage(){try{document.getElementById("loading-icons").style.display="block"}catch{}}</script><script>function createCopyButton(e,t){const n=document.createElement("button");n.className="copy-code-button",n.type="button",n.innerText="Copy",n.addEventListener("click",()=>copyCodeToClipboard(n,e,t)),addCopyButtonToDom(n,e)}async function copyCodeToClipboard(e,t,n){const s=t.querySelector("pre > code").innerText;try{n.writeText(s)}finally{codeWasCopied(e)}}function codeWasCopied(e){e.blur(),e.innerText="Copied!",setTimeout(function(){e.innerText="Copy"},2e3)}function addCopyButtonToDom(e,t){t.insertBefore(e,t.firstChild);const n=document.createElement("div");n.className="highlight-wrapper",t.parentNode.insertBefore(n,t),n.appendChild(t)}if(navigator&&navigator.clipboard)document.querySelectorAll(".highlight").forEach(e=>createCopyButton(e,navigator.clipboard));else{var script=document.createElement("script");script.src="https://cdnjs.cloudflare.com/ajax/libs/clipboard-polyfill/2.7.0/clipboard-polyfill.promise.js",script.integrity="sha256-waClS2re9NUbXRsryKoof+F9qc1gjjIhc2eT7ZbIv94=",script.crossOrigin="anonymous",script.onload=function(){addCopyButtons(clipboard)},document.querySelectorAll(".highlight").forEach(e=>createCopyButton(e,script)),document.body.appendChild(script)}</script></body></html> |