DIY Guide to Transform Any Machine into a Codespace

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

忐忑的铁板烧 · CRS (Geotools modules ...· 3 天前 ·

瘦瘦的鸡蛋面 · 米兰城市音频导览：应用下载 - ITALY ...· 1 周前 ·

彷徨的楼梯 · 趣书网txt小说下载网站-趣书网手机版txt ...· 1 月前 ·

才高八斗的闹钟 · AI好，还是传统老家伙好？Microsoft ...· 2 月前 ·

斯文的豆浆 · 媒体聚焦_中百控股集团股份有限公司· 3 月前 ·

礼貌的米饭 · 琅琊石刻---我国仅存的两块秦碑之一 ...· 3 月前 ·

</noscript> <main> <header class="navbar"> <nav class="desktop-only"> <div class="logo-divider"> <a href="/" aria-label="Daytona" class="daytona-logo"> <svg width="117" height="26" viewbox="0 0 414 92" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M50.0398 0L25.601 24.3134V13.9175L15.7263 13.9175L15.7263 37.6592H25.601L25.601 24.3134L32.5835 31.2601L57.0223 6.9467L50.0398 0Z" fill="white"/><path d="M42.8816 21.2853H75.7975V31.1094H42.8816V21.2853Z" fill="white"/><path d="M4.20948 55.6699H18.6175L0 37.1479L6.98251 30.2012L25.7513 48.8738L18.9201 55.6699H33.0109L33.0109 65.4941H4.20948V55.6699Z" fill="white"/><path d="M30.6562 82.2989L50.2913 62.7645L50.2913 77.7741H60.1661V48.3017H50.2913V62.4687L43.4575 55.6699L23.6737 75.3522L30.6562 82.2989Z" fill="white"/><path d="M50.2895 38.0567L72.4008 60.0546L79.3833 53.1079L57.272 31.11L50.2895 38.0567Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M116.722 72.408H131.131C139.284 72.5323 145.411 72.0804 149.767 70.2153C154.186 68.2881 157.298 65.0864 159.102 60.6102C160.969 56.134 161.903 49.6685 161.903 41.2135C161.903 33.3802 161.125 26.8808 159.569 22.4668C158.013 18.0528 155.368 14.7889 151.634 12.6751C147.963 10.4992 142.735 9.06934 135.952 8.38548C132.84 8.07464 129.822 7.91921 126.897 7.91921C124.982 7.87852 122.833 7.89109 120.517 7.90463C119.295 7.91178 118.027 7.91919 116.722 7.9192V72.408ZM145.193 61.263C142.953 62.6929 139.841 63.5321 135.858 63.7808C134.676 63.9052 133.4 63.9362 132.031 63.8741C130.724 63.8119 129.075 63.7187 127.083 63.5943V17.2473C129.697 17.2473 132.56 17.4028 135.672 17.7136C139.841 18.211 143.046 19.2057 145.287 20.6977C147.527 22.1898 149.114 24.49 150.047 27.5985C150.981 30.6448 151.448 34.9344 151.448 40.4675C151.448 46.3113 150.95 50.8808 149.954 54.1757C149.021 57.4085 147.434 59.7709 145.193 61.263Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M170.841 71.6141C173.206 72.4845 176.535 72.9197 180.829 72.9197C184.626 72.9197 187.519 72.4534 189.511 71.5209C191.502 70.5262 193.338 68.7233 195.019 66.1122H195.765V72.4562H204.914V39.4417C204.914 34.9033 204.322 31.4219 203.14 28.9973C201.958 26.5105 199.935 24.7698 197.072 23.7751C194.272 22.7182 190.289 22.1898 185.123 22.1898C180.02 22.1898 176.069 22.656 173.268 23.5886C170.53 24.4589 168.601 25.9821 167.48 28.158C166.36 30.2717 165.609 33.3251 165.609 37.2968H175.975C175.975 34.6857 176.598 32.9139 177.842 31.9814C179.149 31.0489 181.576 30.5826 185.123 30.5826C187.8 30.5826 189.884 30.8624 191.378 31.4219C192.872 31.9814 193.929 32.8828 194.552 34.1262C195.174 35.3696 195.485 37.1414 195.485 39.4417V40.7472H187.551C181.514 40.7472 176.846 41.2757 173.548 42.3325C170.25 43.3272 167.916 45.099 166.547 47.648C165.178 50.1347 164.493 53.6473 164.493 58.1856C164.493 62.0401 164.96 65.0242 165.893 67.138C166.889 69.2517 168.538 70.7438 170.841 71.6141ZM190.351 62.9416C188.609 63.8741 186.088 64.3404 182.79 64.3404C179.554 64.3404 177.344 63.843 176.162 62.8483C174.979 61.8536 174.388 60.0196 174.388 57.3463C174.388 55.1704 174.731 53.5229 175.415 52.4039C176.1 51.2227 177.22 50.3834 178.776 49.8861C180.394 49.3887 182.665 49.1089 185.59 49.0468L195.392 48.9535C195.267 52.9945 194.832 56.103 194.085 58.2789C193.338 60.4548 192.094 62.009 190.351 62.9416Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M302.325 72.9197C296.475 72.9197 291.963 72.1736 288.789 70.6816C285.615 69.1895 283.375 66.6406 282.068 63.0348C280.761 59.429 280.108 54.3001 280.108 47.648C280.108 40.9337 280.761 35.7737 282.068 32.1679C283.375 28.5621 285.615 26.0132 288.789 24.5211C291.963 22.9669 296.475 22.1898 302.325 22.1898C308.175 22.1898 312.655 22.9669 315.767 24.5211C318.941 26.0132 321.181 28.5621 322.488 32.1679C323.857 35.7737 324.542 40.9337 324.542 47.648C324.542 54.3001 323.857 59.429 322.488 63.0348C321.181 66.5784 318.941 69.1274 315.767 70.6816C312.593 72.1736 308.112 72.9197 302.325 72.9197ZM302.325 64.3404C305.561 64.3404 308.019 63.843 309.699 62.8483C311.442 61.8536 312.687 60.175 313.433 57.8126C314.18 55.4502 314.554 52.062 314.554 47.648C314.554 43.1718 314.18 39.7525 313.433 37.3901C312.687 34.9655 311.442 33.2559 309.699 32.2612C308.019 31.2043 305.561 30.6758 302.325 30.6758C299.089 30.6758 296.599 31.2043 294.857 32.2612C293.114 33.2559 291.87 34.9655 291.123 37.3901C290.376 39.7525 290.003 43.1718 290.003 47.648C290.003 52.062 290.376 55.4502 291.123 57.8126C291.87 60.175 293.114 61.8536 294.857 62.8483C296.599 63.843 299.089 64.3404 302.325 64.3404Z" fill="white"/><path d="M327.968 22.6505H337.957V30.3028H338.703C340.259 27.1322 342.002 24.9874 343.931 23.8683C345.922 22.7493 348.785 22.1898 352.519 22.1898C357 22.1898 360.454 22.7804 362.881 23.9616C365.308 25.0806 367.05 26.9768 368.108 29.6501C369.166 32.3233 369.695 36.1467 369.695 41.1202V72.4562H359.707V40.9337C359.707 38.3848 359.427 36.3954 358.867 34.9655C358.307 33.5356 357.342 32.5409 355.973 31.9814C354.604 31.4219 352.644 31.1421 350.092 31.1421C346.918 31.1421 344.46 31.6084 342.717 32.5409C341.037 33.4734 339.824 35.0588 339.077 37.2968C338.33 39.5349 337.957 42.7055 337.957 46.8087V72.4562H327.968V22.6505Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M389.916 72.9197C385.622 72.9197 382.292 72.4845 379.927 71.6141C377.625 70.7438 375.976 69.2517 374.98 67.138C374.046 65.0242 373.58 62.0401 373.58 58.1856C373.58 53.6473 374.264 50.1347 375.633 47.648C377.002 45.099 379.336 43.3272 382.635 42.3325C385.933 41.2757 390.6 40.7472 396.637 40.7472H404.572V39.4417C404.572 37.1414 404.261 35.3696 403.638 34.1262C403.016 32.8828 401.958 31.9814 400.464 31.4219C398.971 30.8624 396.886 30.5826 394.21 30.5826C390.663 30.5826 388.236 31.0489 386.929 31.9814C385.684 32.9139 385.062 34.6857 385.062 37.2968H374.904C374.904 32.9493 375.447 30.2717 376.567 28.158C377.687 25.9821 379.616 24.4589 382.354 23.5886C385.155 22.656 389.107 22.1898 394.21 22.1898C399.375 22.1898 403.358 22.7182 406.159 23.7751C409.021 24.7698 411.044 26.5105 412.226 28.9973C413.409 31.4219 414 34.9033 414 39.4417V72.4562H404.852V66.1122H404.105C402.425 68.7233 400.589 70.5262 398.597 71.5209C396.606 72.4534 393.712 72.9197 389.916 72.9197ZM391.876 64.3404C395.174 64.3404 397.695 63.8741 399.437 62.9416C401.18 62.009 402.425 60.4548 403.171 58.2789C403.918 56.103 404.354 52.9945 404.478 48.9535L394.677 49.0468C391.752 49.1089 389.48 49.3887 387.862 49.8861C386.306 50.3834 385.186 51.2227 384.501 52.4039C383.817 53.5229 383.475 55.1704 383.475 57.3463C383.475 60.0196 384.066 61.8536 385.248 62.8483C386.431 63.843 388.64 64.3404 391.876 64.3404Z" fill="white"/><path d="M248.382 22.5478H238.767L229.324 63.5096H225.887L216.822 22.5478H207.378L215.402 63.1656C216.446 68.4527 221.105 72.2654 226.521 72.2654H228.343L226.302 78.6412C226.201 78.9012 226.107 79.1623 226.013 79.4215C225.194 81.6849 224.427 83.8027 219.986 83.8027H213.8V91.8823L225.264 92C228.721 91.9412 233.064 89.4396 236.295 78.6412L248.382 22.5478Z" fill="white"/><path d="M272.209 72.5809C267.935 72.5809 264.699 72.0182 262.499 70.8928C260.363 69.7675 258.917 68.0794 258.163 65.8287C257.409 63.5155 257.032 60.3582 257.032 56.3569V30.8487H251.196L252.896 22.5961H257.409V12.0927L266.553 12.0927V22.5961H277.947V30.8487H266.553V55.9818C266.553 58.045 266.741 59.6392 267.118 60.7646C267.558 61.8274 268.407 62.6402 269.663 63.2029C270.92 63.7656 272.806 64.0469 275.319 64.0469H277.947V72.5809H272.209Z" fill="white"/></svg> </a> </div> <a href="/dotfiles" class="dotfiles-logo"> <svg width="17" height="16" viewbox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg" slot="icon"><path d="M1.79199 1H15.792V15H1.79199V1Z" stroke="#2ECC71" stroke-width="2"/><circle cx="9" cy="8" r="3" fill="#2ECC71"/></svg> DotFiles Insider </a> <div class="nav-items-menu"> <ul class="nav-items-menu__list"> <li class="nav-items-menu__item"> <a href="/dotfiles/articles" class="nav-items-menu__link"> Articles </a> </li><li class="nav-items-menu__item"> <a href="/dotfiles/guides" class="nav-items-menu__link"> Guides </a> </li><li class="nav-items-menu__item"> <a href="/dotfiles/updates" class="nav-items-menu__link"> Updates </a> </li> </ul> </div> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style><astro-island uid="1Axq0n" prefix="r2" component-url="/_astro/HeaderSideMenuLinks.C9S54t1E.js" component-export="HeaderSideMenuLinks" renderer-url="/_astro/client.DbokQZWz.js" props="{}" ssr="" client="load" opts="{&quot;name&quot;:&quot;HeaderSideMenuLinks&quot;,&quot;value&quot;:true}" await-children=""><div class="header-side-menu"><a href="https://daytona.zapier.app/" target="_blank" class="header-side-menu__link header-side-menu__link-brand-secondary" rel="noreferrer">Get a Demo</a><a href="https://github.com/daytonaio/daytona" target="_blank" class="header-side-menu__link header-side-menu__link-github" rel="noreferrer"><svg width="16" height="16" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 16.42 4.87 20.17 8.84 21.5C9.34 21.58 9.5 21.27 9.5 21V19.31C6.73 19.91 6.14 17.97 6.14 17.97C5.68 16.81 5.03 16.5 5.03 16.5C4.12 15.88 5.1 15.9 5.1 15.9C6.1 15.97 6.63 16.93 6.63 16.93C7.5 18.45 8.97 18 9.54 17.76C9.63 17.11 9.89 16.67 10.17 16.42C7.95 16.17 5.62 15.31 5.62 11.5C5.62 10.39 6 9.5 6.65 8.79C6.55 8.54 6.2 7.5 6.75 6.15C6.75 6.15 7.59 5.88 9.5 7.17C10.29 6.95 11.15 6.84 12 6.84C12.85 6.84 13.71 6.95 14.5 7.17C16.41 5.88 17.25 6.15 17.25 6.15C17.8 7.5 17.45 8.54 17.35 8.79C18 9.5 18.38 10.39 18.38 11.5C18.38 15.32 16.04 16.16 13.81 16.41C14.17 16.72 14.5 17.33 14.5 18.26V21C14.5 21.27 14.66 21.59 15.17 21.5C19.14 20.16 22 16.42 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z" fill="#A3A3A3"/></svg></a></div></astro-island> </nav> <nav class="mobile-navigation"> <div class="logo-divider"> <a href="/" aria-label="Daytona" class="daytona-logo"> <svg width="26" height="26" viewbox="0 0 275 287" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.5584 193.736H114.275V227.925H14.5584V193.736Z" fill="white"/><path d="M148.464 74.076H262.426V108.265H148.464V74.076Z" fill="white"/><path d="M88.6338 84.6127L173.246 0L197.422 24.175L112.809 108.788L88.6338 84.6127Z" fill="white"/><path d="M89.157 170.084L24.175 105.102L0 129.277L64.9819 194.259L89.157 170.084Z" fill="white"/><path d="M174.629 217.911L106.133 286.407L81.9577 262.232L150.454 193.736L174.629 217.911Z" fill="white"/><path d="M174.106 132.44L250.66 208.994L274.835 184.819L198.281 108.265L174.106 132.44Z" fill="white"/><path d="M88.6338 48.434V131.057H54.4451L54.4451 48.434H88.6338Z" fill="white"/><path d="M208.294 168.094V270.66H174.106V168.094H208.294Z" fill="white"/></svg> </a> </div> <a href="/dotfiles" class="dotfiles-logo"> <svg width="17" height="16" viewbox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg" slot="icon"><path d="M1.79199 1H15.792V15H1.79199V1Z" stroke="#2ECC71" stroke-width="2"/><circle cx="9" cy="8" r="3" fill="#2ECC71"/></svg> DotFiles Insider </a> <div class="mobile-navigation__side_menu"> <div class="mobile-navigation__side_menu-container"> <astro-island uid="Z1lJUDf" prefix="r4" component-url="/_astro/MobileMainMenu.CPvFEzSc.js" component-export="MobileMainMenu" renderer-url="/_astro/client.DbokQZWz.js" props="{&quot;extraLinks&quot;:[1,[[0,{&quot;href&quot;:[0,&quot;/dotfiles/articles&quot;],&quot;text&quot;:[0,&quot;Articles&quot;]}],[0,{&quot;href&quot;:[0,&quot;/dotfiles/guides&quot;],&quot;text&quot;:[0,&quot;Guides&quot;]}],[0,{&quot;href&quot;:[0,&quot;/dotfiles/updates&quot;],&quot;text&quot;:[0,&quot;Updates&quot;]}]]],&quot;menuList&quot;:[0],&quot;isHomepage&quot;:[0]}" ssr="" client="load" opts="{&quot;name&quot;:&quot;MobileMainMenu&quot;,&quot;value&quot;:true}" await-children=""><div id="hamburger-menu" class="hamburger "><div class="hamburger-box"><div class="hamburger-inner"/></div><div class="mobile-menu" id="mobileMenu"><ul class="mobile-menu__list"><li class="mobile-menu__item"><a href="/dotfiles/articles" class="mobile-menu__link">Articles</a></li><li class="mobile-menu__item"><a href="/dotfiles/guides" class="mobile-menu__link">Guides</a></li><li class="mobile-menu__item"><a href="/dotfiles/updates" class="mobile-menu__link">Updates</a></li></ul><div class="header-side-menu"><a href="https://daytona.zapier.app/" target="_blank" class="header-side-menu__link header-side-menu__link-brand-secondary" rel="noreferrer">Get a Demo</a><a href="https://github.com/daytonaio/daytona" target="_blank" class="header-side-menu__link header-side-menu__link-github" rel="noreferrer"><svg width="16" height="16" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 16.42 4.87 20.17 8.84 21.5C9.34 21.58 9.5 21.27 9.5 21V19.31C6.73 19.91 6.14 17.97 6.14 17.97C5.68 16.81 5.03 16.5 5.03 16.5C4.12 15.88 5.1 15.9 5.1 15.9C6.1 15.97 6.63 16.93 6.63 16.93C7.5 18.45 8.97 18 9.54 17.76C9.63 17.11 9.89 16.67 10.17 16.42C7.95 16.17 5.62 15.31 5.62 11.5C5.62 10.39 6 9.5 6.65 8.79C6.55 8.54 6.2 7.5 6.75 6.15C6.75 6.15 7.59 5.88 9.5 7.17C10.29 6.95 11.15 6.84 12 6.84C12.85 6.84 13.71 6.95 14.5 7.17C16.41 5.88 17.25 6.15 17.25 6.15C17.8 7.5 17.45 8.54 17.35 8.79C18 9.5 18.38 10.39 18.38 11.5C18.38 15.32 16.04 16.16 13.81 16.41C14.17 16.72 14.5 17.33 14.5 18.26V21C14.5 21.27 14.66 21.59 15.17 21.5C19.14 20.16 22 16.42 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z" fill="#A3A3A3"/></svg></a></div></div></div></astro-island> </div> </div> </nav> <div class="navbar__search">  </div> </header> <section class="article-hero-section"> <div class="article-hero-heading article-hero-heading-border"> <div class="article-hero-heading__upper"> <div class="article-hero-heading__upper__date"> FEB 26 2024 // 3 min read </div> <astro-island uid="Z19rtyn" prefix="r11" component-url="/_astro/ShareDropdown.Bj3vkbvT.js" component-export="ShareDropdown" renderer-url="/_astro/client.DbokQZWz.js" props="{&quot;pathname&quot;:[0,&quot;dotfiles/diy-guide-to-transform-any-machine-into-a-codespace&quot;],&quot;title&quot;:[0,&quot;DIY Guide to Transform Any Machine into a Codespace&quot;],&quot;baseUrl&quot;:[0,&quot;https://www.daytona.io&quot;]}" ssr="" client="idle" opts="{&quot;name&quot;:&quot;ShareDropdown&quot;,&quot;value&quot;:true}" await-children=""><div class="share-dropdown"><button class="share-dropdown__button" type="button"><svg width="16" height="16" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="Icon=share, Size=24px"><path id="Icon" d="M11.2929 2.29289C11.6834 1.90237 12.3166 1.90237 12.7071 2.29289L15.7071 5.29289C16.0976 5.68342 16.0976 6.31658 15.7071 6.70711C15.3166 7.09763 14.6834 7.09763 14.2929 6.70711L13 5.41421V15C13 15.5523 12.5523 16 12 16C11.4477 16 11 15.5523 11 15V5.41421L9.70711 6.70711C9.31658 7.09763 8.68342 7.09763 8.29289 6.70711C7.90237 6.31658 7.90237 5.68342 8.29289 5.29289L11.2929 2.29289ZM4 11C4 9.89543 4.89543 9 6 9H8C8.55228 9 9 9.44772 9 10C9 10.5523 8.55228 11 8 11H6V20H18V11H16C15.4477 11 15 10.5523 15 10C15 9.44772 15.4477 9 16 9H18C19.1046 9 20 9.89543 20 11V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20V11Z" fill="white"/></g></svg><span>Share</span></button><ul class="share-dropdown__list "><li><button type="button"><svg width="16" height="16" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.2 6C16.2 5.44772 16.6477 5 17.2 5C17.8367 5 18.4624 5.12794 19.0714 5.37152C19.7341 5.63661 20.2442 6.03001 20.7071 6.49289C21.17 6.95578 21.5634 7.4659 21.8285 8.12861C22.0721 8.73756 22.2 9.36326 22.2 10C22.2 10.6367 22.0721 11.2624 21.8285 11.8714C21.5667 12.5258 21.1798 13.0314 20.7245 13.4897L19.7399 14.5727C19.7293 14.5844 19.7183 14.5959 19.7071 14.6071L16.5071 17.8071C16.0442 18.27 15.5341 18.6634 14.8714 18.9285C14.2624 19.1721 13.6367 19.3 13 19.3C12.3633 19.3 11.7376 19.1721 11.1286 18.9285C10.4659 18.6634 9.95578 18.27 9.49289 17.8071C9.03 17.3442 8.63661 16.8341 8.37152 16.1714C8.12326 15.5507 8 14.9244 8 14.2C8 13.5633 8.12794 12.9376 8.37152 12.3286C8.63661 11.6659 9.03 11.1558 9.49289 10.6929L10.5929 9.59289C10.9834 9.20237 11.6166 9.20237 12.0071 9.59289C12.3976 9.98342 12.3976 10.6166 12.0071 11.0071L10.9071 12.1071C10.57 12.4442 10.3634 12.7341 10.2285 13.0714C10.0721 13.4624 10 13.8367 10 14.2C10 14.6756 10.0767 15.0493 10.2285 15.4286C10.3634 15.7659 10.57 16.0558 10.9071 16.3929C11.2442 16.73 11.5341 16.9366 11.8714 17.0715C12.2624 17.2279 12.6367 17.3 13 17.3C13.3633 17.3 13.7376 17.2279 14.1286 17.0715C14.4659 16.9366 14.7558 16.73 15.0929 16.3929L18.2761 13.2097L19.2601 12.1273C19.2707 12.1156 19.2817 12.1041 19.2929 12.0929C19.63 11.7558 19.8366 11.4659 19.9715 11.1286C20.1279 10.7376 20.2 10.3633 20.2 10C20.2 9.63674 20.1279 9.26244 19.9715 8.87139C19.8366 8.5341 19.63 8.24422 19.2929 7.90711C18.9558 7.56999 18.6659 7.36339 18.3286 7.22848C17.9376 7.07206 17.5633 7 17.2 7C16.6477 7 16.2 6.55228 16.2 6ZM11.3 7.5C10.9367 7.5 10.5624 7.57206 10.1714 7.72848C9.8341 7.86339 9.54422 8.07 9.20711 8.40711L5.92393 11.6903L4.93994 12.7727C4.92927 12.7844 4.91832 12.7959 4.90711 12.8071C4.56999 13.1442 4.36339 13.4341 4.22848 13.7714C4.07206 14.1624 4 14.5367 4 14.9C4 15.2633 4.07206 15.6376 4.22848 16.0286C4.36339 16.3659 4.57 16.6558 4.90711 16.9929C5.24422 17.33 5.5341 17.5366 5.87139 17.6715C6.26244 17.8279 6.63674 17.9 7 17.9C7.55228 17.9 8 18.3477 8 18.9C8 19.4523 7.55228 19.9 7 19.9C6.36326 19.9 5.73756 19.7721 5.12861 19.5285C4.4659 19.2634 3.95578 18.87 3.49289 18.4071C3.03 17.9442 2.63661 17.4341 2.37152 16.7714C2.12794 16.1624 2 15.5367 2 14.9C2 14.2633 2.12794 13.6376 2.37152 13.0286C2.63328 12.3742 3.02016 11.8686 3.47551 11.4103L4.46006 10.3273C4.47073 10.3156 4.48168 10.3041 4.49289 10.2929L7.79289 6.99289C8.25578 6.53 8.7659 6.13661 9.42861 5.87152C10.0376 5.62794 10.6633 5.5 11.3 5.5C11.9367 5.5 12.5624 5.62794 13.1714 5.87152C13.8341 6.13661 14.3442 6.53 14.8071 6.99289C15.27 7.45578 15.6634 7.9659 15.9285 8.62861C16.1721 9.23756 16.3 9.86326 16.3 10.5C16.3 11.1367 16.1721 11.7624 15.9285 12.3714C15.6664 13.0265 15.279 13.5325 14.823 13.9912L13.7372 15.1757C13.364 15.5828 12.7314 15.6103 12.3243 15.2372C11.9172 14.864 11.8897 14.2314 12.2628 13.8243L13.3628 12.6243C13.3726 12.6136 13.3827 12.6031 13.3929 12.5929C13.73 12.2558 13.9366 11.9659 14.0715 11.6286C14.2279 11.2376 14.3 10.8633 14.3 10.5C14.3 10.1367 14.2279 9.76244 14.0715 9.37139C13.9366 9.0341 13.73 8.74422 13.3929 8.40711C13.0558 8.07 12.7659 7.86339 12.4286 7.72848C12.0376 7.57206 11.6633 7.5 11.3 7.5Z" fill="white"/></svg><span>Copy link</span></button></li><li><a href="https://twitter.com/intent/tweet?url=https://www.daytona.io/dotfiles/diy-guide-to-transform-any-machine-into-a-codespace&amp;text=DIY Guide to Transform Any Machine into a Codespace&amp;via=Daytona" target="_blank" rel="noreferrer"><svg width="16" height="16" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" id="x-icon"><path d="M14.7124 10.6218L21.4133 3H19.8255L14.0071 9.61788L9.35992 3H4L11.0274 13.0074L4 21H5.58799L11.7324 14.0113L16.6401 21H22L14.7121 10.6218H14.7124ZM12.5375 13.0956L11.8255 12.0991L6.16016 4.16971H8.59922L13.1712 10.5689L13.8832 11.5655L19.8262 19.8835H17.3871L12.5375 13.096V13.0956Z" fill="#FFF"/></svg><span>Share on Twitter</span></a></li><li><a href="https://www.facebook.com/sharer/sharer.php?u=https://www.daytona.io/dotfiles/diy-guide-to-transform-any-machine-into-a-codespace" target="_blank" rel="noopener noreferrer"><svg width="16" height="16" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.64154 2.15002H21.3585C21.959 2.15002 22.5 2.69101 22.5 3.29156V21.0085C22.5 21.609 21.959 22.15 21.3585 22.15H3.64154C3.04098 22.15 2.5 21.609 2.5 21.0085V3.29156C2.5 2.69101 3.04098 2.15002 3.64154 2.15002ZM16.7029 13.38H19.4655L19.5856 10.7375H16.7029V8.78594C16.7029 8.03549 16.8528 7.61462 17.8137 7.61462H19.4953L19.5558 5.15185C19.5558 5.15185 18.8054 5.03174 17.7244 5.03174C15.0819 5.03174 13.9106 6.68351 13.9106 8.4554V10.7375H11.959V13.38H13.9106V20.7068H16.7029V13.38Z" fill="white"/></svg><span>Share on Facebook</span></a></li><li><a href="https://www.linkedin.com/sharing/share-offsite/?url=https://www.daytona.io/dotfiles/diy-guide-to-transform-any-machine-into-a-codespace" target="_blank" rel="noreferrer"><svg width="16" height="16" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_27_47)"><path d="M18.3352 18.3387H15.6703V14.1621C15.6703 13.1672 15.6492 11.884 14.2816 11.884C12.893 11.884 12.6785 12.9668 12.6785 14.0883V18.3387H10.0137V9.75H12.573V10.9207H12.6082C12.9668 10.2457 13.8352 9.53203 15.1359 9.53203C17.8359 9.53203 18.3352 11.3109 18.3352 13.6242V18.3387ZM7.00078 8.57578C6.14297 8.57578 5.45391 7.87969 5.45391 7.02539C5.45391 6.17109 6.14297 5.47852 7.00078 5.47852C7.85508 5.47852 8.54766 6.17109 8.54766 7.02539C8.55117 7.87969 7.85508 8.57578 7.00078 8.57578ZM8.34023 18.3387H5.66836V9.75H8.34023V18.3387ZM19.6676 3H4.32891C3.59414 3 3 3.58008 3 4.29727V19.7027C3 20.4199 3.59414 21 4.32891 21H19.6676C20.4023 21 21 20.4199 21 19.7027V4.29727C21 3.58008 20.3988 3 19.6676 3Z" fill="#0077b5"/></g><defs><clippath id="clip0_27_47"><rect width="18" height="18" fill="white" transform="translate(3 3)"/></clippath></defs></svg><span>Share on Linkedin</span></a></li></ul><div class="toast toast-bottom toast-success" id="toastMessage" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast__content-wrapper"><svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.00016 2.66666C5.05464 2.66666 2.66683 5.05448 2.66683 7.99999C2.66683 10.9455 5.05464 13.3333 8.00016 13.3333C10.9457 13.3333 13.3335 10.9455 13.3335 7.99999C13.3335 5.05448 10.9457 2.66666 8.00016 2.66666ZM1.3335 7.99999C1.3335 4.3181 4.31826 1.33333 8.00016 1.33333C11.6821 1.33333 14.6668 4.3181 14.6668 7.99999C14.6668 11.6819 11.6821 14.6667 8.00016 14.6667C4.31826 14.6667 1.3335 11.6819 1.3335 7.99999Z" fill="white"/><path d="M8.00016 6.66666C8.36835 6.66666 8.66683 6.96514 8.66683 7.33333V11.3333C8.66683 11.7015 8.36835 12 8.00016 12C7.63197 12 7.3335 11.7015 7.3335 11.3333V7.33333C7.3335 6.96514 7.63197 6.66666 8.00016 6.66666Z" fill="white"/><path d="M9.00016 4.99999C9.00016 5.55228 8.55245 5.99999 8.00016 5.99999C7.44788 5.99999 7.00016 5.55228 7.00016 4.99999C7.00016 4.44771 7.44788 3.99999 8.00016 3.99999C8.55245 3.99999 9.00016 4.44771 9.00016 4.99999Z" fill="white"/></svg><p class="toast__message">Link copied successfully!</p></div><button class="toast__button"><svg width="16" height="16" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="Icon=close, Size=24px"><path id="Icon" d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z" fill="white"/></g></svg></button></div></div></astro-island> </div> <div class="article-hero-heading__main"> <h1 class="article-hero-heading__main__title">DIY Guide to Transform Any Machine into a Codespace</h1> <a href="/dotfiles/author/nikola-balic" class="author-info"> <figure class="author-info__figure"> <img src="https://www.datocms-assets.com/103916/1704810813-niko_avatar.png?auto=compress%2Cformat&amp;crop=faces&amp;facepad=2.5&amp;fit=facearea&amp;h=256&amp;mask=ellipse&amp;w=256" alt="Nikola Balić" width="256" height="256" loading="lazy" decoding="async"/> </figure> <div class="author-info__info"> <h5 class="author-info__name">Nikola Balić</h5> <span class="author-info__title">Head of Growth</span> </div> </a> </div> </div> </section> <section class="article-body"> <div class="article-body__sidebar"> <div class="article-body__sidebar__container"> <h5 class="article-body__sidebar__title"># Contents</h5> <div class="scroll-spy"> <a href="#prerequisites" class="scroll-spy__link"> Prerequisites </a><a href="#step-1a-provision-linux-server" class="scroll-spy__link"> Step 1a - Provision Linux Server </a><a href="#step-1b-generate-ssh-keys-optional" class="scroll-spy__link"> Step 1b - Generate SSH Keys (optional) </a><a href="#step-2-install-docker" class="scroll-spy__link"> Step 2 - Install Docker </a><a href="#step-3-connect-visual-studio-code-to-remote-environment" class="scroll-spy__link"> Step 3 - Connect Visual Studio Code to Remote Environment </a><a href="#step-4-clone-sample-project" class="scroll-spy__link"> Step 4 - Clone Sample Project </a><a href="#step-5-standardizing-your-development-environment-with-dev-container" class="scroll-spy__link"> Step 5 - Standardizing Your Development Environment with Dev Container </a><a href="#step-6-run-preview-dev-server" class="scroll-spy__link"> Step 6: Run Preview Dev Server </a><a href="#step-7-securely-share-and-expose-your-projects-on-the-internet-behind-a-domain" class="scroll-spy__link"> Step 7 - Securely Share and Expose Your Projects on the Internet Behind a Domain </a><a href="#step-8-code-on-the-go-with-a-web-ide-on-any-device-optional" class="scroll-spy__link"> Step 8 - Code on the Go with a Web IDE on Any Device (optional) </a><a href="#conclusion" class="scroll-spy__link"> Conclusion </a><a href="#step-9-can-we-automate-this" class="scroll-spy__link"> Step 9 - Can we automate this? </a><a href="#follow-daytona-on-github" class="scroll-spy__link"> Follow Daytona on GitHub </a> </div> </div> </div> <div class="article-body-content"> <p><span class="article-first-letter">S</span><span>etting up any Dev Environment is usually painful, but the pain instantly doubles when you have to set it up on a remote machine. But why should you work on a remote machine? </span></p><p><strong>There are many reasons: </strong>the size of the machine (for complex builds, dependencies, data locality, or running large ML/AI models), security, your employer needs the code in their data center, you're on the go with your iPad or Chromebook, or you're just tinkering with a Raspberry Pi. </p><p>No matter your reason, we wanted to make an easy step-by-step guide to let you set up a standardized, collaborative, and secure dev environment – essentially giving you a Codespaces-like experience on any machine.</p><figure class="image-block"><div class="image-block__background"><img class="image-block__image" src="https://www.datocms-assets.com/103916/1708695991-pasted-image-20240223142752.png?auto=compress%2Cformat" alt="Codespaces vs Local dev env"/></div><figcaption class="image-block__caption">Codespaces vs Local dev env</figcaption></figure><p>Setting up a <a rel="noopener" target="_blank" href="https://www.daytona.io/definitions/r/remote-development-environment">remote development environment</a> can streamline your workflow and enhance collaboration. Instead of relying on a proprietary service like <a rel="noopener" target="_blank" href="https://www.daytona.io/definitions/c/codespaces">Codespaces</a>, this guide will walk you through the process of creating your own custom remote dev environment on a Linux server.</p><p>There are many ways to go about it, but for this guide, we will assume you will use Visual Studio Code and leverage <a rel="noopener" target="_blank" href="https://www.daytona.io/definitions/d/docker">Docker</a> <a rel="noopener" target="_blank" href="https://www.daytona.io/definitions/c/containerization">containers</a> to isolate dependencies and services <a rel="noopener" target="_blank" href="https://www.daytona.io/definitions/c/containerization">needed</a> for development.</p><figure class="image-block"><div class="image-block__background"><img class="image-block__image" src="https://www.datocms-assets.com/103916/1708695956-pasted-image-20240223141514.png?auto=compress%2Cformat" alt="This is fine meme"/></div><figcaption class="image-block__caption">This is fine meme</figcaption></figure><h2 id="prerequisites">Prerequisites</h2><p>To follow this guide and set up your own remote dev environment, you will need:</p><ul class="unordered-list-block"><li><p>A Linux server running Ubuntu 20.04+ with at least 2 GB of RAM and 2 CPU cores. This can be a virtual private server (VPS) from a cloud provider or maybe even a Raspberry Pi.</p></li><li><p>Admin/root access to the server to install software.</p></li><li><p>We will assume your local machine runs a MacOS or Linux variant (maybe even a WSL), if you are using Windows be sure to adapt some commands but everything should work as advertised.</p></li><li><p>A Visual Studio Code on your local machine.</p></li><li><p>Basic knowledge of command line interfaces and experience with Docker is helpful.</p></li><li><p>Some courage.</p></li></ul><h2 id="step-1a-provision-linux-server">Step 1a - Provision Linux Server</h2><p>First, you'll need to provision a Linux server that will host your remote development environment.</p><p>While you can repurpose an existing server, starting fresh helps avoid conflicts. Provision an <strong>Ubuntu 20.04</strong> server with <strong>at least 2 GB RAM and 2 CPU cores</strong> from your preferred hosting provider.</p><p>Many cloud providers like AWS, GCP, Azure, and DigitalOcean allow instant provisioning of Ubuntu VPS instances at reasonable prices. Some of them even provide a complimentary initial credit; for instance, Digital Ocean offers credit for the first 60 days.</p><p>For example, Oracle offers a free-tier cloud account that allows you to utilize 4 cores ARM machine and up to 24GB of memory. Just prepare to be patient, as registering and setting up your account will require some effort.</p><p>A Raspberry Pi also works well if you want to save costs and don't need significant compute resources. Install the latest Raspberry Pi OS (formerly Raspbian) on compatible Pi hardware. To be honest, we haven't attempted it, but if you decide to try it, please let us know.</p><p>Once your Linux server is up and running, SSH into it to begin setup.</p><h2 id="step-1b-generate-ssh-keys-optional">Step 1b - Generate SSH Keys (optional)</h2><p>If you haven't already configured your <a rel="noopener" target="_blank" href="https://www.daytona.io/definitions/s/ssh">SSH</a> keys, we'll need to create them to establish a secure connection to the remote server.</p><p>Based on the remote server you're using, you'll need to prepare your <a rel="noopener" target="_blank" href="https://www.daytona.io/definitions/s/ssh-keys">SSH keys</a> for the provisioning process so that you can input them into the dashboard of your preferred cloud provider. Alternatively, you can initially configure your server using a password and then add the SSH keys by following the instructions in the second section below.</p><div class="code-block"><div class="code-block__copy"><div class="toast toast-bottom toast-success" id="feedback-copyButton_t20" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast__content-wrapper"><svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.00016 2.66666C5.05464 2.66666 2.66683 5.05448 2.66683 7.99999C2.66683 10.9455 5.05464 13.3333 8.00016 13.3333C10.9457 13.3333 13.3335 10.9455 13.3335 7.99999C13.3335 5.05448 10.9457 2.66666 8.00016 2.66666ZM1.3335 7.99999C1.3335 4.3181 4.31826 1.33333 8.00016 1.33333C11.6821 1.33333 14.6668 4.3181 14.6668 7.99999C14.6668 11.6819 11.6821 14.6667 8.00016 14.6667C4.31826 14.6667 1.3335 11.6819 1.3335 7.99999Z" fill="white"/><path d="M8.00016 6.66666C8.36835 6.66666 8.66683 6.96514 8.66683 7.33333V11.3333C8.66683 11.7015 8.36835 12 8.00016 12C7.63197 12 7.3335 11.7015 7.3335 11.3333V7.33333C7.3335 6.96514 7.63197 6.66666 8.00016 6.66666Z" fill="white"/><path d="M9.00016 4.99999C9.00016 5.55228 8.55245 5.99999 8.00016 5.99999C7.44788 5.99999 7.00016 5.55228 7.00016 4.99999C7.00016 4.44771 7.44788 3.99999 8.00016 3.99999C8.55245 3.99999 9.00016 4.44771 9.00016 4.99999Z" fill="white"/></svg><p class="toast__message">Code copied successfully!</p></div><button class="toast__button"><svg width="16" height="16" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="Icon=close, Size=24px"><path id="Icon" d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z" fill="white"/></g></svg></button></div><button id="copyButton_t20" data-code="### On your local machine:&#10;&#10;# Open a terminal and generate a keypair:&#10;ssh-keygen -t rsa&#10;&#10;# Save the private and public keys in the default location.&#10;&#10;# Copy the public key:&#10;cat ~/.ssh/id_rsa.pub&#10;&#10;### On the remote server:&#10;&#10;# Log in and create an .ssh folder:&#10;mkdir .ssh&#10;&#10;# Create an authorized_keys file and paste your public key:&#10;nano .ssh/authorized_keys&#10;&#10;# Set permissions:&#10;chmod 700 .ssh&#10;chmod 600 .ssh/authorized_keys" data-copy="true" class="code-block__copy-button"><svg width="17" height="16" viewbox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 1.6C0.5 0.716344 1.21634 0 2.1 0H10.1C10.9837 0 11.7 0.716345 11.7 1.6V4.8H14.9C15.7837 4.8 16.5 5.51634 16.5 6.4V14.4C16.5 15.2837 15.7837 16 14.9 16H6.9C6.01634 16 5.3 15.2837 5.3 14.4V11.2H2.1C1.21634 11.2 0.5 10.4837 0.5 9.6V1.6ZM6.9 11.2V14.4H14.9V6.4H11.7V9.6C11.7 10.4837 10.9837 11.2 10.1 11.2H6.9ZM10.1 9.6V1.6L2.1 1.6V9.6H10.1Z" fill="#A2A2A2"/></svg></button></div><pre class="code-block__content"><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">1</span><span class="token comment" style="color:rgb(106, 153, 85)">### On your local machine:</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">2</span><span class="token plain" style="display:inline-block"> </span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">3</span><span class="token plain"/><span class="token comment" style="color:rgb(106, 153, 85)"># Open a terminal and generate a keypair:</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">4</span><span class="token plain">ssh-keygen </span><span class="token parameter variable" style="color:rgb(156, 220, 254)">-t</span><span class="token plain"> rsa</span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">5</span><span class="token plain" style="display:inline-block"> </span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">6</span><span class="token plain"/><span class="token comment" style="color:rgb(106, 153, 85)"># Save the private and public keys in the default location.</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">7</span><span class="token plain" style="display:inline-block"> </span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">8</span><span class="token plain"/><span class="token comment" style="color:rgb(106, 153, 85)"># Copy the public key:</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">9</span><span class="token plain"/><span class="token function" style="color:rgb(220, 220, 170)">cat</span><span class="token plain"> ~/.ssh/id_rsa.pub</span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">10</span><span class="token plain" style="display:inline-block"> </span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">11</span><span class="token plain"/><span class="token comment" style="color:rgb(106, 153, 85)">### On the remote server:</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">12</span><span class="token plain" style="display:inline-block"> </span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">13</span><span class="token plain"/><span class="token comment" style="color:rgb(106, 153, 85)"># Log in and create an .ssh folder:</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">14</span><span class="token plain"/><span class="token function" style="color:rgb(220, 220, 170)">mkdir</span><span class="token plain"> .ssh</span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">15</span><span class="token plain" style="display:inline-block"> </span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">16</span><span class="token plain"/><span class="token comment" style="color:rgb(106, 153, 85)"># Create an authorized_keys file and paste your public key:</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">17</span><span class="token plain"/><span class="token function" style="color:rgb(220, 220, 170)">nano</span><span class="token plain"> .ssh/authorized_keys</span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">18</span><span class="token plain" style="display:inline-block"> </span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">19</span><span class="token plain"/><span class="token comment" style="color:rgb(106, 153, 85)"># Set permissions:</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">20</span><span class="token plain"/><span class="token function" style="color:rgb(220, 220, 170)">chmod</span><span class="token plain"> </span><span class="token number" style="color:rgb(181, 206, 168)">700</span><span class="token plain"> .ssh</span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">21</span><span class="token plain"/><span class="token function" style="color:rgb(220, 220, 170)">chmod</span><span class="token plain"> </span><span class="token number" style="color:rgb(181, 206, 168)">600</span><span class="token plain"> .ssh/authorized_keys</span></div></pre></div><p>Now, you can SSH into the server without a password using the private key.</p><div class="code-block"><div class="code-block__copy"><div class="toast toast-bottom toast-success" id="feedback-copyButton_t22" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast__content-wrapper"><svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.00016 2.66666C5.05464 2.66666 2.66683 5.05448 2.66683 7.99999C2.66683 10.9455 5.05464 13.3333 8.00016 13.3333C10.9457 13.3333 13.3335 10.9455 13.3335 7.99999C13.3335 5.05448 10.9457 2.66666 8.00016 2.66666ZM1.3335 7.99999C1.3335 4.3181 4.31826 1.33333 8.00016 1.33333C11.6821 1.33333 14.6668 4.3181 14.6668 7.99999C14.6668 11.6819 11.6821 14.6667 8.00016 14.6667C4.31826 14.6667 1.3335 11.6819 1.3335 7.99999Z" fill="white"/><path d="M8.00016 6.66666C8.36835 6.66666 8.66683 6.96514 8.66683 7.33333V11.3333C8.66683 11.7015 8.36835 12 8.00016 12C7.63197 12 7.3335 11.7015 7.3335 11.3333V7.33333C7.3335 6.96514 7.63197 6.66666 8.00016 6.66666Z" fill="white"/><path d="M9.00016 4.99999C9.00016 5.55228 8.55245 5.99999 8.00016 5.99999C7.44788 5.99999 7.00016 5.55228 7.00016 4.99999C7.00016 4.44771 7.44788 3.99999 8.00016 3.99999C8.55245 3.99999 9.00016 4.44771 9.00016 4.99999Z" fill="white"/></svg><p class="toast__message">Code copied successfully!</p></div><button class="toast__button"><svg width="16" height="16" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="Icon=close, Size=24px"><path id="Icon" d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z" fill="white"/></g></svg></button></div><button id="copyButton_t22" data-code="ssh user@your-server-ip" data-copy="true" class="code-block__copy-button"><svg width="17" height="16" viewbox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 1.6C0.5 0.716344 1.21634 0 2.1 0H10.1C10.9837 0 11.7 0.716345 11.7 1.6V4.8H14.9C15.7837 4.8 16.5 5.51634 16.5 6.4V14.4C16.5 15.2837 15.7837 16 14.9 16H6.9C6.01634 16 5.3 15.2837 5.3 14.4V11.2H2.1C1.21634 11.2 0.5 10.4837 0.5 9.6V1.6ZM6.9 11.2V14.4H14.9V6.4H11.7V9.6C11.7 10.4837 10.9837 11.2 10.1 11.2H6.9ZM10.1 9.6V1.6L2.1 1.6V9.6H10.1Z" fill="#A2A2A2"/></svg></button></div><pre class="code-block__content"><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">1</span><span class="token function" style="color:rgb(220, 220, 170)">ssh</span><span class="token plain"> user@your-server-ip</span></div></pre></div><figure class="image-block"><div class="image-block__background"><img class="image-block__image" src="https://www.datocms-assets.com/103916/1708695964-pasted-image-20240223141730.png?auto=compress%2Cformat" alt="SSH struggle meme"/></div><figcaption class="image-block__caption">SSH struggle meme</figcaption></figure><h2 id="step-2-install-docker">Step 2 - Install Docker</h2><p>Since we will leverage Docker to isolate and run services needed for development, Docker Engine is essential. Follow the official <a target="_blank" href="https://docs.docker.com/engine/install/ubuntu/">Docker install directions for Ubuntu</a> to get up and running.</p><p>With SSH set up, let's install Docker on the remote server:</p><div class="code-block"><div class="code-block__copy"><div class="toast toast-bottom toast-success" id="feedback-copyButton_t27" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast__content-wrapper"><svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.00016 2.66666C5.05464 2.66666 2.66683 5.05448 2.66683 7.99999C2.66683 10.9455 5.05464 13.3333 8.00016 13.3333C10.9457 13.3333 13.3335 10.9455 13.3335 7.99999C13.3335 5.05448 10.9457 2.66666 8.00016 2.66666ZM1.3335 7.99999C1.3335 4.3181 4.31826 1.33333 8.00016 1.33333C11.6821 1.33333 14.6668 4.3181 14.6668 7.99999C14.6668 11.6819 11.6821 14.6667 8.00016 14.6667C4.31826 14.6667 1.3335 11.6819 1.3335 7.99999Z" fill="white"/><path d="M8.00016 6.66666C8.36835 6.66666 8.66683 6.96514 8.66683 7.33333V11.3333C8.66683 11.7015 8.36835 12 8.00016 12C7.63197 12 7.3335 11.7015 7.3335 11.3333V7.33333C7.3335 6.96514 7.63197 6.66666 8.00016 6.66666Z" fill="white"/><path d="M9.00016 4.99999C9.00016 5.55228 8.55245 5.99999 8.00016 5.99999C7.44788 5.99999 7.00016 5.55228 7.00016 4.99999C7.00016 4.44771 7.44788 3.99999 8.00016 3.99999C8.55245 3.99999 9.00016 4.44771 9.00016 4.99999Z" fill="white"/></svg><p class="toast__message">Code copied successfully!</p></div><button class="toast__button"><svg width="16" height="16" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="Icon=close, Size=24px"><path id="Icon" d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z" fill="white"/></g></svg></button></div><button id="copyButton_t27" data-code="# Update package lists&#10;sudo apt update &#10;&#10;# Install Docker prerequisites&#10;sudo apt install apt-transport-https ca-certificates curl software-properties-common&#10;&#10;# Add Docker's GPG key &#10;curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg&#10;&#10;# Set up the Docker apt repository&#10;echo &quot;deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu focal stable&quot; | sudo tee /etc/apt/sources.list.d/docker.list &gt; /dev/null&#10;&#10;# Install Docker&#10;sudo apt update&#10;sudo apt install docker-ce docker-ce-cli containerd.io " data-copy="true" class="code-block__copy-button"><svg width="17" height="16" viewbox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 1.6C0.5 0.716344 1.21634 0 2.1 0H10.1C10.9837 0 11.7 0.716345 11.7 1.6V4.8H14.9C15.7837 4.8 16.5 5.51634 16.5 6.4V14.4C16.5 15.2837 15.7837 16 14.9 16H6.9C6.01634 16 5.3 15.2837 5.3 14.4V11.2H2.1C1.21634 11.2 0.5 10.4837 0.5 9.6V1.6ZM6.9 11.2V14.4H14.9V6.4H11.7V9.6C11.7 10.4837 10.9837 11.2 10.1 11.2H6.9ZM10.1 9.6V1.6L2.1 1.6V9.6H10.1Z" fill="#A2A2A2"/></svg></button></div><pre class="code-block__content"><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">1</span><span class="token comment" style="color:rgb(106, 153, 85)"># Update package lists</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">2</span><span class="token plain"/><span class="token function" style="color:rgb(220, 220, 170)">sudo</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">apt</span><span class="token plain"> update </span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">3</span><span class="token plain" style="display:inline-block"> </span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">4</span><span class="token plain"/><span class="token comment" style="color:rgb(106, 153, 85)"># Install Docker prerequisites</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">5</span><span class="token plain"/><span class="token function" style="color:rgb(220, 220, 170)">sudo</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">apt</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">install</span><span class="token plain"> apt-transport-https ca-certificates </span><span class="token function" style="color:rgb(220, 220, 170)">curl</span><span class="token plain"> software-properties-common</span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">6</span><span class="token plain" style="display:inline-block"> </span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">7</span><span class="token plain"/><span class="token comment" style="color:rgb(106, 153, 85)"># Add Docker's GPG key </span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">8</span><span class="token plain"/><span class="token function" style="color:rgb(220, 220, 170)">curl</span><span class="token plain"> </span><span class="token parameter variable" style="color:rgb(156, 220, 254)">-fsSL</span><span class="token plain"> https://download.docker.com/linux/ubuntu/gpg </span><span class="token operator" style="color:rgb(212, 212, 212)">|</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">sudo</span><span class="token plain"> gpg </span><span class="token parameter variable" style="color:rgb(156, 220, 254)">--dearmor</span><span class="token plain"> </span><span class="token parameter variable" style="color:rgb(156, 220, 254)">-o</span><span class="token plain"> /usr/share/keyrings/docker-archive-keyring.gpg</span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">9</span><span class="token plain" style="display:inline-block"> </span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">10</span><span class="token plain"/><span class="token comment" style="color:rgb(106, 153, 85)"># Set up the Docker apt repository</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">11</span><span class="token plain"/><span class="token builtin class-name" style="color:rgb(78, 201, 176)">echo</span><span class="token plain"> </span><span class="token string" style="color:rgb(206, 145, 120)">"deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu focal stable"</span><span class="token plain"> </span><span class="token operator" style="color:rgb(212, 212, 212)">|</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">sudo</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">tee</span><span class="token plain"> /etc/apt/sources.list.d/docker.list </span><span class="token operator" style="color:rgb(212, 212, 212)">&gt;</span><span class="token plain"> /dev/null</span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">12</span><span class="token plain" style="display:inline-block"> </span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">13</span><span class="token plain"/><span class="token comment" style="color:rgb(106, 153, 85)"># Install Docker</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">14</span><span class="token plain"/><span class="token function" style="color:rgb(220, 220, 170)">sudo</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">apt</span><span class="token plain"> update</span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">15</span><span class="token plain"/><span class="token function" style="color:rgb(220, 220, 170)">sudo</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">apt</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">install</span><span class="token plain"> docker-ce docker-ce-cli containerd.io </span></div></pre></div><p>Check it worked:</p><div class="code-block"><div class="code-block__copy"><div class="toast toast-bottom toast-success" id="feedback-copyButton_t29" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast__content-wrapper"><svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.00016 2.66666C5.05464 2.66666 2.66683 5.05448 2.66683 7.99999C2.66683 10.9455 5.05464 13.3333 8.00016 13.3333C10.9457 13.3333 13.3335 10.9455 13.3335 7.99999C13.3335 5.05448 10.9457 2.66666 8.00016 2.66666ZM1.3335 7.99999C1.3335 4.3181 4.31826 1.33333 8.00016 1.33333C11.6821 1.33333 14.6668 4.3181 14.6668 7.99999C14.6668 11.6819 11.6821 14.6667 8.00016 14.6667C4.31826 14.6667 1.3335 11.6819 1.3335 7.99999Z" fill="white"/><path d="M8.00016 6.66666C8.36835 6.66666 8.66683 6.96514 8.66683 7.33333V11.3333C8.66683 11.7015 8.36835 12 8.00016 12C7.63197 12 7.3335 11.7015 7.3335 11.3333V7.33333C7.3335 6.96514 7.63197 6.66666 8.00016 6.66666Z" fill="white"/><path d="M9.00016 4.99999C9.00016 5.55228 8.55245 5.99999 8.00016 5.99999C7.44788 5.99999 7.00016 5.55228 7.00016 4.99999C7.00016 4.44771 7.44788 3.99999 8.00016 3.99999C8.55245 3.99999 9.00016 4.44771 9.00016 4.99999Z" fill="white"/></svg><p class="toast__message">Code copied successfully!</p></div><button class="toast__button"><svg width="16" height="16" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="Icon=close, Size=24px"><path id="Icon" d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z" fill="white"/></g></svg></button></div><button id="copyButton_t29" data-code="docker --version&#10;docker run hello-world" data-copy="true" class="code-block__copy-button"><svg width="17" height="16" viewbox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 1.6C0.5 0.716344 1.21634 0 2.1 0H10.1C10.9837 0 11.7 0.716345 11.7 1.6V4.8H14.9C15.7837 4.8 16.5 5.51634 16.5 6.4V14.4C16.5 15.2837 15.7837 16 14.9 16H6.9C6.01634 16 5.3 15.2837 5.3 14.4V11.2H2.1C1.21634 11.2 0.5 10.4837 0.5 9.6V1.6ZM6.9 11.2V14.4H14.9V6.4H11.7V9.6C11.7 10.4837 10.9837 11.2 10.1 11.2H6.9ZM10.1 9.6V1.6L2.1 1.6V9.6H10.1Z" fill="#A2A2A2"/></svg></button></div><pre class="code-block__content"><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">1</span><span class="token function" style="color:rgb(220, 220, 170)">docker</span><span class="token plain"> </span><span class="token parameter variable" style="color:rgb(156, 220, 254)">--version</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">2</span><span class="token plain"/><span class="token function" style="color:rgb(220, 220, 170)">docker</span><span class="token plain"> run hello-world</span></div></pre></div><p>This should successfully download a test container image and print a confirmation message. If the last command encounters a permission error, attempt to run it again using <code>sudo</code> before the command.</p><figure class="image-block"><div class="image-block__background image-block__offset"><img class="image-block__image" src="https://www.datocms-assets.com/103916/1708804560-terminal.png?auto=compress%2Cformat" alt="docker run hello-world"/></div><figcaption class="image-block__caption">docker run hello-world</figcaption></figure><p>While optional, <a rel="noopener" target="_blank" href="https://www.daytona.io/definitions/d/docker-compose">Docker Compose</a> makes working with multi-container apps much easier. We'll use it later to orchestrate our dev environment services.</p><p>First things first, ensure Docker Compose is properly installed by confirming the version number.</p><div class="code-block"><div class="code-block__copy"><div class="toast toast-bottom toast-success" id="feedback-copyButton_t34" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast__content-wrapper"><svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.00016 2.66666C5.05464 2.66666 2.66683 5.05448 2.66683 7.99999C2.66683 10.9455 5.05464 13.3333 8.00016 13.3333C10.9457 13.3333 13.3335 10.9455 13.3335 7.99999C13.3335 5.05448 10.9457 2.66666 8.00016 2.66666ZM1.3335 7.99999C1.3335 4.3181 4.31826 1.33333 8.00016 1.33333C11.6821 1.33333 14.6668 4.3181 14.6668 7.99999C14.6668 11.6819 11.6821 14.6667 8.00016 14.6667C4.31826 14.6667 1.3335 11.6819 1.3335 7.99999Z" fill="white"/><path d="M8.00016 6.66666C8.36835 6.66666 8.66683 6.96514 8.66683 7.33333V11.3333C8.66683 11.7015 8.36835 12 8.00016 12C7.63197 12 7.3335 11.7015 7.3335 11.3333V7.33333C7.3335 6.96514 7.63197 6.66666 8.00016 6.66666Z" fill="white"/><path d="M9.00016 4.99999C9.00016 5.55228 8.55245 5.99999 8.00016 5.99999C7.44788 5.99999 7.00016 5.55228 7.00016 4.99999C7.00016 4.44771 7.44788 3.99999 8.00016 3.99999C8.55245 3.99999 9.00016 4.44771 9.00016 4.99999Z" fill="white"/></svg><p class="toast__message">Code copied successfully!</p></div><button class="toast__button"><svg width="16" height="16" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="Icon=close, Size=24px"><path id="Icon" d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z" fill="white"/></g></svg></button></div><button id="copyButton_t34" data-code="docker compose version" data-copy="true" class="code-block__copy-button"><svg width="17" height="16" viewbox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 1.6C0.5 0.716344 1.21634 0 2.1 0H10.1C10.9837 0 11.7 0.716345 11.7 1.6V4.8H14.9C15.7837 4.8 16.5 5.51634 16.5 6.4V14.4C16.5 15.2837 15.7837 16 14.9 16H6.9C6.01634 16 5.3 15.2837 5.3 14.4V11.2H2.1C1.21634 11.2 0.5 10.4837 0.5 9.6V1.6ZM6.9 11.2V14.4H14.9V6.4H11.7V9.6C11.7 10.4837 10.9837 11.2 10.1 11.2H6.9ZM10.1 9.6V1.6L2.1 1.6V9.6H10.1Z" fill="#A2A2A2"/></svg></button></div><pre class="code-block__content"><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">1</span><span class="token function" style="color:rgb(220, 220, 170)">docker</span><span class="token plain"> compose version</span></div></pre></div><p>If that is not the case, <a rel="noopener" target="_blank" href="https://docs.docker.com/compose/install/linux/#install-using-the-repository">install Docker Compose</a> it with the following commands.</p><div class="code-block"><div class="code-block__copy"><div class="toast toast-bottom toast-success" id="feedback-copyButton_t36" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast__content-wrapper"><svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.00016 2.66666C5.05464 2.66666 2.66683 5.05448 2.66683 7.99999C2.66683 10.9455 5.05464 13.3333 8.00016 13.3333C10.9457 13.3333 13.3335 10.9455 13.3335 7.99999C13.3335 5.05448 10.9457 2.66666 8.00016 2.66666ZM1.3335 7.99999C1.3335 4.3181 4.31826 1.33333 8.00016 1.33333C11.6821 1.33333 14.6668 4.3181 14.6668 7.99999C14.6668 11.6819 11.6821 14.6667 8.00016 14.6667C4.31826 14.6667 1.3335 11.6819 1.3335 7.99999Z" fill="white"/><path d="M8.00016 6.66666C8.36835 6.66666 8.66683 6.96514 8.66683 7.33333V11.3333C8.66683 11.7015 8.36835 12 8.00016 12C7.63197 12 7.3335 11.7015 7.3335 11.3333V7.33333C7.3335 6.96514 7.63197 6.66666 8.00016 6.66666Z" fill="white"/><path d="M9.00016 4.99999C9.00016 5.55228 8.55245 5.99999 8.00016 5.99999C7.44788 5.99999 7.00016 5.55228 7.00016 4.99999C7.00016 4.44771 7.44788 3.99999 8.00016 3.99999C8.55245 3.99999 9.00016 4.44771 9.00016 4.99999Z" fill="white"/></svg><p class="toast__message">Code copied successfully!</p></div><button class="toast__button"><svg width="16" height="16" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="Icon=close, Size=24px"><path id="Icon" d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z" fill="white"/></g></svg></button></div><button id="copyButton_t36" data-code="sudo apt-get update&#10;sudo apt-get install docker-compose-plugin" data-copy="true" class="code-block__copy-button"><svg width="17" height="16" viewbox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 1.6C0.5 0.716344 1.21634 0 2.1 0H10.1C10.9837 0 11.7 0.716345 11.7 1.6V4.8H14.9C15.7837 4.8 16.5 5.51634 16.5 6.4V14.4C16.5 15.2837 15.7837 16 14.9 16H6.9C6.01634 16 5.3 15.2837 5.3 14.4V11.2H2.1C1.21634 11.2 0.5 10.4837 0.5 9.6V1.6ZM6.9 11.2V14.4H14.9V6.4H11.7V9.6C11.7 10.4837 10.9837 11.2 10.1 11.2H6.9ZM10.1 9.6V1.6L2.1 1.6V9.6H10.1Z" fill="#A2A2A2"/></svg></button></div><pre class="code-block__content"><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">1</span><span class="token function" style="color:rgb(220, 220, 170)">sudo</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">apt-get</span><span class="token plain"> update</span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">2</span><span class="token plain"/><span class="token function" style="color:rgb(220, 220, 170)">sudo</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">apt-get</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">install</span><span class="token plain"> docker-compose-plugin</span></div></pre></div><p>Add your user to the <code>docker</code> group by using a terminal to run: </p><div class="code-block"><div class="code-block__copy"><div class="toast toast-bottom toast-success" id="feedback-copyButton_t38" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast__content-wrapper"><svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.00016 2.66666C5.05464 2.66666 2.66683 5.05448 2.66683 7.99999C2.66683 10.9455 5.05464 13.3333 8.00016 13.3333C10.9457 13.3333 13.3335 10.9455 13.3335 7.99999C13.3335 5.05448 10.9457 2.66666 8.00016 2.66666ZM1.3335 7.99999C1.3335 4.3181 4.31826 1.33333 8.00016 1.33333C11.6821 1.33333 14.6668 4.3181 14.6668 7.99999C14.6668 11.6819 11.6821 14.6667 8.00016 14.6667C4.31826 14.6667 1.3335 11.6819 1.3335 7.99999Z" fill="white"/><path d="M8.00016 6.66666C8.36835 6.66666 8.66683 6.96514 8.66683 7.33333V11.3333C8.66683 11.7015 8.36835 12 8.00016 12C7.63197 12 7.3335 11.7015 7.3335 11.3333V7.33333C7.3335 6.96514 7.63197 6.66666 8.00016 6.66666Z" fill="white"/><path d="M9.00016 4.99999C9.00016 5.55228 8.55245 5.99999 8.00016 5.99999C7.44788 5.99999 7.00016 5.55228 7.00016 4.99999C7.00016 4.44771 7.44788 3.99999 8.00016 3.99999C8.55245 3.99999 9.00016 4.44771 9.00016 4.99999Z" fill="white"/></svg><p class="toast__message">Code copied successfully!</p></div><button class="toast__button"><svg width="16" height="16" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="Icon=close, Size=24px"><path id="Icon" d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z" fill="white"/></g></svg></button></div><button id="copyButton_t38" data-code="sudo usermod -aG docker $USER" data-copy="true" class="code-block__copy-button"><svg width="17" height="16" viewbox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 1.6C0.5 0.716344 1.21634 0 2.1 0H10.1C10.9837 0 11.7 0.716345 11.7 1.6V4.8H14.9C15.7837 4.8 16.5 5.51634 16.5 6.4V14.4C16.5 15.2837 15.7837 16 14.9 16H6.9C6.01634 16 5.3 15.2837 5.3 14.4V11.2H2.1C1.21634 11.2 0.5 10.4837 0.5 9.6V1.6ZM6.9 11.2V14.4H14.9V6.4H11.7V9.6C11.7 10.4837 10.9837 11.2 10.1 11.2H6.9ZM10.1 9.6V1.6L2.1 1.6V9.6H10.1Z" fill="#A2A2A2"/></svg></button></div><pre class="code-block__content"><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">1</span><span class="token function" style="color:rgb(220, 220, 170)">sudo</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">usermod</span><span class="token plain"> </span><span class="token parameter variable" style="color:rgb(156, 220, 254)">-aG</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">docker</span><span class="token plain"> </span><span class="token environment constant" style="color:rgb(100, 102, 149)">$USER</span></div></pre></div><p>Please log out and then log back in to ensure that the changes to the settings are applied.</p><p>Adding your username to the Docker group in a Linux system is a common practice to allow non-root users to run Docker commands without needing to use <code>sudo</code> each time. By default, Docker requires elevated privileges, and running Docker commands as a regular user without proper permissions would result in permission-denied errors.</p><h2 id="step-3-connect-visual-studio-code-to-remote-environment">Step 3 - Connect Visual Studio Code to Remote Environment</h2><p>To allow connecting to your remote dev environment from Visual Studio Code, we need to install <a rel="noopener" target="_blank" href="https://code.visualstudio.com/docs/remote/remote-overview">VS Code Server</a>. The Visual Studio Code Server is a service designed to operate on a remote development environment, such as your cloud virtual machine (VM). This will run on the remote host and communicate with the VS Code client on our local machine.</p><figure class="image-block"><div class="image-block__background image-block__offset"><img class="image-block__image" src="https://www.datocms-assets.com/103916/1708694688-pasted-image-20240222144808.png?auto=compress%2Cformat" alt="VS Code Server Remote"/></div><figcaption class="image-block__caption">VS Code Server Remote</figcaption></figure><p>Back on our local machine, launch VS Code and install the <a rel="noopener" target="_blank" href="https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh">Remote - SSH extension</a>.</p><p>Use the Command Palette (Ctrl/Cmd+Shift+P or F1) in VS Code to run <strong>Remote-SSH: Connect to Host...</strong> and enter your server info <code>user@your-server-ip</code> from the last step.</p><figure class="image-block"><div class="image-block__background"><img class="image-block__image" src="https://www.datocms-assets.com/103916/1708804652-remotessh.png?auto=compress%2Cformat" alt="VS Code Remote-SSH Connect to Host"/></div><figcaption class="image-block__caption">VS Code Remote-SSH Connect to Host</figcaption></figure><p>Once connected, VS Code will automatically install the VS Code Server on your remote machine.</p><p>You now have full VS Code functionality on the remote server, you can open folders and work directly on the remote server!</p><figure class="image-block"><div class="image-block__background image-block__offset"><img class="image-block__image" src="https://www.datocms-assets.com/103916/1708804646-remotessh2.png?auto=compress%2Cformat" alt="VS Code Remote-SSH Extension Installing"/></div><figcaption class="image-block__caption">VS Code Remote-SSH Extension Installing</figcaption></figure><h2 id="step-4-clone-sample-project">Step 4 - Clone Sample Project</h2><p>With our base environment setup, let's clone <a rel="noopener" target="_blank" href="https://www.daytona.io/definitions/r/repository">the repository</a> of a sample web project to use for development.</p><p>Feel free to use your own project repository here if you already have code to work on. For our example, we will use <a rel="noopener" target="_blank" href="https://github.com/withastro/astro">the Astro web framework</a> <a rel="noopener" target="_blank" href="https://www.daytona.io/definitions/g/git">git repository</a>.</p><p>You can use the file explorer button and option to <strong>"Clone Repository"</strong>:</p><figure class="image-block"><div class="image-block__background image-block__offset"><img class="image-block__image" src="https://www.datocms-assets.com/103916/1708804635-remotessh-clone.png?auto=compress%2Cformat" alt="VS Code Clone from URL"/></div><figcaption class="image-block__caption">VS Code Clone from URL</figcaption></figure><p>You will be prompted: <strong>"Cloning a repository in a Dev Container may execute arbitrary code."</strong> to confirm.</p><p>Or you could use the VS Code terminal and execute the commands directly.</p><div class="code-block"><div class="code-block__copy"><div class="toast toast-bottom toast-success" id="feedback-copyButton_t57" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast__content-wrapper"><svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.00016 2.66666C5.05464 2.66666 2.66683 5.05448 2.66683 7.99999C2.66683 10.9455 5.05464 13.3333 8.00016 13.3333C10.9457 13.3333 13.3335 10.9455 13.3335 7.99999C13.3335 5.05448 10.9457 2.66666 8.00016 2.66666ZM1.3335 7.99999C1.3335 4.3181 4.31826 1.33333 8.00016 1.33333C11.6821 1.33333 14.6668 4.3181 14.6668 7.99999C14.6668 11.6819 11.6821 14.6667 8.00016 14.6667C4.31826 14.6667 1.3335 11.6819 1.3335 7.99999Z" fill="white"/><path d="M8.00016 6.66666C8.36835 6.66666 8.66683 6.96514 8.66683 7.33333V11.3333C8.66683 11.7015 8.36835 12 8.00016 12C7.63197 12 7.3335 11.7015 7.3335 11.3333V7.33333C7.3335 6.96514 7.63197 6.66666 8.00016 6.66666Z" fill="white"/><path d="M9.00016 4.99999C9.00016 5.55228 8.55245 5.99999 8.00016 5.99999C7.44788 5.99999 7.00016 5.55228 7.00016 4.99999C7.00016 4.44771 7.44788 3.99999 8.00016 3.99999C8.55245 3.99999 9.00016 4.44771 9.00016 4.99999Z" fill="white"/></svg><p class="toast__message">Code copied successfully!</p></div><button class="toast__button"><svg width="16" height="16" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="Icon=close, Size=24px"><path id="Icon" d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z" fill="white"/></g></svg></button></div><button id="copyButton_t57" data-code="# Git clone the project &#10;git clone https://github.com/my-user/my-project.git &#10;# Change directory &#10;cd my-project" data-copy="true" class="code-block__copy-button"><svg width="17" height="16" viewbox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 1.6C0.5 0.716344 1.21634 0 2.1 0H10.1C10.9837 0 11.7 0.716345 11.7 1.6V4.8H14.9C15.7837 4.8 16.5 5.51634 16.5 6.4V14.4C16.5 15.2837 15.7837 16 14.9 16H6.9C6.01634 16 5.3 15.2837 5.3 14.4V11.2H2.1C1.21634 11.2 0.5 10.4837 0.5 9.6V1.6ZM6.9 11.2V14.4H14.9V6.4H11.7V9.6C11.7 10.4837 10.9837 11.2 10.1 11.2H6.9ZM10.1 9.6V1.6L2.1 1.6V9.6H10.1Z" fill="#A2A2A2"/></svg></button></div><pre class="code-block__content"><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">1</span><span class="token comment" style="color:rgb(106, 153, 85)"># Git clone the project </span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">2</span><span class="token plain"/><span class="token function" style="color:rgb(220, 220, 170)">git</span><span class="token plain"> clone https://github.com/my-user/my-project.git </span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">3</span><span class="token plain"/><span class="token comment" style="color:rgb(106, 153, 85)"># Change directory </span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">4</span><span class="token plain"/><span class="token builtin class-name" style="color:rgb(78, 201, 176)">cd</span><span class="token plain"> my-project</span></div></pre></div><p>Open the project folder by clicking on the pop-up alert or using <strong>File &gt; Open Folder</strong> and select the folder you cloned previously.</p><figure class="image-block"><div class="image-block__background image-block__offset"><img class="image-block__image" src="https://www.datocms-assets.com/103916/1708804629-remotessh-cloning.png?auto=compress%2Cformat" alt="VS Code Cloning to Remote Dev Environment"/></div><figcaption class="image-block__caption">VS Code Cloning to Remote Dev Environment</figcaption></figure><p>For the Astro repository, you will be offered to install a set of helpful extensions for your Visual Studio Code, such as language support for Astro, the Prettier code formatter, EditorConfig, and ESLint.</p><figure class="image-block"><div class="image-block__background image-block__offset"><img class="image-block__image" src="https://www.datocms-assets.com/103916/1708804610-remotessh-devcontainer.png?auto=compress%2Cformat" alt="VS Code Run in Dev Container"/></div><figcaption class="image-block__caption">VS Code Run in Dev Container</figcaption></figure><h2 id="step-5-standardizing-your-development-environment-with-dev-container">Step 5 - Standardizing Your Development Environment with Dev Container</h2><p>The Astro repository contains multiple <a rel="noopener" target="_blank" href="https://www.daytona.io/definitions/d/development-container">devcontainer.json</a> files, enabling you to set up and run a <a rel="noopener" target="_blank" href="https://www.daytona.io/definitions/s/standardized-development-environment-sde">standardized development environment</a> tailored to your needs. Whether you're contributing to the Astro project, contributing to documentation, or working within a particular framework like <a rel="noopener" target="_blank" href="https://www.daytona.io/definitions/r/react">React</a>, these configurations facilitate a <a rel="noopener" target="_blank" href="https://www.daytona.io/definitions/d/developer-experience-devex">seamless development experience</a>.</p><h3>Understanding and Harnessing Dev Containers</h3><p>Development <a rel="noopener" target="_blank" href="https://containers.dev/">Containers</a> is an open standard designed by Microsoft to enhance containers with content and settings tailored specifically for development purposes.</p><p>Dev Containers are defined using <code>devcontainer.json</code> files, which specify the environment's settings, extensions, and Docker configurations necessary for development. This approach ensures that all developers working on a project have a consistent set of tools and runtime environments, minimizing the "works on my machine" problem.</p><p>Dev Containers will ensure a seamless development experience across different machines, similar to what one might expect from using a platform like Codespaces, but with the flexibility and control of a custom setup. This setup is particularly beneficial for collaborative projects or when working in diverse environments, as it abstracts the underlying system configurations and focuses on providing a unified development experience.</p><h3>Dev Container Basic Example from Astro</h3><p>The following JSON snippet is an example of an <a rel="noopener" target="_blank" href="https://github.com/withastro/astro/blob/main/.devcontainer/basics/devcontainer.json">Astro Basics</a> <code>devcontainer.json</code> configuration.</p><div class="code-block"><div class="code-block__copy"><div class="toast toast-bottom toast-success" id="feedback-copyButton_t70" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast__content-wrapper"><svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.00016 2.66666C5.05464 2.66666 2.66683 5.05448 2.66683 7.99999C2.66683 10.9455 5.05464 13.3333 8.00016 13.3333C10.9457 13.3333 13.3335 10.9455 13.3335 7.99999C13.3335 5.05448 10.9457 2.66666 8.00016 2.66666ZM1.3335 7.99999C1.3335 4.3181 4.31826 1.33333 8.00016 1.33333C11.6821 1.33333 14.6668 4.3181 14.6668 7.99999C14.6668 11.6819 11.6821 14.6667 8.00016 14.6667C4.31826 14.6667 1.3335 11.6819 1.3335 7.99999Z" fill="white"/><path d="M8.00016 6.66666C8.36835 6.66666 8.66683 6.96514 8.66683 7.33333V11.3333C8.66683 11.7015 8.36835 12 8.00016 12C7.63197 12 7.3335 11.7015 7.3335 11.3333V7.33333C7.3335 6.96514 7.63197 6.66666 8.00016 6.66666Z" fill="white"/><path d="M9.00016 4.99999C9.00016 5.55228 8.55245 5.99999 8.00016 5.99999C7.44788 5.99999 7.00016 5.55228 7.00016 4.99999C7.00016 4.44771 7.44788 3.99999 8.00016 3.99999C8.55245 3.99999 9.00016 4.44771 9.00016 4.99999Z" fill="white"/></svg><p class="toast__message">Code copied successfully!</p></div><button class="toast__button"><svg width="16" height="16" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="Icon=close, Size=24px"><path id="Icon" d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z" fill="white"/></g></svg></button></div><button id="copyButton_t70" data-code="{&#10; &quot;name&quot;: &quot;Basics&quot;,&#10; &quot;build&quot;: {&#10; &quot;dockerfile&quot;: &quot;../examples.Dockerfile&quot;&#10; },&#10;&#10; &quot;workspaceFolder&quot;: &quot;/workspaces/astro/examples/basics&quot;,&#10;&#10; &quot;portsAttributes&quot;: {&#10; &quot;4321&quot;: {&#10; &quot;label&quot;: &quot;Application&quot;,&#10; &quot;onAutoForward&quot;: &quot;openPreview&quot;&#10; }&#10; },&#10;&#10; &quot;forwardPorts&quot;: [4321],&#10;&#10; &quot;postCreateCommand&quot;: &quot;pnpm install &amp;&amp; cd /workspaces/astro &amp;&amp; pnpm run build&quot;,&#10;&#10; &quot;waitFor&quot;: &quot;postCreateCommand&quot;,&#10;&#10; &quot;postAttachCommand&quot;: {&#10; &quot;Server&quot;: &quot;pnpm start --host&quot;&#10; },&#10;&#10; &quot;customizations&quot;: {&#10; &quot;codespaces&quot;: {&#10; &quot;openFiles&quot;: [&quot;src/pages/index.astro&quot;]&#10; },&#10; &quot;vscode&quot;: {&#10; &quot;extensions&quot;: [&quot;astro-build.astro-vscode&quot;, &quot;esbenp.prettier-vscode&quot;]&#10; }&#10; }&#10;}" data-copy="true" class="code-block__copy-button"><svg width="17" height="16" viewbox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 1.6C0.5 0.716344 1.21634 0 2.1 0H10.1C10.9837 0 11.7 0.716345 11.7 1.6V4.8H14.9C15.7837 4.8 16.5 5.51634 16.5 6.4V14.4C16.5 15.2837 15.7837 16 14.9 16H6.9C6.01634 16 5.3 15.2837 5.3 14.4V11.2H2.1C1.21634 11.2 0.5 10.4837 0.5 9.6V1.6ZM6.9 11.2V14.4H14.9V6.4H11.7V9.6C11.7 10.4837 10.9837 11.2 10.1 11.2H6.9ZM10.1 9.6V1.6L2.1 1.6V9.6H10.1Z" fill="#A2A2A2"/></svg></button></div><pre class="code-block__content"><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">1</span><span class="token punctuation" style="color:rgb(212, 212, 212)">{</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">2</span><span class="token plain"> </span><span class="token property">"name"</span><span class="token operator" style="color:rgb(212, 212, 212)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(206, 145, 120)">"Basics"</span><span class="token punctuation" style="color:rgb(212, 212, 212)">,</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">3</span><span class="token plain"> </span><span class="token property">"build"</span><span class="token operator" style="color:rgb(212, 212, 212)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">{</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">4</span><span class="token plain"> </span><span class="token property">"dockerfile"</span><span class="token operator" style="color:rgb(212, 212, 212)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(206, 145, 120)">"../examples.Dockerfile"</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">5</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">}</span><span class="token punctuation" style="color:rgb(212, 212, 212)">,</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">6</span><span class="token plain" style="display:inline-block"> </span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">7</span><span class="token plain"> </span><span class="token property">"workspaceFolder"</span><span class="token operator" style="color:rgb(212, 212, 212)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(206, 145, 120)">"/workspaces/astro/examples/basics"</span><span class="token punctuation" style="color:rgb(212, 212, 212)">,</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">8</span><span class="token plain" style="display:inline-block"> </span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">9</span><span class="token plain"> </span><span class="token property">"portsAttributes"</span><span class="token operator" style="color:rgb(212, 212, 212)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">{</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">10</span><span class="token plain"> </span><span class="token property">"4321"</span><span class="token operator" style="color:rgb(212, 212, 212)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">{</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">11</span><span class="token plain"> </span><span class="token property">"label"</span><span class="token operator" style="color:rgb(212, 212, 212)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(206, 145, 120)">"Application"</span><span class="token punctuation" style="color:rgb(212, 212, 212)">,</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">12</span><span class="token plain"> </span><span class="token property">"onAutoForward"</span><span class="token operator" style="color:rgb(212, 212, 212)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(206, 145, 120)">"openPreview"</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">13</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">}</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">14</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">}</span><span class="token punctuation" style="color:rgb(212, 212, 212)">,</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">15</span><span class="token plain" style="display:inline-block"> </span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">16</span><span class="token plain"> </span><span class="token property">"forwardPorts"</span><span class="token operator" style="color:rgb(212, 212, 212)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">[</span><span class="token number" style="color:rgb(181, 206, 168)">4321</span><span class="token punctuation" style="color:rgb(212, 212, 212)">]</span><span class="token punctuation" style="color:rgb(212, 212, 212)">,</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">17</span><span class="token plain" style="display:inline-block"> </span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">18</span><span class="token plain"> </span><span class="token property">"postCreateCommand"</span><span class="token operator" style="color:rgb(212, 212, 212)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(206, 145, 120)">"pnpm install &amp;&amp; cd /workspaces/astro &amp;&amp; pnpm run build"</span><span class="token punctuation" style="color:rgb(212, 212, 212)">,</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">19</span><span class="token plain" style="display:inline-block"> </span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">20</span><span class="token plain"> </span><span class="token property">"waitFor"</span><span class="token operator" style="color:rgb(212, 212, 212)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(206, 145, 120)">"postCreateCommand"</span><span class="token punctuation" style="color:rgb(212, 212, 212)">,</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">21</span><span class="token plain" style="display:inline-block"> </span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">22</span><span class="token plain"> </span><span class="token property">"postAttachCommand"</span><span class="token operator" style="color:rgb(212, 212, 212)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">{</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">23</span><span class="token plain"> </span><span class="token property">"Server"</span><span class="token operator" style="color:rgb(212, 212, 212)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(206, 145, 120)">"pnpm start --host"</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">24</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">}</span><span class="token punctuation" style="color:rgb(212, 212, 212)">,</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">25</span><span class="token plain" style="display:inline-block"> </span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">26</span><span class="token plain"> </span><span class="token property">"customizations"</span><span class="token operator" style="color:rgb(212, 212, 212)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">{</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">27</span><span class="token plain"> </span><span class="token property">"codespaces"</span><span class="token operator" style="color:rgb(212, 212, 212)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">{</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">28</span><span class="token plain"> </span><span class="token property">"openFiles"</span><span class="token operator" style="color:rgb(212, 212, 212)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">[</span><span class="token string" style="color:rgb(206, 145, 120)">"src/pages/index.astro"</span><span class="token punctuation" style="color:rgb(212, 212, 212)">]</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">29</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">}</span><span class="token punctuation" style="color:rgb(212, 212, 212)">,</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">30</span><span class="token plain"> </span><span class="token property">"vscode"</span><span class="token operator" style="color:rgb(212, 212, 212)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">{</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">31</span><span class="token plain"> </span><span class="token property">"extensions"</span><span class="token operator" style="color:rgb(212, 212, 212)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">[</span><span class="token string" style="color:rgb(206, 145, 120)">"astro-build.astro-vscode"</span><span class="token punctuation" style="color:rgb(212, 212, 212)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(206, 145, 120)">"esbenp.prettier-vscode"</span><span class="token punctuation" style="color:rgb(212, 212, 212)">]</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">32</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">}</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">33</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">}</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">34</span><span class="token plain"/><span class="token punctuation" style="color:rgb(212, 212, 212)">}</span></div></pre></div><p>Let's break down its components:</p><ul class="unordered-list-block"><li><p><code><strong>build</strong></code>: Here, <code>"dockerfile": "../examples.Dockerfile"</code> points to a Dockerfile relative to the location of the <code>devcontainer.json</code> file. This Dockerfile contains instructions for building the Docker image that the development environment will use.</p></li><li><p><code><strong>portsAttributes</strong></code>: Defines attributes for ports used by the container. The configuration for port <code>4321</code> includes the label "Application" and specifies that when this port is auto-forwarded, a preview should be opened automatically (<code>"onAutoForward": "openPreview"</code>).</p></li><li><p><code><strong>forwardPorts</strong></code>: Lists the ports that should be forwarded from the container to the host machine, allowing access to services running inside the container.</p></li><li><p><code><strong>postCreateCommand</strong></code>: Specifies a command to run after the container is created but before a user connects. Here, it installs project dependencies using <code>pnpm install</code>, then builds the project with <code>pnpm run build</code>, ensuring the environment is ready for development.</p></li><li><p><code><strong>postAttachCommand</strong></code>: Defines commands to run after a user attaches to the container. This example specifies that the <code>Server</code> should start using <code>pnpm start --host</code>, preparing the Astro development server for use.</p></li><li><p><code><strong>customizations</strong></code>: Contains environment-specific customizations. Under <code>codespaces</code>, it automatically opens the file <code>src/pages/index.astro</code> upon starting, which is useful for getting straight to editing the main page. The <code>vscode</code> section lists recommended extensions (<code>astro-build.astro-vscode</code> for Astro support and <code>esbenp.prettier-vscode</code> for code formatting with Prettier) to enhance the development experience within VS Code.</p></li></ul><p>Each part of this configuration ensures that the development environment is tailored to the project's needs, from the Docker build process to the setup and ready state of the development server, including the developer's workspace setup in Visual Studio Code.</p><h3>Open Project in Dev Container</h3><p>To open your project folder in a dev container:</p><ul class="unordered-list-block"><li><p>Open the command palette again.</p></li><li><p>Select <strong>"Remote-Containers: Open Folder in Container..."</strong></p></li><li><p>Choose your project folder.</p></li></ul><figure class="image-block"><div class="image-block__background image-block__offset"><img class="image-block__image" src="https://www.datocms-assets.com/103916/1708804598-remotessh-opendevcontainer.png?auto=compress%2Cformat" alt="VS Code Select a devcontainer.json file"/></div><figcaption class="image-block__caption">VS Code Select a devcontainer.json file</figcaption></figure><p>VS Code will start the dev container, install extensions, and connect automatically.</p><figure class="image-block"><div class="image-block__background image-block__offset"><img class="image-block__image" src="https://www.datocms-assets.com/103916/1708804591-remotessh-startingdevcontainer.png?auto=compress%2Cformat" alt="VS Code starting a Dev Container on Remote"/></div><figcaption class="image-block__caption">VS Code starting a Dev Container on Remote</figcaption></figure><p>The setup time for your development environment will vary based on the configuration specified in your devcontainer.json file, so anticipate a short wait. While prebuilds can often mitigate this delay, that is a subject better suited for a separate discussion.</p><figure class="image-block"><div class="image-block__background"><img class="image-block__image" src="https://www.datocms-assets.com/103916/1708694737-pasted-image-20240222152020.png?auto=compress%2Cformat" alt="A little longer than a few minutes later"/></div><figcaption class="image-block__caption">A little longer than a few minutes later</figcaption></figure><p>You now have a fully featured, standardized remote development environment accessible through VS Code on your local machine!</p><h2 id="step-6-run-preview-dev-server">Step 6: Run Preview Dev Server</h2><p>In VS Code, once the container is ready, and if the dev container of your choice didn't run the server, open a new terminal within VS Code and start your application.</p><p>You can execute a command to start the preview if your project is web-based. In the case of our Astro project, the command is as follows. However, your specific command may vary.</p><div class="code-block"><div class="code-block__copy"><div class="toast toast-bottom toast-success" id="feedback-copyButton_t86" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast__content-wrapper"><svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.00016 2.66666C5.05464 2.66666 2.66683 5.05448 2.66683 7.99999C2.66683 10.9455 5.05464 13.3333 8.00016 13.3333C10.9457 13.3333 13.3335 10.9455 13.3335 7.99999C13.3335 5.05448 10.9457 2.66666 8.00016 2.66666ZM1.3335 7.99999C1.3335 4.3181 4.31826 1.33333 8.00016 1.33333C11.6821 1.33333 14.6668 4.3181 14.6668 7.99999C14.6668 11.6819 11.6821 14.6667 8.00016 14.6667C4.31826 14.6667 1.3335 11.6819 1.3335 7.99999Z" fill="white"/><path d="M8.00016 6.66666C8.36835 6.66666 8.66683 6.96514 8.66683 7.33333V11.3333C8.66683 11.7015 8.36835 12 8.00016 12C7.63197 12 7.3335 11.7015 7.3335 11.3333V7.33333C7.3335 6.96514 7.63197 6.66666 8.00016 6.66666Z" fill="white"/><path d="M9.00016 4.99999C9.00016 5.55228 8.55245 5.99999 8.00016 5.99999C7.44788 5.99999 7.00016 5.55228 7.00016 4.99999C7.00016 4.44771 7.44788 3.99999 8.00016 3.99999C8.55245 3.99999 9.00016 4.44771 9.00016 4.99999Z" fill="white"/></svg><p class="toast__message">Code copied successfully!</p></div><button class="toast__button"><svg width="16" height="16" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="Icon=close, Size=24px"><path id="Icon" d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z" fill="white"/></g></svg></button></div><button id="copyButton_t86" data-code="pnpm run dev" data-copy="true" class="code-block__copy-button"><svg width="17" height="16" viewbox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 1.6C0.5 0.716344 1.21634 0 2.1 0H10.1C10.9837 0 11.7 0.716345 11.7 1.6V4.8H14.9C15.7837 4.8 16.5 5.51634 16.5 6.4V14.4C16.5 15.2837 15.7837 16 14.9 16H6.9C6.01634 16 5.3 15.2837 5.3 14.4V11.2H2.1C1.21634 11.2 0.5 10.4837 0.5 9.6V1.6ZM6.9 11.2V14.4H14.9V6.4H11.7V9.6C11.7 10.4837 10.9837 11.2 10.1 11.2H6.9ZM10.1 9.6V1.6L2.1 1.6V9.6H10.1Z" fill="#A2A2A2"/></svg></button></div><pre class="code-block__content"><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">1</span><span class="token function" style="color:rgb(220, 220, 170)">pnpm</span><span class="token plain"> run dev</span></div></pre></div><figure class="image-block"><div class="image-block__background image-block__offset"><img class="image-block__image" src="https://www.datocms-assets.com/103916/1708804585-remotessh-astro.png?auto=compress%2Cformat" alt="Astro Running in Dev Container"/></div><figcaption class="image-block__caption">Astro Running in Dev Container</figcaption></figure><h2 id="step-7-securely-share-and-expose-your-projects-on-the-internet-behind-a-domain">Step 7 - Securely Share and Expose Your Projects on the Internet Behind a Domain</h2><p>To share your environment or collaborate with others, we can expose services securely over the internet. There are reverse proxy services that allow this to function without a public IP and even behind a firewall. For instance, in our example, we are using <a href="https://ngrok.com/">ngrok</a>.</p><p>First, retrieve your ngrok authentication token from the <a rel="noopener" target="_blank" href="https://dashboard.ngrok.com/get-started/your-authtoken">ngrok dashboard</a>.</p><figure class="image-block"><div class="image-block__background"><img class="image-block__image" src="https://www.datocms-assets.com/103916/1708695914-pasted-image-20240222153018.png?auto=compress%2Cformat" alt="Ngrok Auth token"/></div><figcaption class="image-block__caption">Ngrok Auth token</figcaption></figure><p><a rel="noopener" target="_blank" href="https://ngrok.com/docs/getting-started/">Install Ngrok</a> from their site, and authenticate it with your account auth token:</p><div class="code-block"><div class="code-block__copy"><div class="toast toast-bottom toast-success" id="feedback-copyButton_t93" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast__content-wrapper"><svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.00016 2.66666C5.05464 2.66666 2.66683 5.05448 2.66683 7.99999C2.66683 10.9455 5.05464 13.3333 8.00016 13.3333C10.9457 13.3333 13.3335 10.9455 13.3335 7.99999C13.3335 5.05448 10.9457 2.66666 8.00016 2.66666ZM1.3335 7.99999C1.3335 4.3181 4.31826 1.33333 8.00016 1.33333C11.6821 1.33333 14.6668 4.3181 14.6668 7.99999C14.6668 11.6819 11.6821 14.6667 8.00016 14.6667C4.31826 14.6667 1.3335 11.6819 1.3335 7.99999Z" fill="white"/><path d="M8.00016 6.66666C8.36835 6.66666 8.66683 6.96514 8.66683 7.33333V11.3333C8.66683 11.7015 8.36835 12 8.00016 12C7.63197 12 7.3335 11.7015 7.3335 11.3333V7.33333C7.3335 6.96514 7.63197 6.66666 8.00016 6.66666Z" fill="white"/><path d="M9.00016 4.99999C9.00016 5.55228 8.55245 5.99999 8.00016 5.99999C7.44788 5.99999 7.00016 5.55228 7.00016 4.99999C7.00016 4.44771 7.44788 3.99999 8.00016 3.99999C8.55245 3.99999 9.00016 4.44771 9.00016 4.99999Z" fill="white"/></svg><p class="toast__message">Code copied successfully!</p></div><button class="toast__button"><svg width="16" height="16" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="Icon=close, Size=24px"><path id="Icon" d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z" fill="white"/></g></svg></button></div><button id="copyButton_t93" data-code="# Download and extract Ngrok &#10;curl -s https://ngrok-agent.s3.amazonaws.com/ngrok.asc | \&#10; sudo tee /etc/apt/trusted.gpg.d/ngrok.asc &gt;/dev/null &amp;&amp; \&#10; echo &quot;deb https://ngrok-agent.s3.amazonaws.com buster main&quot; | \&#10; sudo tee /etc/apt/sources.list.d/ngrok.list &amp;&amp; \&#10; sudo apt update &amp;&amp; sudo apt install ngrok&#10;&#10;# Add authtoken &#10;ngrok config add-authtoken &lt;TOKEN&gt;" data-copy="true" class="code-block__copy-button"><svg width="17" height="16" viewbox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 1.6C0.5 0.716344 1.21634 0 2.1 0H10.1C10.9837 0 11.7 0.716345 11.7 1.6V4.8H14.9C15.7837 4.8 16.5 5.51634 16.5 6.4V14.4C16.5 15.2837 15.7837 16 14.9 16H6.9C6.01634 16 5.3 15.2837 5.3 14.4V11.2H2.1C1.21634 11.2 0.5 10.4837 0.5 9.6V1.6ZM6.9 11.2V14.4H14.9V6.4H11.7V9.6C11.7 10.4837 10.9837 11.2 10.1 11.2H6.9ZM10.1 9.6V1.6L2.1 1.6V9.6H10.1Z" fill="#A2A2A2"/></svg></button></div><pre class="code-block__content"><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">1</span><span class="token comment" style="color:rgb(106, 153, 85)"># Download and extract Ngrok </span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">2</span><span class="token plain"/><span class="token function" style="color:rgb(220, 220, 170)">curl</span><span class="token plain"> </span><span class="token parameter variable" style="color:rgb(156, 220, 254)">-s</span><span class="token plain"> https://ngrok-agent.s3.amazonaws.com/ngrok.asc </span><span class="token operator" style="color:rgb(212, 212, 212)">|</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">\</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">3</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">sudo</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">tee</span><span class="token plain"> /etc/apt/trusted.gpg.d/ngrok.asc </span><span class="token operator" style="color:rgb(212, 212, 212)">&gt;</span><span class="token plain">/dev/null </span><span class="token operator" style="color:rgb(212, 212, 212)">&amp;&amp;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">\</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">4</span><span class="token plain"> </span><span class="token builtin class-name" style="color:rgb(78, 201, 176)">echo</span><span class="token plain"> </span><span class="token string" style="color:rgb(206, 145, 120)">"deb https://ngrok-agent.s3.amazonaws.com buster main"</span><span class="token plain"> </span><span class="token operator" style="color:rgb(212, 212, 212)">|</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">\</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">5</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">sudo</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">tee</span><span class="token plain"> /etc/apt/sources.list.d/ngrok.list </span><span class="token operator" style="color:rgb(212, 212, 212)">&amp;&amp;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">\</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">6</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">sudo</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">apt</span><span class="token plain"> update </span><span class="token operator" style="color:rgb(212, 212, 212)">&amp;&amp;</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">sudo</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">apt</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">install</span><span class="token plain"> ngrok</span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">7</span><span class="token plain" style="display:inline-block"> </span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">8</span><span class="token plain"/><span class="token comment" style="color:rgb(106, 153, 85)"># Add authtoken </span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">9</span><span class="token plain">ngrok config add-authtoken </span><span class="token operator" style="color:rgb(212, 212, 212)">&lt;</span><span class="token plain">TOKEN</span><span class="token operator" style="color:rgb(212, 212, 212)">&gt;</span></div></pre></div><p>To give internet access to our app container from earlier at port 4321, run:</p><div class="code-block"><div class="code-block__copy"><div class="toast toast-bottom toast-success" id="feedback-copyButton_t95" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast__content-wrapper"><svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.00016 2.66666C5.05464 2.66666 2.66683 5.05448 2.66683 7.99999C2.66683 10.9455 5.05464 13.3333 8.00016 13.3333C10.9457 13.3333 13.3335 10.9455 13.3335 7.99999C13.3335 5.05448 10.9457 2.66666 8.00016 2.66666ZM1.3335 7.99999C1.3335 4.3181 4.31826 1.33333 8.00016 1.33333C11.6821 1.33333 14.6668 4.3181 14.6668 7.99999C14.6668 11.6819 11.6821 14.6667 8.00016 14.6667C4.31826 14.6667 1.3335 11.6819 1.3335 7.99999Z" fill="white"/><path d="M8.00016 6.66666C8.36835 6.66666 8.66683 6.96514 8.66683 7.33333V11.3333C8.66683 11.7015 8.36835 12 8.00016 12C7.63197 12 7.3335 11.7015 7.3335 11.3333V7.33333C7.3335 6.96514 7.63197 6.66666 8.00016 6.66666Z" fill="white"/><path d="M9.00016 4.99999C9.00016 5.55228 8.55245 5.99999 8.00016 5.99999C7.44788 5.99999 7.00016 5.55228 7.00016 4.99999C7.00016 4.44771 7.44788 3.99999 8.00016 3.99999C8.55245 3.99999 9.00016 4.44771 9.00016 4.99999Z" fill="white"/></svg><p class="toast__message">Code copied successfully!</p></div><button class="toast__button"><svg width="16" height="16" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="Icon=close, Size=24px"><path id="Icon" d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z" fill="white"/></g></svg></button></div><button id="copyButton_t95" data-code="ngrok http 4321" data-copy="true" class="code-block__copy-button"><svg width="17" height="16" viewbox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 1.6C0.5 0.716344 1.21634 0 2.1 0H10.1C10.9837 0 11.7 0.716345 11.7 1.6V4.8H14.9C15.7837 4.8 16.5 5.51634 16.5 6.4V14.4C16.5 15.2837 15.7837 16 14.9 16H6.9C6.01634 16 5.3 15.2837 5.3 14.4V11.2H2.1C1.21634 11.2 0.5 10.4837 0.5 9.6V1.6ZM6.9 11.2V14.4H14.9V6.4H11.7V9.6C11.7 10.4837 10.9837 11.2 10.1 11.2H6.9ZM10.1 9.6V1.6L2.1 1.6V9.6H10.1Z" fill="#A2A2A2"/></svg></button></div><pre class="code-block__content"><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">1</span><span class="token plain">ngrok http </span><span class="token number" style="color:rgb(181, 206, 168)">4321</span></div></pre></div><p>Copy the ngrok tunnel URL provided in the output.</p><figure class="image-block"><div class="image-block__background"><img class="image-block__image" src="https://www.datocms-assets.com/103916/1708695933-pasted-image-20240222160016.png?auto=compress%2Cformat" alt="Ngrok tunnel open"/></div><figcaption class="image-block__caption">Ngrok tunnel open</figcaption></figure><p>Your application should now be running and accessible via the Ngrok tunnel URL.</p><p>Paste the Ngrok tunnel URL into your browser to access your application. If you encounter a connection refused error, ensure that the necessary port is open on your server's firewall.</p><figure class="image-block"><div class="image-block__background image-block__offset"><img class="image-block__image" src="https://www.datocms-assets.com/103916/1708695940-pasted-image-20240222160038.png?auto=compress%2Cformat" alt="Astro preview through Ngrok tunnel"/></div><figcaption class="image-block__caption">Astro preview through Ngrok tunnel</figcaption></figure><p>To maintain a consistent URL for each ngrok session, set up a static domain via your dashboard. Once you've created it, you can instruct the ngrok agent to utilize this domain using the --domain flag. Begin by halting the current ngrok process with Ctrl+C, and then restart ngrok to apply the changes.</p><div class="code-block"><div class="code-block__copy"><div class="toast toast-bottom toast-success" id="feedback-copyButton_t102" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast__content-wrapper"><svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.00016 2.66666C5.05464 2.66666 2.66683 5.05448 2.66683 7.99999C2.66683 10.9455 5.05464 13.3333 8.00016 13.3333C10.9457 13.3333 13.3335 10.9455 13.3335 7.99999C13.3335 5.05448 10.9457 2.66666 8.00016 2.66666ZM1.3335 7.99999C1.3335 4.3181 4.31826 1.33333 8.00016 1.33333C11.6821 1.33333 14.6668 4.3181 14.6668 7.99999C14.6668 11.6819 11.6821 14.6667 8.00016 14.6667C4.31826 14.6667 1.3335 11.6819 1.3335 7.99999Z" fill="white"/><path d="M8.00016 6.66666C8.36835 6.66666 8.66683 6.96514 8.66683 7.33333V11.3333C8.66683 11.7015 8.36835 12 8.00016 12C7.63197 12 7.3335 11.7015 7.3335 11.3333V7.33333C7.3335 6.96514 7.63197 6.66666 8.00016 6.66666Z" fill="white"/><path d="M9.00016 4.99999C9.00016 5.55228 8.55245 5.99999 8.00016 5.99999C7.44788 5.99999 7.00016 5.55228 7.00016 4.99999C7.00016 4.44771 7.44788 3.99999 8.00016 3.99999C8.55245 3.99999 9.00016 4.44771 9.00016 4.99999Z" fill="white"/></svg><p class="toast__message">Code copied successfully!</p></div><button class="toast__button"><svg width="16" height="16" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="Icon=close, Size=24px"><path id="Icon" d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z" fill="white"/></g></svg></button></div><button id="copyButton_t102" data-code="ngrok http 4321 --domain jumpy-red-mollusk.ngrok-free.app" data-copy="true" class="code-block__copy-button"><svg width="17" height="16" viewbox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 1.6C0.5 0.716344 1.21634 0 2.1 0H10.1C10.9837 0 11.7 0.716345 11.7 1.6V4.8H14.9C15.7837 4.8 16.5 5.51634 16.5 6.4V14.4C16.5 15.2837 15.7837 16 14.9 16H6.9C6.01634 16 5.3 15.2837 5.3 14.4V11.2H2.1C1.21634 11.2 0.5 10.4837 0.5 9.6V1.6ZM6.9 11.2V14.4H14.9V6.4H11.7V9.6C11.7 10.4837 10.9837 11.2 10.1 11.2H6.9ZM10.1 9.6V1.6L2.1 1.6V9.6H10.1Z" fill="#A2A2A2"/></svg></button></div><pre class="code-block__content"><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">1</span><span class="token plain">ngrok http </span><span class="token number" style="color:rgb(181, 206, 168)">4321</span><span class="token plain"> </span><span class="token parameter variable" style="color:rgb(156, 220, 254)">--domain</span><span class="token plain"> jumpy-red-mollusk.ngrok-free.app</span></div></pre></div><p>If you prefer to limit access to your application, you can easily implement authentication with ngrok without modifying your app. For instance, if you use the Google account <a rel="noopener" target="_blank" href="mailto:alan@example.com">alan@example.com</a>, you can restrict access to yourself alone by executing ngrok with the following command:</p><div class="code-block"><div class="code-block__copy"><div class="toast toast-bottom toast-success" id="feedback-copyButton_t104" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast__content-wrapper"><svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.00016 2.66666C5.05464 2.66666 2.66683 5.05448 2.66683 7.99999C2.66683 10.9455 5.05464 13.3333 8.00016 13.3333C10.9457 13.3333 13.3335 10.9455 13.3335 7.99999C13.3335 5.05448 10.9457 2.66666 8.00016 2.66666ZM1.3335 7.99999C1.3335 4.3181 4.31826 1.33333 8.00016 1.33333C11.6821 1.33333 14.6668 4.3181 14.6668 7.99999C14.6668 11.6819 11.6821 14.6667 8.00016 14.6667C4.31826 14.6667 1.3335 11.6819 1.3335 7.99999Z" fill="white"/><path d="M8.00016 6.66666C8.36835 6.66666 8.66683 6.96514 8.66683 7.33333V11.3333C8.66683 11.7015 8.36835 12 8.00016 12C7.63197 12 7.3335 11.7015 7.3335 11.3333V7.33333C7.3335 6.96514 7.63197 6.66666 8.00016 6.66666Z" fill="white"/><path d="M9.00016 4.99999C9.00016 5.55228 8.55245 5.99999 8.00016 5.99999C7.44788 5.99999 7.00016 5.55228 7.00016 4.99999C7.00016 4.44771 7.44788 3.99999 8.00016 3.99999C8.55245 3.99999 9.00016 4.44771 9.00016 4.99999Z" fill="white"/></svg><p class="toast__message">Code copied successfully!</p></div><button class="toast__button"><svg width="16" height="16" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="Icon=close, Size=24px"><path id="Icon" d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z" fill="white"/></g></svg></button></div><button id="copyButton_t104" data-code="ngrok http 4321 --oauth=google --oauth-allow-email=alan@example.com" data-copy="true" class="code-block__copy-button"><svg width="17" height="16" viewbox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 1.6C0.5 0.716344 1.21634 0 2.1 0H10.1C10.9837 0 11.7 0.716345 11.7 1.6V4.8H14.9C15.7837 4.8 16.5 5.51634 16.5 6.4V14.4C16.5 15.2837 15.7837 16 14.9 16H6.9C6.01634 16 5.3 15.2837 5.3 14.4V11.2H2.1C1.21634 11.2 0.5 10.4837 0.5 9.6V1.6ZM6.9 11.2V14.4H14.9V6.4H11.7V9.6C11.7 10.4837 10.9837 11.2 10.1 11.2H6.9ZM10.1 9.6V1.6L2.1 1.6V9.6H10.1Z" fill="#A2A2A2"/></svg></button></div><pre class="code-block__content"><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">1</span><span class="token plain">ngrok http </span><span class="token number" style="color:rgb(181, 206, 168)">4321</span><span class="token plain"> </span><span class="token parameter variable" style="color:rgb(156, 220, 254)">--oauth</span><span class="token operator" style="color:rgb(212, 212, 212)">=</span><span class="token plain">google --oauth-allow-email</span><span class="token operator" style="color:rgb(212, 212, 212)">=</span><span class="token plain">alan@example.com</span></div></pre></div><p>When someone attempts to use your app, they must sign in using Google, and access will be exclusively permitted to your account. Please be aware that each time you restart ngrok without using the --domain flag, your app's URL will change.</p><p>If you wish to go a step further, ngrok also enables the <a href="https://ngrok.com/docs/guides/how-to-set-up-a-custom-domain/">use of your own custom domain</a>. By leveraging CNAME records, ngrok hosts an endpoint on your custom domain and offers comprehensive management of the TLS certificate lifecycle on your behalf.</p><h2 id="step-8-code-on-the-go-with-a-web-ide-on-any-device-optional">Step 8 - Code on the Go with a Web IDE on Any Device (optional)</h2><p>After setting up your application and ensuring it's accessible via Ngrok, you might want to take advantage of the <a rel="noopener" target="_blank" href="https://www.daytona.io/definitions/o/openvscode-server">OpenVSCode Server</a>, an open-source project licensed under MIT and maintained by Gitpod, for a full <a rel="noopener" target="_blank" href="https://www.daytona.io/definitions/c/cloud-ide">web IDE</a> experience, which allows you to run a web version of VS Code on your server and access it through your web browser.</p><figure class="image-block"><div class="image-block__background"><img class="image-block__image" src="https://www.datocms-assets.com/103916/1708695981-pasted-image-20240223142216.png?auto=compress%2Cformat" alt="Meme on remote dev env setup"/></div><figcaption class="image-block__caption">Meme on remote dev env setup</figcaption></figure><p>Here's how to set it up and run it:</p><ul class="unordered-list-block"><li><p><strong>Start the OpenVSCode Server</strong>: Within your remote server, <a rel="noopener" target="_blank" href="https://github.com/gitpod-io/openvscode-server">install the OpenVSCode Server</a> by running the following Docker command.</p></li></ul><div class="code-block"><div class="code-block__copy"><div class="toast toast-bottom toast-success" id="feedback-copyButton_t112" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast__content-wrapper"><svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.00016 2.66666C5.05464 2.66666 2.66683 5.05448 2.66683 7.99999C2.66683 10.9455 5.05464 13.3333 8.00016 13.3333C10.9457 13.3333 13.3335 10.9455 13.3335 7.99999C13.3335 5.05448 10.9457 2.66666 8.00016 2.66666ZM1.3335 7.99999C1.3335 4.3181 4.31826 1.33333 8.00016 1.33333C11.6821 1.33333 14.6668 4.3181 14.6668 7.99999C14.6668 11.6819 11.6821 14.6667 8.00016 14.6667C4.31826 14.6667 1.3335 11.6819 1.3335 7.99999Z" fill="white"/><path d="M8.00016 6.66666C8.36835 6.66666 8.66683 6.96514 8.66683 7.33333V11.3333C8.66683 11.7015 8.36835 12 8.00016 12C7.63197 12 7.3335 11.7015 7.3335 11.3333V7.33333C7.3335 6.96514 7.63197 6.66666 8.00016 6.66666Z" fill="white"/><path d="M9.00016 4.99999C9.00016 5.55228 8.55245 5.99999 8.00016 5.99999C7.44788 5.99999 7.00016 5.55228 7.00016 4.99999C7.00016 4.44771 7.44788 3.99999 8.00016 3.99999C8.55245 3.99999 9.00016 4.44771 9.00016 4.99999Z" fill="white"/></svg><p class="toast__message">Code copied successfully!</p></div><button class="toast__button"><svg width="16" height="16" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="Icon=close, Size=24px"><path id="Icon" d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z" fill="white"/></g></svg></button></div><button id="copyButton_t112" data-code="docker run -it --init -p 3000:3000 -v &quot;$(pwd):/home/workspace:cached&quot; gitpod/openvscode-server" data-copy="true" class="code-block__copy-button"><svg width="17" height="16" viewbox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 1.6C0.5 0.716344 1.21634 0 2.1 0H10.1C10.9837 0 11.7 0.716345 11.7 1.6V4.8H14.9C15.7837 4.8 16.5 5.51634 16.5 6.4V14.4C16.5 15.2837 15.7837 16 14.9 16H6.9C6.01634 16 5.3 15.2837 5.3 14.4V11.2H2.1C1.21634 11.2 0.5 10.4837 0.5 9.6V1.6ZM6.9 11.2V14.4H14.9V6.4H11.7V9.6C11.7 10.4837 10.9837 11.2 10.1 11.2H6.9ZM10.1 9.6V1.6L2.1 1.6V9.6H10.1Z" fill="#A2A2A2"/></svg></button></div><pre class="code-block__content"><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">1</span><span class="token function" style="color:rgb(220, 220, 170)">docker</span><span class="token plain"> run </span><span class="token parameter variable" style="color:rgb(156, 220, 254)">-it</span><span class="token plain"> </span><span class="token parameter variable" style="color:rgb(156, 220, 254)">--init</span><span class="token plain"> </span><span class="token parameter variable" style="color:rgb(156, 220, 254)">-p</span><span class="token plain"> </span><span class="token number" style="color:rgb(181, 206, 168)">3000</span><span class="token plain">:3000 </span><span class="token parameter variable" style="color:rgb(156, 220, 254)">-v</span><span class="token plain"> </span><span class="token string" style="color:rgb(206, 145, 120)">"</span><span class="token string variable" style="color:rgb(156, 220, 254)">$(</span><span class="token string variable builtin class-name" style="color:rgb(78, 201, 176)">pwd</span><span class="token string variable" style="color:rgb(156, 220, 254)">)</span><span class="token string" style="color:rgb(206, 145, 120)">:/home/workspace:cached"</span><span class="token plain"> gitpod/openvscode-server</span></div></pre></div><ul class="unordered-list-block"><li><p><strong>Configure Inbound Port Rules</strong>: To access the OpenVSCode Server, you need to configure the network settings to allow traffic on the port it's running on. If you're using a service like Azure, navigate to the network settings and set an inbound port rule to allow TCP traffic on port 3000. Ensure that you review the firewall configurations on your server, utilizing tools such as ufw or iptables.</p></li><li><p><strong>Test the Connection</strong>: Once the port is open, try accessing <code>http://remote_server_ip:3000</code> in your web browser. Replace <code>remote_server_ip</code> with your server's actual IP address. If you encounter a security warning about the connection not being private (which may happen in some browsers like Chrome), try using a different browser like Safari that may not present this issue. Please note that configuring HTTPS falls outside the scope of this guide.</p></li><li><p><strong>Access web IDE VS Code</strong>: If everything is configured correctly, you should see the OpenVSCode Server interface in your browser. You can now access your project straight from the Docker image without additional configuration.</p></li></ul><p>Now, you'll have a powerful, browser-based web IDE to access from anywhere, making your development process even more flexible and accessible.</p><h2 id="conclusion">Conclusion</h2><p>Congratulations! You've successfully set up your own fully-featured remote development environment without being locked into a proprietary platform!</p><p>You can now develop directly inside a container, ensuring a consistent development stack isolated from your local environment. With Ngrok, you have also secured your development environment with a tunnel to be shared with your team for collaboration.</p><h3>Key aspects included:</h3><ul class="unordered-list-block"><li><p>Provisioning a Linux server to host your infrastructure</p></li><li><p>Installing Docker Engine and Docker Compose to define environments</p></li><li><p>Getting Visual Studio Code Server running to enable remote coding</p></li><li><p>Using Docker containers to encapsulate infrastructure dependencies</p></li><li><p>Adding security through SSH, HTTPS encryption, authentication</p></li><li><p>Scripting setup steps to allow automation and portability</p></li><li><p>Exposing services securely over the internet with Ngrok</p></li></ul><p>You can now develop from anywhere using this robust, self-managed environment tailored to your needs!</p><h3>Some additional pointers:</h3><ul class="unordered-list-block"><li><p>Commit the <code>.devcontainer</code> folder to source control to share with the team.</p></li><li><p>Use Docker Compose for multi-service applications.</p></li><li><p>Install the Remote - Containers extension to use dev containers locally.</p></li><li><p>Read the docs of each tool we have used for more advanced configuration and troubleshooting.</p></li><li><p>Remember to delete any temporary accounts or services you no longer need to maintain security and avoid unnecessary charges.</p></li></ul><p>Let me know if you have any other questions.</p><h2 id="step-9-can-we-automate-this">Step 9 - Can we automate this?</h2><p>This is the process you'll undergo for setting up each remote development environment you create, and it's no simple task.</p><p>As an engineer, you might often find yourself thinking, "Could I automate this task with some scripts?" While the answer is yes to some extent, it's important to remember that any modifications you make will necessitate script updates. Eventually, you may find that you have to perform the task manually once more.</p><p>For consistency and portability across projects, we can automate the process using provisioning scripts.</p><p>First, create a setup script <code>setup.sh</code> that executes our past commands:</p><div class="code-block"><div class="code-block__copy"><div class="toast toast-bottom toast-success" id="feedback-copyButton_t129" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast__content-wrapper"><svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.00016 2.66666C5.05464 2.66666 2.66683 5.05448 2.66683 7.99999C2.66683 10.9455 5.05464 13.3333 8.00016 13.3333C10.9457 13.3333 13.3335 10.9455 13.3335 7.99999C13.3335 5.05448 10.9457 2.66666 8.00016 2.66666ZM1.3335 7.99999C1.3335 4.3181 4.31826 1.33333 8.00016 1.33333C11.6821 1.33333 14.6668 4.3181 14.6668 7.99999C14.6668 11.6819 11.6821 14.6667 8.00016 14.6667C4.31826 14.6667 1.3335 11.6819 1.3335 7.99999Z" fill="white"/><path d="M8.00016 6.66666C8.36835 6.66666 8.66683 6.96514 8.66683 7.33333V11.3333C8.66683 11.7015 8.36835 12 8.00016 12C7.63197 12 7.3335 11.7015 7.3335 11.3333V7.33333C7.3335 6.96514 7.63197 6.66666 8.00016 6.66666Z" fill="white"/><path d="M9.00016 4.99999C9.00016 5.55228 8.55245 5.99999 8.00016 5.99999C7.44788 5.99999 7.00016 5.55228 7.00016 4.99999C7.00016 4.44771 7.44788 3.99999 8.00016 3.99999C8.55245 3.99999 9.00016 4.44771 9.00016 4.99999Z" fill="white"/></svg><p class="toast__message">Code copied successfully!</p></div><button class="toast__button"><svg width="16" height="16" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="Icon=close, Size=24px"><path id="Icon" d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z" fill="white"/></g></svg></button></div><button id="copyButton_t129" data-code="#!/bin/bash&#10;&#10;# Add Docker's official GPG key&#10;curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg&#10;&#10;# Add Docker repository&#10;echo &quot;deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable&quot; | sudo tee /etc/apt/sources.list.d/docker.list &gt; /dev/null&#10;&#10;# Update and upgrade the system packages&#10;sudo apt update &amp;&amp; sudo apt upgrade -y&#10;&#10;# Install necessary packages for Docker installation&#10;sudo apt install apt-transport-https ca-certificates curl software-properties-common -y&#10;&#10;# Install Docker Engine, CLI, and containerd&#10;sudo apt install docker-ce docker-ce-cli containerd.io docker-compose-plugin -y&#10;&#10;# Add current user to the Docker group to run Docker commands without sudo&#10;sudo usermod -aG docker ${USER}&#10;&#10;# Print Docker version to verify installation&#10;docker --version&#10;&#10;# Install and configure Ngrok&#10;echo &quot;Installing Ngrok...&quot;&#10;curl -s https://ngrok-agent.s3.amazonaws.com/ngrok.asc | \&#10; sudo tee /etc/apt/trusted.gpg.d/ngrok.asc &gt;/dev/null &amp;&amp; \&#10; echo &quot;deb https://ngrok-agent.s3.amazonaws.com buster main&quot; | \&#10; sudo tee /etc/apt/sources.list.d/ngrok.list &amp;&amp; \&#10; sudo apt update &amp;&amp; sudo apt install ngrok&#10;&#10;echo &quot;Please enter your Ngrok auth token (You can find it on your Ngrok dashboard):&quot;&#10;read NGROK_AUTH_TOKEN&#10;ngrok config add-authtoken $NGROK_AUTH_TOKEN&#10;echo &quot;Ngrok installed and configured.&quot;&#10;&#10;# Install OpenVSCode Server using Docker&#10;echo &quot;Installing OpenVSCode Server...&quot;&#10;docker run -d --init -p 3000:3000 -v &quot;/workspace:/home/workspace:cached&quot; gitpod/openvscode-server&#10;echo &quot;OpenVSCode Server is running on port 3000. Access it at http://your_server_ip:3000&quot;&#10;&#10;# VS Code Server installation instructions&#10;echo &quot;To connect Visual Studio Code to this remote environment:&quot;&#10;echo &quot;1. Install the Remote - SSH extension in VS Code on your local machine.&quot;&#10;echo &quot;2. Use the Command Palette in VS Code to run 'Remote-SSH: Connect to Host...' and enter this server's SSH credentials.&quot;&#10;&#10;echo &quot;Setup complete. Please log out and back in for group changes to take effect.&quot;" data-copy="true" class="code-block__copy-button"><svg width="17" height="16" viewbox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 1.6C0.5 0.716344 1.21634 0 2.1 0H10.1C10.9837 0 11.7 0.716345 11.7 1.6V4.8H14.9C15.7837 4.8 16.5 5.51634 16.5 6.4V14.4C16.5 15.2837 15.7837 16 14.9 16H6.9C6.01634 16 5.3 15.2837 5.3 14.4V11.2H2.1C1.21634 11.2 0.5 10.4837 0.5 9.6V1.6ZM6.9 11.2V14.4H14.9V6.4H11.7V9.6C11.7 10.4837 10.9837 11.2 10.1 11.2H6.9ZM10.1 9.6V1.6L2.1 1.6V9.6H10.1Z" fill="#A2A2A2"/></svg></button></div><pre class="code-block__content"><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">1</span><span class="token shebang important">#!/bin/bash</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">2</span><span class="token plain" style="display:inline-block"> </span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">3</span><span class="token plain"/><span class="token comment" style="color:rgb(106, 153, 85)"># Add Docker's official GPG key</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">4</span><span class="token plain"/><span class="token function" style="color:rgb(220, 220, 170)">curl</span><span class="token plain"> </span><span class="token parameter variable" style="color:rgb(156, 220, 254)">-fsSL</span><span class="token plain"> https://download.docker.com/linux/ubuntu/gpg </span><span class="token operator" style="color:rgb(212, 212, 212)">|</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">sudo</span><span class="token plain"> gpg </span><span class="token parameter variable" style="color:rgb(156, 220, 254)">--dearmor</span><span class="token plain"> </span><span class="token parameter variable" style="color:rgb(156, 220, 254)">-o</span><span class="token plain"> /usr/share/keyrings/docker-archive-keyring.gpg</span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">5</span><span class="token plain" style="display:inline-block"> </span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">6</span><span class="token plain"/><span class="token comment" style="color:rgb(106, 153, 85)"># Add Docker repository</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">7</span><span class="token plain"/><span class="token builtin class-name" style="color:rgb(78, 201, 176)">echo</span><span class="token plain"> </span><span class="token string" style="color:rgb(206, 145, 120)">"deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu </span><span class="token string variable" style="color:rgb(156, 220, 254)">$(</span><span class="token string variable" style="color:rgb(156, 220, 254)">lsb_release </span><span class="token string variable parameter variable" style="color:rgb(156, 220, 254)">-cs</span><span class="token string variable" style="color:rgb(156, 220, 254)">)</span><span class="token string" style="color:rgb(206, 145, 120)"> stable"</span><span class="token plain"> </span><span class="token operator" style="color:rgb(212, 212, 212)">|</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">sudo</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">tee</span><span class="token plain"> /etc/apt/sources.list.d/docker.list </span><span class="token operator" style="color:rgb(212, 212, 212)">&gt;</span><span class="token plain"> /dev/null</span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">8</span><span class="token plain" style="display:inline-block"> </span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">9</span><span class="token plain"/><span class="token comment" style="color:rgb(106, 153, 85)"># Update and upgrade the system packages</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">10</span><span class="token plain"/><span class="token function" style="color:rgb(220, 220, 170)">sudo</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">apt</span><span class="token plain"> update </span><span class="token operator" style="color:rgb(212, 212, 212)">&amp;&amp;</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">sudo</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">apt</span><span class="token plain"> upgrade </span><span class="token parameter variable" style="color:rgb(156, 220, 254)">-y</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">11</span><span class="token plain" style="display:inline-block"> </span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">12</span><span class="token plain"/><span class="token comment" style="color:rgb(106, 153, 85)"># Install necessary packages for Docker installation</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">13</span><span class="token plain"/><span class="token function" style="color:rgb(220, 220, 170)">sudo</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">apt</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">install</span><span class="token plain"> apt-transport-https ca-certificates </span><span class="token function" style="color:rgb(220, 220, 170)">curl</span><span class="token plain"> software-properties-common </span><span class="token parameter variable" style="color:rgb(156, 220, 254)">-y</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">14</span><span class="token plain" style="display:inline-block"> </span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">15</span><span class="token plain"/><span class="token comment" style="color:rgb(106, 153, 85)"># Install Docker Engine, CLI, and containerd</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">16</span><span class="token plain"/><span class="token function" style="color:rgb(220, 220, 170)">sudo</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">apt</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">install</span><span class="token plain"> docker-ce docker-ce-cli containerd.io docker-compose-plugin </span><span class="token parameter variable" style="color:rgb(156, 220, 254)">-y</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">17</span><span class="token plain" style="display:inline-block"> </span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">18</span><span class="token plain"/><span class="token comment" style="color:rgb(106, 153, 85)"># Add current user to the Docker group to run Docker commands without sudo</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">19</span><span class="token plain"/><span class="token function" style="color:rgb(220, 220, 170)">sudo</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">usermod</span><span class="token plain"> </span><span class="token parameter variable" style="color:rgb(156, 220, 254)">-aG</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">docker</span><span class="token plain"> </span><span class="token variable" style="color:rgb(156, 220, 254)">${</span><span class="token variable environment constant" style="color:rgb(100, 102, 149)">USER</span><span class="token variable" style="color:rgb(156, 220, 254)">}</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">20</span><span class="token plain" style="display:inline-block"> </span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">21</span><span class="token plain"/><span class="token comment" style="color:rgb(106, 153, 85)"># Print Docker version to verify installation</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">22</span><span class="token plain"/><span class="token function" style="color:rgb(220, 220, 170)">docker</span><span class="token plain"> </span><span class="token parameter variable" style="color:rgb(156, 220, 254)">--version</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">23</span><span class="token plain" style="display:inline-block"> </span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">24</span><span class="token plain"/><span class="token comment" style="color:rgb(106, 153, 85)"># Install and configure Ngrok</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">25</span><span class="token plain"/><span class="token builtin class-name" style="color:rgb(78, 201, 176)">echo</span><span class="token plain"> </span><span class="token string" style="color:rgb(206, 145, 120)">"Installing Ngrok..."</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">26</span><span class="token plain"/><span class="token function" style="color:rgb(220, 220, 170)">curl</span><span class="token plain"> </span><span class="token parameter variable" style="color:rgb(156, 220, 254)">-s</span><span class="token plain"> https://ngrok-agent.s3.amazonaws.com/ngrok.asc </span><span class="token operator" style="color:rgb(212, 212, 212)">|</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">\</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">27</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">sudo</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">tee</span><span class="token plain"> /etc/apt/trusted.gpg.d/ngrok.asc </span><span class="token operator" style="color:rgb(212, 212, 212)">&gt;</span><span class="token plain">/dev/null </span><span class="token operator" style="color:rgb(212, 212, 212)">&amp;&amp;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">\</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">28</span><span class="token plain"> </span><span class="token builtin class-name" style="color:rgb(78, 201, 176)">echo</span><span class="token plain"> </span><span class="token string" style="color:rgb(206, 145, 120)">"deb https://ngrok-agent.s3.amazonaws.com buster main"</span><span class="token plain"> </span><span class="token operator" style="color:rgb(212, 212, 212)">|</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">\</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">29</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">sudo</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">tee</span><span class="token plain"> /etc/apt/sources.list.d/ngrok.list </span><span class="token operator" style="color:rgb(212, 212, 212)">&amp;&amp;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">\</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">30</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">sudo</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">apt</span><span class="token plain"> update </span><span class="token operator" style="color:rgb(212, 212, 212)">&amp;&amp;</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">sudo</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">apt</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">install</span><span class="token plain"> ngrok</span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">31</span><span class="token plain" style="display:inline-block"> </span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">32</span><span class="token plain"/><span class="token builtin class-name" style="color:rgb(78, 201, 176)">echo</span><span class="token plain"> </span><span class="token string" style="color:rgb(206, 145, 120)">"Please enter your Ngrok auth token (You can find it on your Ngrok dashboard):"</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">33</span><span class="token plain"/><span class="token builtin class-name" style="color:rgb(78, 201, 176)">read</span><span class="token plain"> NGROK_AUTH_TOKEN</span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">34</span><span class="token plain">ngrok config add-authtoken </span><span class="token variable" style="color:rgb(156, 220, 254)">$NGROK_AUTH_TOKEN</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">35</span><span class="token plain"/><span class="token builtin class-name" style="color:rgb(78, 201, 176)">echo</span><span class="token plain"> </span><span class="token string" style="color:rgb(206, 145, 120)">"Ngrok installed and configured."</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">36</span><span class="token plain" style="display:inline-block"> </span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">37</span><span class="token plain"/><span class="token comment" style="color:rgb(106, 153, 85)"># Install OpenVSCode Server using Docker</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">38</span><span class="token plain"/><span class="token builtin class-name" style="color:rgb(78, 201, 176)">echo</span><span class="token plain"> </span><span class="token string" style="color:rgb(206, 145, 120)">"Installing OpenVSCode Server..."</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">39</span><span class="token plain"/><span class="token function" style="color:rgb(220, 220, 170)">docker</span><span class="token plain"> run </span><span class="token parameter variable" style="color:rgb(156, 220, 254)">-d</span><span class="token plain"> </span><span class="token parameter variable" style="color:rgb(156, 220, 254)">--init</span><span class="token plain"> </span><span class="token parameter variable" style="color:rgb(156, 220, 254)">-p</span><span class="token plain"> </span><span class="token number" style="color:rgb(181, 206, 168)">3000</span><span class="token plain">:3000 </span><span class="token parameter variable" style="color:rgb(156, 220, 254)">-v</span><span class="token plain"> </span><span class="token string" style="color:rgb(206, 145, 120)">"/workspace:/home/workspace:cached"</span><span class="token plain"> gitpod/openvscode-server</span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">40</span><span class="token plain"/><span class="token builtin class-name" style="color:rgb(78, 201, 176)">echo</span><span class="token plain"> </span><span class="token string" style="color:rgb(206, 145, 120)">"OpenVSCode Server is running on port 3000. Access it at http://your_server_ip:3000"</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">41</span><span class="token plain" style="display:inline-block"> </span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">42</span><span class="token plain"/><span class="token comment" style="color:rgb(106, 153, 85)"># VS Code Server installation instructions</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">43</span><span class="token plain"/><span class="token builtin class-name" style="color:rgb(78, 201, 176)">echo</span><span class="token plain"> </span><span class="token string" style="color:rgb(206, 145, 120)">"To connect Visual Studio Code to this remote environment:"</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">44</span><span class="token plain"/><span class="token builtin class-name" style="color:rgb(78, 201, 176)">echo</span><span class="token plain"> </span><span class="token string" style="color:rgb(206, 145, 120)">"1. Install the Remote - SSH extension in VS Code on your local machine."</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">45</span><span class="token plain"/><span class="token builtin class-name" style="color:rgb(78, 201, 176)">echo</span><span class="token plain"> </span><span class="token string" style="color:rgb(206, 145, 120)">"2. Use the Command Palette in VS Code to run 'Remote-SSH: Connect to Host...' and enter this server's SSH credentials."</span><span class="token plain"/></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">46</span><span class="token plain" style="display:inline-block"> </span></div><div class="token-line" style="color:#9CDCFE"><span class="code-block__code-line">47</span><span class="token plain"/><span class="token builtin class-name" style="color:rgb(78, 201, 176)">echo</span><span class="token plain"> </span><span class="token string" style="color:rgb(206, 145, 120)">"Setup complete. Please log out and back in for group changes to take effect."</span></div></pre></div><p>Run the script:</p><ul class="unordered-list-block"><li><p>Copy the script above into a file named <code>setup.sh</code> on the server.</p></li><li><p>Make the script executable with <code>chmod +x setup.sh</code>.</p></li><li><p>Execute the script with <code>./setup.sh</code>.</p></li></ul><p>Consider wrapping them into a simple CLI tool to simplify further.</p><blockquote class="article-block-quote-simple article-block-quote"><p>Frankly, the situation is quite chaotic. The script is horrible and unlikely to function effectively because it requires customization to fit the particular system in question. Moreover, it doesn't address the routine tasks and interactions with repositories, workspaces, and the public preview, among other elements.</p></blockquote><p>Perhaps there's a better way.</p><h2 id="follow-daytona-on-github">Follow Daytona on GitHub</h2><p>Stay tuned for the imminent launch of <a rel="noopener" target="_blank" href="https://github.com/daytonaio">Daytona on GitHub</a>, our open-source project designed to automate development environment management. The aim to save developers and their teams substantial time by seamlessly standardizing dev environments across any machine, solving this challenge once and for all.</p><p/><div class="cta-block"><div class="cta-block__heading"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none"><path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="white" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"/></svg><h4 class="cta-block__title">Follow Daytona on GitHub</h4></div><p class="cta-block__description">Stay tuned for the imminent launch of open-source Daytona.</p><div class="cta-block__button-container"><a href="https://github.com/daytonaio" class="cta-block__button__primary" target="_blank">Visit Daytona GitHub</a></div></div><p>Join us in our mission to transform and accelerate the development process.</p><figure class="image-block"><div class="image-block__background"><img class="image-block__image" src="https://www.datocms-assets.com/103916/1708695948-pasted-image-20240223141314.png?auto=compress%2Cformat" alt="Exploding brain meme on Daytona"/></div><figcaption class="image-block__caption">Exploding brain meme on Daytona</figcaption></figure> <div class="tags-container"> <span class="tags-container__title">Tags::</span> <ul class="tags-container__list"> <li class="tags-container__item">cde</li><li class="tags-container__item"> remote</li><li class="tags-container__item"> devcontainer</li><li class="tags-container__item"> guide</li> </ul> </div> </div> </section><section class="article-author-section"> <div class="article-author-info"> <h6 class="article-author-info__title">About</h6> <figure class="article-author-info__figure"> <img src="https://www.datocms-assets.com/103916/1710518847-daytona-logotype-black.png?auto=compress%2Cformat&amp;fit=clip&amp;h=64" class="article-author-info__image article-author-info__image-light" alt="Daytona" width="416" height="64" loading="lazy" decoding="async"/> <img src="https://www.datocms-assets.com/103916/1710518840-daytona-logotype-white.png?auto=compress%2Cformat&amp;fit=clip&amp;h=64" class="article-author-info__image article-author-info__image-dark" alt="Daytona" width="416" height="64" loading="lazy" decoding="async"/> </figure> <p class="article-author-info__description">Daytona is a dev environment orchestration &amp; management platform empowering developers to focus on what matters.</p> <a href="https://daytona.io/" class="article-author-info__link"> [ → Learn more ] </a> </div> <div class="article-author-section__info"> <h6 class="article-author-section__info__title">The author</h6> <a href="/dotfiles/author/nikola-balic" class="author-info"> <figure class="author-info__figure"> <img src="https://www.datocms-assets.com/103916/1704810813-niko_avatar.png?auto=compress%2Cformat&amp;crop=faces&amp;facepad=2.5&amp;fit=facearea&amp;h=256&amp;mask=ellipse&amp;w=256" alt="Nikola Balić" width="256" height="256" loading="lazy" decoding="async"/> </figure> <div class="author-info__info"> <h5 class="author-info__name">Nikola Balić</h5> <span class="author-info__title">Head of Growth</span> </div> </a> <p class="article-author-section__info__description"> Niko, the Head of Growth at Daytona, is a generalist with extensive experience leading teams and projects, including advising and lecturing on various topics from complex networks and IP to inbound marketing and business growth. </p> </div> </section><section class="article-related-section"><div class="section-side-title"> <h2 class="section-side-title__heading section-side-title__heading__typed"> Related Content </h2> </div><div><ul class="article-related-section__list"><li><a class="article-card" href="/dotfiles/the-future-of-cloud-development-environments"> <figure class="article-card__figure"> <img src="https://www.datocms-assets.com/103916/1698072863-abstract-illo-19.png?auto=compress%2Cformat&amp;fit=crop&amp;h=782&amp;w=1564" class="article-card__figure-dark" alt="The Future of Cloud Development Environments" width="1564" height="782" loading="lazy" decoding="async"/> <img src="https://www.datocms-assets.com/103916/1698072863-abstract-illo-19.png?auto=compress%2Cformat&amp;fit=crop&amp;h=782&amp;w=1564" class="article-card__figure-light" alt="The Future of Cloud Development Environments" width="1564" height="782" loading="lazy" decoding="async"/> </figure> <div class="article-card__bottom-container"> <h4 class="article-card__title">The Future of Cloud Development Environments</h4> <div class="article-card__extra"> <time>JUN 11 2023</time> :: <span>Toma Puljak</span> </div> </div> </a></li><li><a class="article-card" href="/dotfiles/the-magic-of-remote-development-environments"> <figure class="article-card__figure"> <img src="https://www.datocms-assets.com/103916/1698073063-abstract-illo-54.png?auto=compress%2Cformat&amp;fit=crop&amp;h=782&amp;w=1564" class="article-card__figure-dark" alt="The Magic of Remote Development Environments" width="1564" height="782" loading="lazy" decoding="async"/> <img src="https://www.datocms-assets.com/103916/1698073063-abstract-illo-54.png?auto=compress%2Cformat&amp;fit=crop&amp;h=782&amp;w=1564" class="article-card__figure-light" alt="The Magic of Remote Development Environments" width="1564" height="782" loading="lazy" decoding="async"/> </figure> <div class="article-card__bottom-container"> <h4 class="article-card__title">The Magic of Remote Development Environments</h4> <div class="article-card__extra"> <time>FEB 18 2024</time> :: <span>Chad Metcalf</span> </div> </div> </a></li><li><a class="article-card" href="/dotfiles/the-rise-of-cloud-development-environments"> <figure class="article-card__figure"> <img src="https://www.datocms-assets.com/103916/1698072951-abstract-illo-35.png?auto=compress%2Cformat&amp;fit=crop&amp;h=782&amp;w=1564" class="article-card__figure-dark" alt="The Rise of Cloud Development Environments" width="1564" height="782" loading="lazy" decoding="async"/> <img src="https://www.datocms-assets.com/103916/1698072951-abstract-illo-35.png?auto=compress%2Cformat&amp;fit=crop&amp;h=782&amp;w=1564" class="article-card__figure-light" alt="The Rise of Cloud Development Environments" width="1564" height="782" loading="lazy" decoding="async"/> </figure> <div class="article-card__bottom-container"> <h4 class="article-card__title">The Rise of Cloud Development Environments</h4> <div class="article-card__extra"> <time>AUG 25 2023</time> :: <span>Nikola Balić</span> </div> </div> </a></li></ul></div></section><section class="newsletter-section"> <div class="section-side-title"> <h2 class="section-side-title__heading section-side-title__heading__typed"> Newsletter </h2> </div> <div class="newsletter-section__content"> <p class="newsletter-section__description"> <strong class="newsletter-section__description-strong">Subscribe to DotFiles Insider,</strong> a weekly newsletter for developers covering stories, techniques, guides and the latest product innovations coming. </p> <astro-island uid="Z1BA1yb" prefix="r6" component-url="/_astro/WaitlistForm.Bt3nOVZB.js" component-export="WaitlistForm" renderer-url="/_astro/client.DbokQZWz.js" props="{&quot;label&quot;:[0,&quot;Enter your email&quot;],&quot;fieldId&quot;:[0,&quot;newsletter-email&quot;],&quot;placeholder&quot;:[0,&quot;you@devco.com&quot;],&quot;baseUrl&quot;:[0],&quot;requestUrl&quot;:[0,&quot;/newsletter&quot;]}" ssr="" client="load" opts="{&quot;name&quot;:&quot;WaitlistForm&quot;,&quot;value&quot;:true}" await-children=""><form class="waitlist-form"><div class="waitlist-form__wrapper"><label class="waitlist-form__label" for="newsletter-email">Enter your email</label><div class="waitlist-form__submit-input"><input placeholder="you@devco.com" type="email" name="email" required="" aria-label="email" aria-required="true" autocapitalize="off" autocorrect="off" autocomplete="email" maxlength="75" class="waitlist-form__input" id="newsletter-email" value=""/><button class="waitlist-form__button" type="submit" aria-label="submit email"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none"><path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="white" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"/></svg></button></div></div></form></astro-island> </div> </section> <footer class="footer footer-border"> <div class="footer__sidebar"> <a href="/" aria-label="Daytona" class="footer__sidebar__link"> <figure class="footer__sidebar__logo"> <svg width="126" height="28" viewbox="0 0 414 92" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M50.0398 0L25.601 24.3134V13.9175L15.7263 13.9175L15.7263 37.6592H25.601L25.601 24.3134L32.5835 31.2601L57.0223 6.9467L50.0398 0Z" fill="white"/><path d="M42.8816 21.2853H75.7975V31.1094H42.8816V21.2853Z" fill="white"/><path d="M4.20948 55.6699H18.6175L0 37.1479L6.98251 30.2012L25.7513 48.8738L18.9201 55.6699H33.0109L33.0109 65.4941H4.20948V55.6699Z" fill="white"/><path d="M30.6562 82.2989L50.2913 62.7645L50.2913 77.7741H60.1661V48.3017H50.2913V62.4687L43.4575 55.6699L23.6737 75.3522L30.6562 82.2989Z" fill="white"/><path d="M50.2895 38.0567L72.4008 60.0546L79.3833 53.1079L57.272 31.11L50.2895 38.0567Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M116.722 72.408H131.131C139.284 72.5323 145.411 72.0804 149.767 70.2153C154.186 68.2881 157.298 65.0864 159.102 60.6102C160.969 56.134 161.903 49.6685 161.903 41.2135C161.903 33.3802 161.125 26.8808 159.569 22.4668C158.013 18.0528 155.368 14.7889 151.634 12.6751C147.963 10.4992 142.735 9.06934 135.952 8.38548C132.84 8.07464 129.822 7.91921 126.897 7.91921C124.982 7.87852 122.833 7.89109 120.517 7.90463C119.295 7.91178 118.027 7.91919 116.722 7.9192V72.408ZM145.193 61.263C142.953 62.6929 139.841 63.5321 135.858 63.7808C134.676 63.9052 133.4 63.9362 132.031 63.8741C130.724 63.8119 129.075 63.7187 127.083 63.5943V17.2473C129.697 17.2473 132.56 17.4028 135.672 17.7136C139.841 18.211 143.046 19.2057 145.287 20.6977C147.527 22.1898 149.114 24.49 150.047 27.5985C150.981 30.6448 151.448 34.9344 151.448 40.4675C151.448 46.3113 150.95 50.8808 149.954 54.1757C149.021 57.4085 147.434 59.7709 145.193 61.263Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M170.841 71.6141C173.206 72.4845 176.535 72.9197 180.829 72.9197C184.626 72.9197 187.519 72.4534 189.511 71.5209C191.502 70.5262 193.338 68.7233 195.019 66.1122H195.765V72.4562H204.914V39.4417C204.914 34.9033 204.322 31.4219 203.14 28.9973C201.958 26.5105 199.935 24.7698 197.072 23.7751C194.272 22.7182 190.289 22.1898 185.123 22.1898C180.02 22.1898 176.069 22.656 173.268 23.5886C170.53 24.4589 168.601 25.9821 167.48 28.158C166.36 30.2717 165.609 33.3251 165.609 37.2968H175.975C175.975 34.6857 176.598 32.9139 177.842 31.9814C179.149 31.0489 181.576 30.5826 185.123 30.5826C187.8 30.5826 189.884 30.8624 191.378 31.4219C192.872 31.9814 193.929 32.8828 194.552 34.1262C195.174 35.3696 195.485 37.1414 195.485 39.4417V40.7472H187.551C181.514 40.7472 176.846 41.2757 173.548 42.3325C170.25 43.3272 167.916 45.099 166.547 47.648C165.178 50.1347 164.493 53.6473 164.493 58.1856C164.493 62.0401 164.96 65.0242 165.893 67.138C166.889 69.2517 168.538 70.7438 170.841 71.6141ZM190.351 62.9416C188.609 63.8741 186.088 64.3404 182.79 64.3404C179.554 64.3404 177.344 63.843 176.162 62.8483C174.979 61.8536 174.388 60.0196 174.388 57.3463C174.388 55.1704 174.731 53.5229 175.415 52.4039C176.1 51.2227 177.22 50.3834 178.776 49.8861C180.394 49.3887 182.665 49.1089 185.59 49.0468L195.392 48.9535C195.267 52.9945 194.832 56.103 194.085 58.2789C193.338 60.4548 192.094 62.009 190.351 62.9416Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M302.325 72.9197C296.475 72.9197 291.963 72.1736 288.789 70.6816C285.615 69.1895 283.375 66.6406 282.068 63.0348C280.761 59.429 280.108 54.3001 280.108 47.648C280.108 40.9337 280.761 35.7737 282.068 32.1679C283.375 28.5621 285.615 26.0132 288.789 24.5211C291.963 22.9669 296.475 22.1898 302.325 22.1898C308.175 22.1898 312.655 22.9669 315.767 24.5211C318.941 26.0132 321.181 28.5621 322.488 32.1679C323.857 35.7737 324.542 40.9337 324.542 47.648C324.542 54.3001 323.857 59.429 322.488 63.0348C321.181 66.5784 318.941 69.1274 315.767 70.6816C312.593 72.1736 308.112 72.9197 302.325 72.9197ZM302.325 64.3404C305.561 64.3404 308.019 63.843 309.699 62.8483C311.442 61.8536 312.687 60.175 313.433 57.8126C314.18 55.4502 314.554 52.062 314.554 47.648C314.554 43.1718 314.18 39.7525 313.433 37.3901C312.687 34.9655 311.442 33.2559 309.699 32.2612C308.019 31.2043 305.561 30.6758 302.325 30.6758C299.089 30.6758 296.599 31.2043 294.857 32.2612C293.114 33.2559 291.87 34.9655 291.123 37.3901C290.376 39.7525 290.003 43.1718 290.003 47.648C290.003 52.062 290.376 55.4502 291.123 57.8126C291.87 60.175 293.114 61.8536 294.857 62.8483C296.599 63.843 299.089 64.3404 302.325 64.3404Z" fill="white"/><path d="M327.968 22.6505H337.957V30.3028H338.703C340.259 27.1322 342.002 24.9874 343.931 23.8683C345.922 22.7493 348.785 22.1898 352.519 22.1898C357 22.1898 360.454 22.7804 362.881 23.9616C365.308 25.0806 367.05 26.9768 368.108 29.6501C369.166 32.3233 369.695 36.1467 369.695 41.1202V72.4562H359.707V40.9337C359.707 38.3848 359.427 36.3954 358.867 34.9655C358.307 33.5356 357.342 32.5409 355.973 31.9814C354.604 31.4219 352.644 31.1421 350.092 31.1421C346.918 31.1421 344.46 31.6084 342.717 32.5409C341.037 33.4734 339.824 35.0588 339.077 37.2968C338.33 39.5349 337.957 42.7055 337.957 46.8087V72.4562H327.968V22.6505Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M389.916 72.9197C385.622 72.9197 382.292 72.4845 379.927 71.6141C377.625 70.7438 375.976 69.2517 374.98 67.138C374.046 65.0242 373.58 62.0401 373.58 58.1856C373.58 53.6473 374.264 50.1347 375.633 47.648C377.002 45.099 379.336 43.3272 382.635 42.3325C385.933 41.2757 390.6 40.7472 396.637 40.7472H404.572V39.4417C404.572 37.1414 404.261 35.3696 403.638 34.1262C403.016 32.8828 401.958 31.9814 400.464 31.4219C398.971 30.8624 396.886 30.5826 394.21 30.5826C390.663 30.5826 388.236 31.0489 386.929 31.9814C385.684 32.9139 385.062 34.6857 385.062 37.2968H374.904C374.904 32.9493 375.447 30.2717 376.567 28.158C377.687 25.9821 379.616 24.4589 382.354 23.5886C385.155 22.656 389.107 22.1898 394.21 22.1898C399.375 22.1898 403.358 22.7182 406.159 23.7751C409.021 24.7698 411.044 26.5105 412.226 28.9973C413.409 31.4219 414 34.9033 414 39.4417V72.4562H404.852V66.1122H404.105C402.425 68.7233 400.589 70.5262 398.597 71.5209C396.606 72.4534 393.712 72.9197 389.916 72.9197ZM391.876 64.3404C395.174 64.3404 397.695 63.8741 399.437 62.9416C401.18 62.009 402.425 60.4548 403.171 58.2789C403.918 56.103 404.354 52.9945 404.478 48.9535L394.677 49.0468C391.752 49.1089 389.48 49.3887 387.862 49.8861C386.306 50.3834 385.186 51.2227 384.501 52.4039C383.817 53.5229 383.475 55.1704 383.475 57.3463C383.475 60.0196 384.066 61.8536 385.248 62.8483C386.431 63.843 388.64 64.3404 391.876 64.3404Z" fill="white"/><path d="M248.382 22.5478H238.767L229.324 63.5096H225.887L216.822 22.5478H207.378L215.402 63.1656C216.446 68.4527 221.105 72.2654 226.521 72.2654H228.343L226.302 78.6412C226.201 78.9012 226.107 79.1623 226.013 79.4215C225.194 81.6849 224.427 83.8027 219.986 83.8027H213.8V91.8823L225.264 92C228.721 91.9412 233.064 89.4396 236.295 78.6412L248.382 22.5478Z" fill="white"/><path d="M272.209 72.5809C267.935 72.5809 264.699 72.0182 262.499 70.8928C260.363 69.7675 258.917 68.0794 258.163 65.8287C257.409 63.5155 257.032 60.3582 257.032 56.3569V30.8487H251.196L252.896 22.5961H257.409V12.0927L266.553 12.0927V22.5961H277.947V30.8487H266.553V55.9818C266.553 58.045 266.741 59.6392 267.118 60.7646C267.558 61.8274 268.407 62.6402 269.663 63.2029C270.92 63.7656 272.806 64.0469 275.319 64.0469H277.947V72.5809H272.209Z" fill="white"/></svg> </figure> </a> <div class="footer__sidebar__trademark"> <figure><svg width="11" height="12" viewbox="0 0 275 287" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.5584 193.736H114.275V227.925H14.5584V193.736Z" fill="white"/><path d="M148.464 74.076H262.426V108.265H148.464V74.076Z" fill="white"/><path d="M88.6338 84.6127L173.246 0L197.422 24.175L112.809 108.788L88.6338 84.6127Z" fill="white"/><path d="M89.157 170.084L24.175 105.102L0 129.277L64.9819 194.259L89.157 170.084Z" fill="white"/><path d="M174.629 217.911L106.133 286.407L81.9577 262.232L150.454 193.736L174.629 217.911Z" fill="white"/><path d="M174.106 132.44L250.66 208.994L274.835 184.819L198.281 108.265L174.106 132.44Z" fill="white"/><path d="M88.6338 48.434V131.057H54.4451L54.4451 48.434H88.6338Z" fill="white"/><path d="M208.294 168.094V270.66H174.106V168.094H208.294Z" fill="white"/></svg></figure> <figure><svg xmlns="http://www.w3.org/2000/svg" width="41" height="12" viewbox="0 0 41 12" fill="none"><path d="M35.8446 9.02816V0.868164H40.3686V1.80416H36.8766V4.31216H39.9126V5.24816H36.8766V8.09216H40.6086V9.02816H35.8446Z" fill="#A2A2A2"/><path d="M30.0532 9.12382C29.3692 9.11182 28.9972 9.08782 28.3972 9.02782V0.867825C29.0572 0.807824 29.8372 0.795824 30.6652 0.879825C33.0412 1.13182 33.7732 2.05582 33.7732 5.06782C33.7732 8.25982 32.9572 9.14782 30.0532 9.12382ZM29.4292 8.17582C30.1012 8.22382 30.3772 8.23583 30.8212 8.19982C32.2132 8.07982 32.7412 7.40782 32.7412 4.93582C32.7412 2.66782 32.2972 2.00782 30.6532 1.79182C30.2092 1.73182 29.7772 1.71982 29.4292 1.73182V8.17582Z" fill="#A2A2A2"/><path d="M23.9259 9.14805C21.7539 9.14805 21.0819 8.18805 21.0819 4.97205C21.0819 1.70805 21.7539 0.748047 23.9259 0.748047C26.0979 0.748047 26.7579 1.72005 26.7579 4.97205C26.7579 8.17605 26.0979 9.14805 23.9259 9.14805ZM22.1139 4.97205C22.1139 7.48005 22.5219 8.22405 23.9259 8.22405C25.3179 8.22405 25.7259 7.48005 25.7259 4.97205C25.7259 2.42805 25.3179 1.67205 23.9259 1.67205C22.5219 1.67205 22.1139 2.42805 22.1139 4.97205Z" fill="#A2A2A2"/><path d="M17.1626 9.14805C14.8946 9.14805 14.2466 8.20005 14.2466 4.96005C14.2466 1.70805 14.8946 0.748047 17.1506 0.748047C18.7466 0.748047 19.4306 1.22805 19.5746 2.84805H18.5546C18.3746 1.80405 18.0146 1.62405 17.2106 1.62405C15.6986 1.62405 15.2786 2.34405 15.2786 4.93605C15.2786 7.54005 15.6986 8.27205 17.1746 8.27205C18.1106 8.27205 18.4706 7.98405 18.6266 7.10805H19.6466C19.5026 8.68005 18.7706 9.14805 17.1626 9.14805Z" fill="#A2A2A2"/><path d="M6.89526 11.068V10.084H12.6553V11.068H6.89526Z" fill="#A2A2A2"/><path d="M0 8.55993V7.43193L4.452 5.39193V5.29593L0 3.25593V2.12793L5.4 4.75593V5.93193L0 8.55993Z" fill="#A2A2A2"/></svg></figure> </div> </div> <div class="footer__main"> <div class="footer__main__partner"> <a href="/company/partner" class="footer__main__partner__container"> <p class="footer__main__partner__description"> <span class="footer__main__partner__description-highlight">New</span> Partner with us </p> <p class="footer__main__partner__link"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none"><path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="white" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"/></svg> Learn more </p> </a> </div> <div class="footer__main__links"> <div class="footer__main__links__container"> <p class="footer__main__links__title">Company</p> <ul class="footer__main__links__link-list"> <li> <a href="/company/about" class="footer__main__links__link"> About </a> </li><li> <a href="/company/careers" class="footer__main__links__link"> Careers </a> </li><li> <a href="/company/brand" class="footer__main__links__link"> Brand </a> </li><li> <a href="/company/press" class="footer__main__links__link"> Press </a> </li><li> <a href="/company/partner" class="footer__main__links__link"> Partner </a> </li> </ul> </div> <div class="footer__main__links__container"> <p class="footer__main__links__title">Support</p> <ul class="footer__main__links__link-list"> <li> <a href="https://www.daytona.io/docs/" class="footer__main__links__link"> Documentation </a> </li><li> <a href="/company/contact" class="footer__main__links__link"> Contact </a> </li><li> <a href="/changelog" class="footer__main__links__link"> Changelog </a> </li><li> <a href="/dotfiles" class="footer__main__links__link"> Blog </a> </li><li> <a href="/definitions" class="footer__main__links__link"> Definitions </a> </li> </ul> </div> <div class="footer__main__links__container footer__main__links__container-special"> <p class="footer__main__links__title">Follow Daytona</p> <ul class="footer__main__links__link-list"> <li> <a href="https://github.com/daytonaio/daytona" class="footer__main__links__link" aria-label="Explore Daytona on Github."> <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <span>Github</span> </a> </li><li> <a href="https://join.slack.com/t/slack-qvd5984/shared_invite/zt-26jeiddev-ay4B8dp0OvZGPqmmOOM_ug" class="footer__main__links__link" aria-label="Join Daytona on Slack."> <svg width="16" height="16" viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none">