- 扫描 ID：
- 963c9d6c-7613-47b6-a4c4-ecaab84bf14f已完成
- 提交的 URL：
- https://www.gitpod.io/blog/native-ui-with-vnc
- 报告完成时间：
链接 · 找到 19 个
从页面中识别出的传出链接
| 链接 | 文本 |
|---|---|
| https://twitter.com/csweichel | Christian Weichel |
| https://github.com/csweichel/gitpod-hello-ui-demo | a simple desktop-native application in Go |
| https://github.com/andlabs/libui | libui |
| https://github.com/csweichel/gitpod-hello-ui-demo/commit/fea580735c09fa704531a810e8ec7ca6a5c03a88 | little bit of configuration |
| https://novnc.com | web-based VNC viewer |
| https://gitpod.io/ | Gitpod |
| http://www.karlrunge.com/x11vnc/ | x11vnc |
| https://novnc.com/info.html | novnc |
| https://janitor.technology/ | Janitor |
| https://github.com/gitpod-io/workspace-images/blob/d43c719bb2ff7b6849c0456fe21e3ca06c20168f/chunks/tool-vnc/Dockerfile#L2 | workspace images repo |
JavaScript 变量 · 找到 25 个
在页面窗口对象上加载的全局 JavaScript 变量是在函数外部声明的变量，可以从当前范围内的代码中的任何位置访问
| 名称 | 类型 |
|---|---|
| 0 | object |
| onbeforetoggle | object |
| documentPictureInPicture | object |
| onscrollend | object |
| __onGCastApiAvailable | function |
| MuxVideoElement | function |
| MediaDialog | function |
| MxpDialog | function |
| MuxPlayerElement | function |
| gtag | function |
控制台日志消息 · 找到 12 条
记录到 Web 控制台的消息
| 类型 | 类别 | 记录 |
|---|---|---|
| warning | other |
|
| warning | other |
|
| warning | other |
|
| warning | other |
|
| warning | other |
|
| warning | other |
|
| warning | other |
|
| warning | other |
|
| warning | other |
|
| warning | security |
|
| warning | other |
|
| warning | other |
|
HTML
页面的原始 HTML 正文
<!DOCTYPE html><html lang="en" class="display-banner"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="theme-color" content="#333333">
<meta name="google-site-verification" content="NBio3hCkfn2FKJpqZritJpXuyKo54noPGZzWsjDIp-M">
<!-- Mux Player -->
<link rel="preload" href="https://cdn.jsdelivr.net/npm/@mux/[email protected]" as="script" crossorigin="anonymous">
<script async="" src="https://snap.licdn.com/li.lms-analytics/insight.old.min.js"></script><script type="text/javascript" async="" src="https://www.googletagmanager.com/gtag/js?id=G-VWLSB1WXM5&l=dataLayer&cx=c&gtm=45He4cc1v860287806za200"></script><script type="text/javascript" async="" src="https://snap.licdn.com/li.lms-analytics/insight.min.js"></script><script async="" src="https://www.googletagmanager.com/gtm.js?id=GTM-P4LP64V"></script><script src="https://cdn.jsdelivr.net/npm/@mux/[email protected]"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('consent', 'default', {
ad_storage: 'denied',
ad_user_data: 'denied',
ad_personalization: 'denied',
analytics_storage: 'denied',
});
gtag('js', new Date());
gtag('config', 'G-VWLSB1WXM5');
</script>
<!-- Google Tag Manager -->
<script>
(function (w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({
'gtm.start': new Date().getTime(),
event: 'gtm.js',
});
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-P4LP64V');
</script>
<!-- End Google Tag Manager -->
<script>
function updateConsent(analytical, targeting) {
gtag('consent', 'update', {
ad_storage: targeting ? 'granted' : 'denied',
ad_user_data: targeting ? 'granted' : 'denied',
ad_personalization: targeting ? 'granted' : 'denied',
analytics_storage: analytical ? 'granted' : 'denied',
});
}
</script>
<script>
if (
window.location.pathname.length <= 1 &&
window.location.hash.indexOf('https://') > -1
) {
window.location.replace(
'https://gitpod.io/' + window.location.hash,
);
}
</script>
<!-- <script src="/lottie/lottie-interactivity.js" async="false"></script> -->
<!-- Schema Markup for structured data -->
<!-- See https://developers.google.com/search/docs/appearance/structured-data/logo -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Gitpod",
"description": "Gitpod is a cloud development environment for teams to efficiently and securely develop software. Improve your team's developer experience by coding in a CDE.",
"url": "https://www.gitpod.io/",
"image": "https://www.gitpod.io/images/media-kit/logo-mark.png",
"sameAs": [
"https://github.com/gitpod-io",
"https://twitter.com/gitpod",
"https://www.linkedin.com/company/gitpod/",
"https://www.youtube.com/@Gitpod"
],
"contactPoint": [
{
"@type": "ContactPoint",
"areaServed": "Worldwide",
"contactType": "customer service",
"url": "https://www.gitpod.io/contact/support"
}
]
}
</script>
<!-- End Schema Markup for structured data -->
<link rel="preload" as="font" href="/fonts/ABCDiatype-Regular.woff" type="font/woff2" crossorigin="anonymous">
<link rel="preload" as="font" href="/fonts/ABCDiatype-Bold.woff" type="font/woff2" crossorigin="anonymous">
<link rel="stylesheet" href="/font.css" as="style">
<link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
<link rel="icon" type="image/png" href="https://www.gitpod.io/favicon192.png">
<!-- This contains the contents of the <svelte:head> component, if
the current page has one -->
<link href="../_app/immutable/assets/0.ffa820a0.css" rel="stylesheet">
<link href="../_app/immutable/assets/card.a4267d01.css" rel="stylesheet">
<link href="../_app/immutable/assets/button.a8f10c71.css" rel="stylesheet">
<link href="../_app/immutable/assets/13.b00ecd40.css" rel="stylesheet">
<link href="../_app/immutable/assets/inputs-half.525edd7c.css" rel="stylesheet">
<link href="../_app/immutable/assets/input.b25ef039.css" rel="stylesheet">
<link href="../_app/immutable/assets/tooltip.d96b3ae5.css" rel="stylesheet">
<link href="../_app/immutable/assets/section.93d0668f.css" rel="stylesheet">
<link href="../_app/immutable/assets/link-icon-external.2528bf39.css" rel="stylesheet">
<link href="../_app/immutable/assets/post-content-layout.dd466701.css" rel="stylesheet">
<link href="../_app/immutable/assets/markdown-commons.ca7631c7.css" rel="stylesheet">
<link href="../_app/immutable/assets/prism-solarized-light.82b64bf6.css" rel="stylesheet">
<link href="../_app/immutable/assets/avatars.990bf377.css" rel="stylesheet">
<link href="../_app/immutable/assets/more-articles.b6ca2e71.css" rel="stylesheet">
<link rel="modulepreload" href="../_app/immutable/entry/start.da3e08d8.js">
<link rel="modulepreload" href="../_app/immutable/chunks/index.90bd7cd6.js">
<link rel="modulepreload" href="../_app/immutable/chunks/singletons.d1198f2c.js">
<link rel="modulepreload" href="../_app/immutable/chunks/control.c2cf8273.js">
<link rel="modulepreload" href="../_app/immutable/entry/app.618839eb.js">
<link rel="modulepreload" href="../_app/immutable/chunks/preload-helper.a4192956.js">
<link rel="modulepreload" href="../_app/immutable/nodes/0.78708fc1.js">
<link rel="modulepreload" href="../_app/immutable/chunks/js.cookie.edb2da2a.js">
<link rel="modulepreload" href="../_app/immutable/chunks/constants.a6a2d816.js">
<link rel="modulepreload" href="../_app/immutable/chunks/segment.bf392775.js">
<link rel="modulepreload" href="../_app/immutable/chunks/stores.c65040a9.js">
<link rel="modulepreload" href="../_app/immutable/chunks/helpers.d6e707a9.js">
<link rel="modulepreload" href="../_app/immutable/chunks/card.28ee6e76.js">
<link rel="modulepreload" href="../_app/immutable/chunks/button.5734dbe0.js">
<link rel="modulepreload" href="../_app/immutable/chunks/index.e4ab43f0.js">
<link rel="modulepreload" href="../_app/immutable/chunks/eventforwarder.1070a73e.js">
<link rel="modulepreload" href="../_app/immutable/chunks/modal.724c3374.js">
<link rel="modulepreload" href="../_app/immutable/chunks/navigation.3b8067d9.js">
<link rel="modulepreload" href="../_app/immutable/chunks/homepage-link-button.81977674.js">
<link rel="modulepreload" href="../_app/immutable/chunks/buttons-wrapper.44fa85a8.js">
<link rel="modulepreload" href="../_app/immutable/chunks/arrow.bf9cb0e7.js">
<link rel="modulepreload" href="../_app/immutable/chunks/index.28420890.js">
<link rel="modulepreload" href="../_app/immutable/chunks/link-button.8ca62863.js">
<link rel="modulepreload" href="../_app/immutable/chunks/logo.2802f099.js">
<link rel="modulepreload" href="../_app/immutable/nodes/2.cf1ff44b.js">
<link rel="modulepreload" href="../_app/immutable/chunks/index.6f9d1f14.js">
<link rel="modulepreload" href="../_app/immutable/nodes/3.b7ad2c89.js">
<link rel="modulepreload" href="../_app/immutable/nodes/13.9c1867c0.js">
<link rel="modulepreload" href="../_app/immutable/chunks/code-fence.fcb84e81.js">
<link rel="modulepreload" href="../_app/immutable/chunks/download.98d0da54.js">
<link rel="modulepreload" href="../_app/immutable/chunks/inputs-half.525b3dc8.js">
<link rel="modulepreload" href="../_app/immutable/chunks/input.91fa504f.js">
<link rel="modulepreload" href="../_app/immutable/chunks/tooltip.7a7193ed.js">
<link rel="modulepreload" href="../_app/immutable/chunks/submission-success.4841c633.js">
<link rel="modulepreload" href="../_app/immutable/chunks/support.7e55c263.js">
<link rel="modulepreload" href="../_app/immutable/chunks/card-small.40451fd4.js">
<link rel="modulepreload" href="../_app/immutable/chunks/base.70af3d4a.js">
<link rel="modulepreload" href="../_app/immutable/chunks/index.13c44115.js">
<link rel="modulepreload" href="../_app/immutable/chunks/section.77a94a43.js">
<link rel="modulepreload" href="../_app/immutable/chunks/gitpod-illustration.05a70d07.js">
<link rel="modulepreload" href="../_app/immutable/chunks/wrapper.5330bce1.js">
<link rel="modulepreload" href="../_app/immutable/chunks/link-icon-external.70e95252.js">
<link rel="modulepreload" href="../_app/immutable/chunks/open-graph.1614953f.js">
<link rel="modulepreload" href="../_app/immutable/chunks/dynamic-import-helper.be004503.js">
<link rel="modulepreload" href="../_app/immutable/chunks/utils.724952a3.js">
<link rel="modulepreload" href="../_app/immutable/chunks/post-content-layout.fe79109f.js">
<link rel="modulepreload" href="../_app/immutable/chunks/avatars.21833d6a.js">
<link rel="modulepreload" href="../_app/immutable/chunks/authors.966af319.js">
<link rel="modulepreload" href="../_app/immutable/chunks/chevron-right.e448146f.js">
<link rel="modulepreload" href="../_app/immutable/chunks/Icon.fc584e59.js">
<link rel="modulepreload" href="../_app/immutable/chunks/feedback-widget.82b2eb11.js">
<link rel="modulepreload" href="../_app/immutable/chunks/textarea.265fd5a5.js">
<link rel="modulepreload" href="../_app/immutable/chunks/t-button.e7631a70.js">
<link rel="modulepreload" href="../_app/immutable/chunks/more-articles.947c744d.js">
<link rel="modulepreload" href="../_app/immutable/chunks/explore.308669d9.js"><title>Developing native UI applications in Gitpod - Blog</title><link rel="canonical" href="https://www.gitpod.io/blog/native-ui-with-vnc"><link rel="preload" as="image" href="/images/blog/blog-banner-default-optimal.webp"><meta name="keywords" content="gitpod, dev environment, developer environment, devops, cloud ide, github ide, gitlab ide, javascript, online ide, web ide, code review, remote development, cloud development, ready to code, cde, cloud development environment, platform engineering, developer experience, DevX, developer velocity"><meta name="description" content="Gitpod is a web-based IDE. As such one would think it only works for web-based projects or anything else that does not require a native UI"><meta property="og:image" content="https://www.gitpod.io/images/blog/native-ui-with-vnc/virtual-x-sever-running-on-a-remote-desktop-client.png"><meta property="og:description" content="Gitpod is a web-based IDE. As such one would think it only works for web-based projects or anything else that does not require a native UI"><meta property="og:title" content="Developing native UI applications in Gitpod - Blog"><meta property="og:type" content="article"><meta property="og:url" content="https://www.gitpod.io/blog/native-ui-with-vnc"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:site" content="@gitpod"><meta name="twitter:creator" content="@gitpod"><meta name="twitter:title" content="Developing native UI applications in Gitpod - Blog"><meta name="twitter:description" content="Gitpod is a web-based IDE. As such one would think it only works for web-based projects or anything else that does not require a native UI"><meta name="twitter:image" content="https://www.gitpod.io/images/blog/native-ui-with-vnc/virtual-x-sever-running-on-a-remote-desktop-client.png"><meta name="twitter:image:src" content="https://www.gitpod.io/images/blog/native-ui-with-vnc/virtual-x-sever-running-on-a-remote-desktop-client.png">
<link rel="modulepreload" as="script" crossorigin="" href="https://www.gitpod.io/_app/immutable/nodes/1.9c886d9d.js"><link rel="modulepreload" as="script" crossorigin="" href="https://www.gitpod.io/_app/immutable/chunks/header.56f7d4de.js"><link rel="modulepreload" as="script" crossorigin="" href="https://www.gitpod.io/_app/immutable/chunks/image-light-dark.a3ba0b2a.js"><script src="https://assets.apollo.io/micro/website-tracker/tracker.iife.js?nocache=7u3vq6" async="" defer=""></script></head>
<body class="light banner-is-shown consent-is-shown">
<div id="svelte"> <div class="flex flex-col min-h-screen"><div id="choose-project-observer-target-top"></div> <nav class="fixed bg-none z-40 mx-auto w-full max-md:px-1 svelte-uhh60x" aria-label="Main"><div><a href="#main-content" class="transition-all duration-200 delay-[50ms] inline-block dark:shadow-slight font-semibold whitespace-nowrap bg-sand-dark dark:bg-light-black text-important dark:text-important hover:bg-sand-dark-hover focus:bg-sand-dark-hover focus:dark:bg-light-black-hover hover:text-important focus:text-important dark:hover:bg-light-black-hover py-2 px-6 text-btn-small leading-4 rounded-xl absolute left-2.5 top-2.5 -translate-y-full -mt-2.5 focus:mt-0 focus:translate-y-0 border-2 border-solid border-black z-50 !shadow-none text-center" data-sveltekit-preload-data="hover" target=""> Skip to Content</a></div> <div data-analytics="{"position":"announcement"}"><div class="announcement-banner flex justify-between items-center lg:mt-3 w-full lg:w-[99%] mx-auto lg:rounded-[4px] px-4 py-3 bg-[#191A1A] dakr:bg-[#404040BF] text-sm md:text-base svelte-1s1a9l4 top" style=""><div class="text-[#999795] flex flex-col sm:flex sm:flex-row text-center font-normal w-full justify-center items-center"><span class="lg:inline-flex items-center justify-center"><span class="font-bold px-3 py-[1px] !mb-0 my-auto flex flex-col justify-center text-center text-sm rounded-lg border-[0.5px] border-[#FFFFFF66] max-lg:hidden bg-gradient-to-b from-[#FFAE33] to-[#FF8A00] text-transparent bg-clip-text">Gartner® report</span> <span class="ml-2 text-[#F6F6F6]">2024 Hype Cycle™ for Platform Engineering - Get key
trends and insights</span> <span class="mx-2">|</span> <a href="/gartner-platform-engineering-hype-cycle-2024" data-sveltekit-preload-data="hover" class="!underline hover:no-underline focus:no-underline text-[#F6F6F6] dark:text-[#F6F6F6] hover:!text-[#DADADA] focus:text-[#DADADA] dark:hover:!text-[#DADADA] dark:focus:text-[#DADADA]">Get report</a></span></div> <div class="flex-1 flex justify-end"><button class="align-middle"><svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><title>Close</title><path d="M1.00107 1L11 11M10.9989 1L1 11" stroke="#F6F6F6" stroke-linecap="round"></path></svg></button></div></div></div> <div class="wrapper flex mt-3 items-center max-md:px-3 rounded-3xl justify-between max-w-4xl mx-auto bg-[#FFFFFFBF] dark:bg-[#404040BF] md:pl-macro md:pr-micro border border-[#0000001A] dark:border-[#FFFFFF33] svelte-uhh60x" style="backdrop-filter: blur(12px); box-shadow: 0px 1px 2px 0px #0000001A;"><div><a aria-label="Home" href="/"><svg width="131" height="40" viewBox="0 0 131 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8 w-28 lgx:h-8 lgx:w-32"><title>Gitpod Logo</title><path d="M56.0449 30.4444C50.1877 30.4444 46 26.25 46 20.7222C46 15.1944 50.216 11 55.96 11C58.7895 11 60.9966 12.0833 62.8358 13.6667L61.6757 16.0278C60.2609 14.6389 58.45 13.5 55.8468 13.5C51.6025 13.5 48.5466 16.4167 48.5466 20.7222C48.5466 25.0278 51.5742 27.9444 55.8751 27.9444C59.5818 27.9444 62.2133 25.75 62.6377 22.4167H55.0828V19.9167H65.5239V20.0278C65.5239 26.1389 62.0152 30.4444 56.0449 30.4444Z" class="fill-important"></path><path d="M68.1803 16.5556H70.6137V30.4444H68.1803V16.5556Z" class="fill-important"></path><path d="M82.1393 30.25V28.1389C81.3753 28.2778 80.7528 28.3611 79.8473 28.3611C78.6589 28.3611 78.2345 27.75 78.2345 26.6944V18.6389H82.111V16.5556H78.2345V12.8333H75.8011V16.5556H72.9998V18.6389H75.8011V26.5556C75.8011 29.5 77.131 30.5833 79.7059 30.5833C80.6113 30.5833 81.4036 30.4444 82.1393 30.25Z" class="fill-important"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M87.0989 36H84.6655V16.5556H87.0989V18.5556C88.259 17.0278 89.9851 16.2222 92.0789 16.2222C96.0969 16.2222 98.8981 19.2222 98.8981 23.5C98.8981 27.7778 96.0969 30.7778 92.0789 30.7778C90.07 30.7778 88.4288 30 87.0989 28.4167V36ZM86.9292 23.5C86.9292 26.5833 88.7967 28.5556 91.6545 28.5556C94.5123 28.5556 96.3798 26.5556 96.3798 23.5C96.3798 20.4444 94.5123 18.4444 91.6545 18.4444C88.7967 18.4444 86.9292 20.4167 86.9292 23.5Z" class="fill-important"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M100.413 23.5C100.413 27.6667 103.582 30.7778 107.826 30.7778C112.071 30.7778 115.24 27.6667 115.24 23.5C115.24 19.3333 112.071 16.2222 107.826 16.2222C103.582 16.2222 100.413 19.3333 100.413 23.5ZM112.722 23.5C112.722 26.3889 110.769 28.4722 107.826 28.4722C104.884 28.4722 102.931 26.3889 102.931 23.5C102.931 20.6111 104.884 18.5278 107.826 18.5278C110.769 18.5278 112.722 20.6111 112.722 23.5Z" class="fill-important"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M128.567 11H131V30.4444H128.567V28.4444C127.406 29.9722 125.68 30.7778 123.587 30.7778C119.569 30.7778 116.767 27.7778 116.767 23.5C116.767 19.2222 119.569 16.2222 123.587 16.2222C125.596 16.2222 127.237 17 128.567 18.5833V11ZM128.736 23.5C128.736 20.4167 126.869 18.4444 124.011 18.4444C121.153 18.4444 119.286 20.4444 119.286 23.5C119.286 26.5556 121.153 28.5556 124.011 28.5556C126.869 28.5556 128.736 26.5833 128.736 23.5Z" class="fill-important"></path><path d="M69.4026 14.7302C70.3643 14.7302 71.1439 13.9679 71.1439 13.0275C71.1439 12.087 70.3643 11.3247 69.4026 11.3247C68.4408 11.3247 67.6612 12.087 67.6612 13.0275C67.6612 13.9679 68.4408 14.7302 69.4026 14.7302Z" class="fill-important"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M21.388 1.99199C22.4572 3.8871 21.8071 6.30126 19.936 7.38418L8.30155 14.1176C7.99402 14.2956 7.8042 14.6271 7.8042 14.9861V25.5563C7.8042 25.9153 7.99402 26.2467 8.30155 26.4247L17.511 31.7548C17.8141 31.9301 18.1859 31.9301 18.489 31.7548L27.6985 26.4247C28.006 26.2467 28.1958 25.9153 28.1958 25.5563V18.9825L19.9175 23.7132C18.0406 24.7858 15.6605 24.1142 14.6015 22.2133C13.5425 20.3123 14.2056 17.9017 16.0825 16.8292L27.9277 10.0602C31.5358 7.99827 36 10.6386 36 14.8346V26.3588C36 29.0581 34.572 31.5504 32.258 32.8896L21.6846 39.009C19.4014 40.3303 16.5986 40.3303 14.3154 39.009L3.74196 32.8896C1.42803 31.5504 0 29.0581 0 26.3588V14.1835C0 11.4843 1.42803 8.99201 3.74196 7.65282L16.064 0.521394C17.9351 -0.561524 20.3188 0.0968851 21.388 1.99199Z" fill="url(#paint0_linear-gp-logo)"></path><defs><linearGradient id="paint0_linear-gp-logo" x1="27.0957" y1="6.04878" x2="8.28086" y2="35.2541" gradientUnits="userSpaceOnUse"><stop stop-color="#FFB45B"></stop><stop offset="1" stop-color="#FF8A00"></stop></linearGradient></defs></svg></a></div> <div><ul class="nav-items mx-auto hidden md:h-[60px] px-2 space-x-6 justify-center items-center md:space-x-4 svelte-uhh60x"><li><div class="relative group"><button class="flex items-center text-base transition-all duration-200 hover:text-important focus:text-important hover:bg-[#64645F1A] dark:hover:bg-[#000000] px-2 rounded-3xl group " aria-expanded="false" aria-haspopup="menu">Resources</button> </div></li> <li><div class="relative group"><button class="flex items-center text-base transition-all duration-200 hover:text-important focus:text-important hover:bg-[#64645F1A] dark:hover:bg-[#000000] px-2 rounded-3xl group " aria-expanded="false" aria-haspopup="menu">Solutions</button> </div></li> <li class="md:hover:bg-[#64645F1A] md:dark:hover:bg-[#000000] lg:px-2 lg:rounded-3xl group svelte-3575yt"><a aria-label="Blog" href="/blog" data-sveltekit-preload-data="hover" class="sm:text-body text-p-large hover:text-important group-hover:text-important group-focus:text-important focus:text-important active:text-important md:h-[60px] svelte-3575yt">Blog </a></li> <li class="md:hover:bg-[#64645F1A] md:dark:hover:bg-[#000000] lg:px-2 lg:rounded-3xl group svelte-3575yt"><a aria-label="Pricing" href="/pricing" data-sveltekit-preload-data="hover" class="sm:text-body text-p-large hover:text-important group-hover:text-important group-focus:text-important focus:text-important active:text-important md:h-[60px] svelte-3575yt">Pricing </a></li> <li class="md:hover:bg-[#64645F1A] md:dark:hover:bg-[#000000] lg:px-2 lg:rounded-3xl group svelte-3575yt"><a aria-label="Docs" href="/docs" data-sveltekit-preload-data="hover" class="sm:text-body text-p-large hover:text-important group-hover:text-important group-focus:text-important focus:text-important active:text-important md:h-[60px] svelte-3575yt">Docs </a></li></ul></div> <div class="login-wrapper items-center justify-end hidden space-x-macro svelte-uhh60x"><ul><li class="md:hover:bg-[#64645F1A] md:dark:hover:bg-[#000000] lg:px-2 lg:rounded-3xl group svelte-3575yt"><a aria-label="Login" href="/flex-or-classic" data-sveltekit-preload-data="off" class="sm:text-body text-p-large hover:text-important group-hover:text-important group-focus:text-important focus:text-important active:text-important md:h-[60px] svelte-3575yt">Login </a></li></ul> <a href="/contact/get-demo" class="transition-all duration-200 delay-[50ms] inline-block dark:shadow-none font-semibold whitespace-nowrap bg-content-primary text-content-invert hover:bg-content-secondary hover:!text-white py-2 px-6 text-btn-small leading-4 rounded-xl flex items-center justify-center text-center" data-sveltekit-preload-data="hover" target="" data-analytics="{"experiments_variant":"homepage_cta_get_a_demo_clicked"}"> Get a demo</a></div> <div class="xl:hidden flex items-center space-x-micro"><a href="/flex-or-classic" data-analytics="{"context":"dashboard"}" class="hidden sm:inline no-underline text-sm svelte-ipj3o7">Login</a> <button aria-label="Show / hide nav items" class="py-3" tabindex="0" aria-hidden="false"><div class="flex flex-col shadow-sm items-center justify-center h-8 w-[44px] px-[14px] !rounded-xl transition-all duration-200 bg-sand-light dark:bg-light-black border border-t-[#FFFFFF] border-x-[#FFFFFF]/60 border-b-[#ECE7E5] dark:border-0 svelte-10chfkt"></div></button></div></div> </nav> <main class="pt-14 w-full mx-auto px-0 svelte-t1hp79 extended" id="main-content"> <article><div class="flex flex-col justify-between w-11/12 lg:w-full max-w-[43rem] mx-auto mt-small mb-8 pt-0 md:pt-small"><div><div class="content-blog prose prose-img:rounded-2xl max-w-none mt-xx-small svelte-a7e1vx"><div class="flex flex-row mx-auto gap-1 mb-x-small justify-start items-center"><a href="/blog" class="docs-a-tag no-underline hover:underline inline-block text-base text-content-primary font-bold">All posts</a> </div> <header class="mb-4 lg:mb-x-small"><h1 class="!mb-0 text-3xl md:text-[40px] leading-tight">Developing native UI applications in Gitpod</h1> <div class="!mt-4"> <div class="flex flex-col gap-3"><div class="flex items-center gap-2"><a href="https://twitter.com/csweichel" target="_blank" rel="noopener noreferrer"><span class="-space-x-2"><img src="https://github.com/csweichel.png" alt="@csweichel's avatar on GitHub" height="28" width="28" title="@csweichel" class="inline !rounded-full border border-solid border-card " loading="lazy"></span></a> <div class="flex items-center text-muted text-sm"><a href="https://twitter.com/csweichel" class="docs-a-tag no-underline hover:underline" target="_blank" rel="noopener noreferrer"><span class="font-bold text-important">Christian Weichel</span></a> <span class="mx-2">/</span> <span>Co-Founder, CTO at Gitpod</span> <span class="mx-2">/</span> <span>Oct 4, 2018</span></div> </div></div></div></header> <p>Gitpod is a web-based IDE. As such one would think it only works for web-based projects or anything else that does not require a native UI. However, there’s still a plethora of native UI applications around and many of them are here to stay. In this article we’ll go through how to use Gitpod for developing native desktop UI applications.</p> <p><img src="/images/blog/native-ui-with-vnc/virtual-x-sever-running-on-a-remote-desktop-client.png" alt="VS Code in Gitpod" width="4000" height="2024" loading="lazy"></p> <p>A few days ago <a href="/blog/docker-in-gitpod">Gero introduced Docker builds to Gitpod</a> with which you can bring your own Dockerfile (instead of a pre-built image), and Gitpod will build the image for you. We’ll use that feature to setup a cloud-based developer environment for native UI applications.</p> <h2 id="hello-world">Hello World<a href="#hello-world"><span class="icon icon-link header-anchor" aria-label="Hello World permalink"></span></a></h2> <p>Let’s use Gitpod to write <a class="no-nowrap" href="https://github.com/csweichel/gitpod-hello-ui-demo">a simple desktop-native application in Go</a> using <a href="https://github.com/andlabs/libui" rel="nofollow noopener noreferrer" target="_blank">libui</a>. First, we create a GitHub repo and a <a href="https://github.com/csweichel/gitpod-hello-ui-demo/commit/fea580735c09fa704531a810e8ec7ca6a5c03a88" rel="nofollow noopener noreferrer" target="_blank">little bit of configuration</a>: we need a Dockerfile to install libui’s dependencies (see below), and we need to tell Gitpod to use that Dockerfile.</p> <div class="my-8 overflow-y-auto rounded-2xl border-[#ECE7E5] dark:border-card border-2"><div class="sticky bg-[#ECE7E5] dark:bg-card top-0 left-0 z-10 py-1 flex items-center"><div class="ml-4 flex items-center"><div class="flex items-center justify-items-center gap-x-2"><img class="dark:hidden" src="/svg/docs/language.svg" alt="language icon"> <img class="hidden dark:block" src="/svg/docs/language-dark.svg" alt="language icon"> <span class="text-[#565252] dark:text-[#999795] font-bold">dockerfile</span></div></div> <div class="flex-1"></div> <button class="mr-4 group px-2 py-1 transition-all duration-200 delay-[50] text-[12px] dark:stroke-[#999795] dark:hover:stroke-divider-light hover:stroke-black stroke-[#565252]"><div class="opacity-100 flex items-center gap-1 underline group-hover:text-black underline-offset-[0.25em] dark:group-hover:text-important group-hover:decoration-transparent transition-all duration-200 delay-[50]"><span><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><title>Copy code</title><g clip-path="url(#clip0_4942_2631)"><path d="M3.75 11.25C3.05109 11.25 2.70163 11.25 2.42597 11.1358C2.05843 10.9836 1.76642 10.6916 1.61418 10.324C1.5 10.0484 1.5 9.69891 1.5 9V3.9C1.5 3.05992 1.5 2.63988 1.66349 2.31901C1.8073 2.03677 2.03677 1.8073 2.31901 1.66349C2.63988 1.5 3.05992 1.5 3.9 1.5H9C9.69891 1.5 10.0484 1.5 10.324 1.61418C10.6916 1.76642 10.9836 2.05843 11.1358 2.42597C11.25 2.70163 11.25 3.05109 11.25 3.75M9.15 16.5H14.1C14.9401 16.5 15.3601 16.5 15.681 16.3365C15.9632 16.1927 16.1927 15.9632 16.3365 15.681C16.5 15.3601 16.5 14.9401 16.5 14.1V9.15C16.5 8.30992 16.5 7.88988 16.3365 7.56901C16.1927 7.28677 15.9632 7.0573 15.681 6.91349C15.3601 6.75 14.9401 6.75 14.1 6.75H9.15C8.30992 6.75 7.88988 6.75 7.56901 6.91349C7.28677 7.0573 7.0573 7.28677 6.91349 7.56901C6.75 7.88988 6.75 8.30992 6.75 9.15V14.1C6.75 14.9401 6.75 15.3601 6.91349 15.681C7.0573 15.9632 7.28677 16.1927 7.56901 16.3365C7.88988 16.5 8.30992 16.5 9.15 16.5Z" class="fill-bg-sand-dark dark:fill-bg-light-black hover:[##999795]" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g><defs><clipPath id="clip0_4942_2631"><rect width="18" height="18" fill="white"></rect></clipPath></defs></svg></span></div> <div class="transition-opacity z-10 duration-300 rounded-md ease-out hidden opacity-0" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><title>Copy copied</title><path d="M15 4.5L6.75 12.75L3 9" class="fill-bg-sand-dark dark:fill-bg-light-black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></div></button></div> <div><pre class="language-dockerfile !m-0 !pl-4 xl:!pl-6 !rounded-none !bg-[#F5F4F4] dark:!bg-new-black-bg"><code class="language-dockerfile !text-base !leading-[26px]"><span class="token instruction"><span class="token keyword">FROM</span> gitpod/workspace-full-vnc</span>
<span class="token instruction"><span class="token keyword">RUN</span> sudo apt-get update && <span class="token operator">\</span>
sudo apt-get install -y libgtk-3-dev && <span class="token operator">\</span>
sudo rm -rf /var/lib/apt/lists/*</span></code></pre></div></div> <p>This Dockerfile uses the gitpod/workspace-full-vnc image which supports the setup necessary to run X11 and VNC in Gitpod. It runs a <a href="https://novnc.com" rel="nofollow noopener noreferrer" target="_blank">web-based VNC viewer</a> on port 6080 — during startup, Gitpod will ask you if you want to open this page.</p> <p><img src="https://cdn-images-1.medium.com/max/6720/1*8xUjJfd3pV0QXyK-ytyhwA.png" alt="The Hello World UI example running in Gitpod" loading="lazy"><em>The Hello World UI example running in Gitpod</em></p> <h2 id="native-ui-in-gitpod--x11--vnc">Native UI in Gitpod = X11 + VNC<a href="#native-ui-in-gitpod--x11--vnc"><span class="icon icon-link header-anchor" aria-label="Native UI in Gitpod = X11 + VNC permalink"></span></a></h2> <p><a href="https://gitpod.io/" rel="nofollow noopener noreferrer" target="_blank">Gitpod</a> runs on Linux, so we need an X11 server that our UI application can connect to. As we do not have a physical display attached, we’ll use a framebuffer based X server, namely Xvfb. Using <a href="http://www.karlrunge.com/x11vnc/" rel="nofollow noopener noreferrer" target="_blank">x11vnc</a>, we can serve the virtual screen of the X server to a VNC client. There are a few VNC clients that run in the browser out there, but we’ll go with one that’s battle tested: <a href="https://novnc.com/info.html" rel="nofollow noopener noreferrer" target="_blank">novnc</a>. The combination of Xvfb, x11vnc and novnc is a proven one, and it happens to be the same that e.g. <a href="https://janitor.technology/" rel="nofollow noopener noreferrer" target="_blank">Janitor</a> relies on.</p> <p>To make this setup work in Gitpod, we first create a Docker image that has the required tools installed, and a small bash script to tie things together. I went ahead and prepared those things in the <a href="https://github.com/gitpod-io/workspace-images/blob/d43c719bb2ff7b6849c0456fe21e3ca06c20168f/chunks/tool-vnc/Dockerfile#L2" rel="nofollow noopener noreferrer" target="_blank">workspace images repo</a>. Any Gitpod workspace started using the workspace-full-vnc image, has a DISPLAY environment variable set in the .bashrc and comes with a running X11 server. No need for any manual setup.</p> <h2 id="lets-go-big-running-visual-studio-code-in-gitpod">Let’s go big: running Visual Studio Code in Gitpod<a href="#lets-go-big-running-visual-studio-code-in-gitpod"><span class="icon icon-link header-anchor" aria-label="Let’s go big: running Visual Studio Code in Gitpod permalink"></span></a></h2> <p>Using this setup, we can build and <a href="https://gitpod.io/#github.com/microsoft/vscode" rel="nofollow noopener noreferrer" target="_blank">run Visual Studio Code in Gitpod</a>. VS Code needs a few more libraries than the bare-bones X11 setup we’ve built so far. But again those libraries are easy enough to install in a Dockerfile:</p> <div class="my-8 overflow-y-auto rounded-2xl border-[#ECE7E5] dark:border-card border-2"><div class="sticky bg-[#ECE7E5] dark:bg-card top-0 left-0 z-10 py-1 flex items-center"><div class="ml-4 flex items-center"><div class="flex items-center justify-items-center gap-x-2"><img class="dark:hidden" src="/svg/docs/language.svg" alt="language icon"> <img class="hidden dark:block" src="/svg/docs/language-dark.svg" alt="language icon"> <span class="text-[#565252] dark:text-[#999795] font-bold">dockerfile</span></div></div> <div class="flex-1"></div> <button class="mr-4 group px-2 py-1 transition-all duration-200 delay-[50] text-[12px] dark:stroke-[#999795] dark:hover:stroke-divider-light hover:stroke-black stroke-[#565252]"><div class="opacity-100 flex items-center gap-1 underline group-hover:text-black underline-offset-[0.25em] dark:group-hover:text-important group-hover:decoration-transparent transition-all duration-200 delay-[50]"><span><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><title>Copy code</title><g clip-path="url(#clip0_4942_2631)"><path d="M3.75 11.25C3.05109 11.25 2.70163 11.25 2.42597 11.1358C2.05843 10.9836 1.76642 10.6916 1.61418 10.324C1.5 10.0484 1.5 9.69891 1.5 9V3.9C1.5 3.05992 1.5 2.63988 1.66349 2.31901C1.8073 2.03677 2.03677 1.8073 2.31901 1.66349C2.63988 1.5 3.05992 1.5 3.9 1.5H9C9.69891 1.5 10.0484 1.5 10.324 1.61418C10.6916 1.76642 10.9836 2.05843 11.1358 2.42597C11.25 2.70163 11.25 3.05109 11.25 3.75M9.15 16.5H14.1C14.9401 16.5 15.3601 16.5 15.681 16.3365C15.9632 16.1927 16.1927 15.9632 16.3365 15.681C16.5 15.3601 16.5 14.9401 16.5 14.1V9.15C16.5 8.30992 16.5 7.88988 16.3365 7.56901C16.1927 7.28677 15.9632 7.0573 15.681 6.91349C15.3601 6.75 14.9401 6.75 14.1 6.75H9.15C8.30992 6.75 7.88988 6.75 7.56901 6.91349C7.28677 7.0573 7.0573 7.28677 6.91349 7.56901C6.75 7.88988 6.75 8.30992 6.75 9.15V14.1C6.75 14.9401 6.75 15.3601 6.91349 15.681C7.0573 15.9632 7.28677 16.1927 7.56901 16.3365C7.88988 16.5 8.30992 16.5 9.15 16.5Z" class="fill-bg-sand-dark dark:fill-bg-light-black hover:[##999795]" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></g><defs><clipPath id="clip0_4942_2631"><rect width="18" height="18" fill="white"></rect></clipPath></defs></svg></span></div> <div class="transition-opacity z-10 duration-300 rounded-md ease-out hidden opacity-0" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><title>Copy copied</title><path d="M15 4.5L6.75 12.75L3 9" class="fill-bg-sand-dark dark:fill-bg-light-black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></div></button></div> <div><pre class="language-dockerfile !m-0 !pl-4 xl:!pl-6 !rounded-none !bg-[#F5F4F4] dark:!bg-new-black-bg"><code class="language-dockerfile !text-base !leading-[26px]"><span class="token instruction"><span class="token keyword">FROM</span> gitpod/workspace-full-vnc</span>
<span class="token instruction"><span class="token keyword">RUN</span> sudo apt-get update && <span class="token operator">\</span>
sudo apt-get install -y libx11-dev libxkbfile-dev libsecret-1-dev libgconf2–4 libnss3 && <span class="token operator">\</span>
sudo rm -rf /var/lib/apt/lists/*</span></code></pre></div></div> <p>I added this setup to <a href="https://github.com/gitpod-io/definitely-gp/tree/master/vscode" rel="nofollow noopener noreferrer" target="_blank">definitely-gp</a>, so that when you open the VS code repository in Gitpod, it will build the application, and start it. To see and interact with the application, open the noVNC session that’s served on port 6080:</p> <p><img src="https://cdn-images-1.medium.com/max/2000/1*-yHSkPGNR6Vs07MjLKQAUA.gif" alt="How to open noVNC served on port 6080" loading="lazy"></p> <h2 id="conclusion">Conclusion<a href="#conclusion"><span class="icon icon-link header-anchor" aria-label="Conclusion permalink"></span></a></h2> <p>By plugging together a handful of tools we can develop native UI applications in Gitpod, and stay in the browser altogether. Naturally, this comes with a few limitations, e.g. at the moment this is Linux only, so testing on different platforms is not feasible. Also, noVNC disconnects from the VNC server every now and then; reloading noVNC brings it back.</p> <p>Surprisingly, frame-rate is not one of those limitations: you could <a href="https://gitpod.io/#https://github.com/csweichel/gitpod-browser-demo" rel="nofollow noopener noreferrer" target="_blank">open a browser inside a Gitpod</a> and watch YouTube videos; it’s best you pick one without sound, though. :)</p> </div></div></div></article> <section id="" class="w-11/12 lg:w-full lg:max-w-[75rem] mx-auto !my-large md:!my-xx-large svelte-19uare6" style=""><div class="justify-center mx-auto text-center max-w-[720px] !max-w-4xl"><div class="text-[32px] leading-10 md:leading-[64px] md:text-5xl font-normal text-important">Standardize and automate your development environments today</div> <p class="mt-4 text-lg md:text-2xl"></p> <div class="flex flex-wrap gap-2 sm:gap-4 mt-x-small lg:mt-x-small justify-center"><a href="/contact/sales" class="transition-all duration-200 delay-[50ms] inline-block dark:shadow-none font-semibold whitespace-nowrap w-[267px] h-[54px] justify-center items-center rounded-2xl md:rounded-[20px] inline-flex px-8 py-3.5 gap-2.5 bg-content-primary text-content-invert hover:bg-content-secondary hover:!text-white max-md:w-full text-center" data-sveltekit-preload-data="hover"> Contact sales</a> <a href="https://app.gitpod.io/" class="transition-all duration-200 delay-[50ms] inline-block dark:shadow-none font-semibold whitespace-nowrap w-[267px] h-[54px] justify-center items-center rounded-2xl md:rounded-[20px] inline-flex px-8 py-3.5 gap-2.5 text-content-primary dark:text-important border border-content-primary bg-transparent hover:bg-[#F5F4F3] focus:bg-[#F5F4F3] hover:dark:bg-light-black max-md:w-full text-center" data-sveltekit-preload-data="off" target="_blank"> Try now for free</a></div></div></section> <section id="" class="w-11/12 lg:w-full lg:max-w-[75rem] mx-auto !my-large svelte-19uare6" style=""><h2 class="text-xl font-bold text-important !mb-micro mb-small">Similar posts</h2> <div class="previous"><ul class="list-layout flex flex-col svelte-mkphn2"><a href="/blog/self-hosted-runners" class="group"><li class="self-stretch py-4 border-b border-divider/20 flex flex-col lg:flex-row items-start lg:items-center gap-4 lg:gap-8 hover:bg-sand-light/50 transition-colors duration-200"><div class="w-full lg:w-24 shrink-0 text-left lg:text-right text-muted text-sm font-mono">9 Oct 2024</div> <div class="flex-1 text-important text-lg lg:text-xl font-bold leading-normal group-hover:underline">Runners: Self-host Gitpod in under 3 minutes</div> <div class="w-full lg:w-auto shrink-0 flex items-center gap-2 justify-start lg:justify-end"><span class="text-muted text-sm">By Talia M.</span> <span class="-space-x-2"><img src="https://github.com/taliamoyal.png" alt="@taliamoyal's avatar on GitHub" height="28" width="28" title="@taliamoyal" class="inline !rounded-full border border-solid border-card " loading="lazy"></span></div></li> </a><a href="/blog/recap-gitpod-flex" class="group"><li class="self-stretch py-4 border-b border-divider/20 flex flex-col lg:flex-row items-start lg:items-center gap-4 lg:gap-8 hover:bg-sand-light/50 transition-colors duration-200"><div class="w-full lg:w-24 shrink-0 text-left lg:text-right text-muted text-sm font-mono">8 Oct 2024</div> <div class="flex-1 text-important text-lg lg:text-xl font-bold leading-normal group-hover:underline">Everything that launched with Gitpod Flex</div> <div class="w-full lg:w-auto shrink-0 flex items-center gap-2 justify-start lg:justify-end"><span class="text-muted text-sm">By Talia M.</span> <span class="-space-x-2"><img src="https://github.com/taliamoyal.png" alt="@taliamoyal's avatar on GitHub" height="28" width="28" title="@taliamoyal" class="inline !rounded-full border border-solid border-card " loading="lazy"></span></div></li> </a><a href="/blog/gitpod-supports-development-container" class="group"><li class="self-stretch py-4 border-b border-divider/20 flex flex-col lg:flex-row items-start lg:items-center gap-4 lg:gap-8 hover:bg-sand-light/50 transition-colors duration-200"><div class="w-full lg:w-24 shrink-0 text-left lg:text-right text-muted text-sm font-mono">3 Oct 2024</div> <div class="flex-1 text-important text-lg lg:text-xl font-bold leading-normal group-hover:underline">Gitpod embraces Development Container</div> <div class="w-full lg:w-auto shrink-0 flex items-center gap-2 justify-start lg:justify-end"><span class="text-muted text-sm">By Anton</span> <span class="-space-x-2"><img src="https://github.com/akosyakov.png" alt="@akosyakov's avatar on GitHub" height="28" width="28" title="@akosyakov" class="inline !rounded-full border border-solid border-card " loading="lazy"></span></div></li> </a><a href="/blog/how-we-built-it-zero-trust-architecture" class="group"><li class="self-stretch py-4 border-b border-divider/20 flex flex-col lg:flex-row items-start lg:items-center gap-4 lg:gap-8 hover:bg-sand-light/50 transition-colors duration-200"><div class="w-full lg:w-24 shrink-0 text-left lg:text-right text-muted text-sm font-mono">2 Oct 2024</div> <div class="flex-1 text-important text-lg lg:text-xl font-bold leading-normal group-hover:underline">How we built it: a zero-trust architecture for cloud development environments</div> <div class="w-full lg:w-auto shrink-0 flex items-center gap-2 justify-start lg:justify-end"><span class="text-muted text-sm">By Christian W.</span> <span class="-space-x-2"><img src="https://github.com/csweichel.png" alt="@csweichel's avatar on GitHub" height="28" width="28" title="@csweichel" class="inline !rounded-full border border-solid border-card " loading="lazy"></span></div></li> </a><a href="/blog/introducing-gitpod-desktop" class="group"><li class="self-stretch py-4 border-b border-divider/20 flex flex-col lg:flex-row items-start lg:items-center gap-4 lg:gap-8 hover:bg-sand-light/50 transition-colors duration-200"><div class="w-full lg:w-24 shrink-0 text-left lg:text-right text-muted text-sm font-mono">2 Oct 2024</div> <div class="flex-1 text-important text-lg lg:text-xl font-bold leading-normal group-hover:underline">Introducing Gitpod Desktop: cloud development environments on your laptop</div> <div class="w-full lg:w-auto shrink-0 flex items-center gap-2 justify-start lg:justify-end"><span class="text-muted text-sm">By Christian W.</span> <span class="-space-x-2"><img src="https://github.com/csweichel.png" alt="@csweichel's avatar on GitHub" height="28" width="28" title="@csweichel" class="inline !rounded-full border border-solid border-card " loading="lazy"></span></div></li> </a><a href="/blog/introducing-automations" class="group"><li class="self-stretch py-4 border-b border-divider/20 flex flex-col lg:flex-row items-start lg:items-center gap-4 lg:gap-8 hover:bg-sand-light/50 transition-colors duration-200"><div class="w-full lg:w-24 shrink-0 text-left lg:text-right text-muted text-sm font-mono">2 Oct 2024</div> <div class="flex-1 text-important text-lg lg:text-xl font-bold leading-normal group-hover:underline">Gitpod Automations: bringing DevOps to your development environment</div> <div class="w-full lg:w-auto shrink-0 flex items-center gap-2 justify-start lg:justify-end"><span class="text-muted text-sm">By Lou B.</span> <span class="-space-x-2"><img src="https://github.com/loujaybee.png" alt="@loujaybee's avatar on GitHub" height="28" width="28" title="@loujaybee" class="inline !rounded-full border border-solid border-card " loading="lazy"></span></div></li> </a></ul></div></section></main> <div class=" pb-8 bg-bg text-p-footer" data-id="footer"><footer class="py-large m-auto px-xx-small md:max-w-6xl md:py-small md:px-xx-small"><div class="flex gap-x-x-small sm:gap-x-small md:gap-0 justify-between flex-wrap pb-micro md:pb-small"><ul class="min-w-min mb-xx-small space-y-2.5 md:mb-0 w-40 svelte-1bk5xs"><li class="font-bold text-content-tertiary">Product</li> <li><a data-sveltekit-preload-data="hover" href="/docs" rel="" target="" data-analytics="" class="text-content-tertiary no-underline focus:text-important hover:text-important active:text-important svelte-zcuizw">Docs</a></li> <li><a data-sveltekit-preload-data="hover" href="/changelog" rel="" target="" data-analytics="" class="text-content-tertiary no-underline focus:text-important hover:text-important active:text-important svelte-zcuizw">Changelog</a></li> <li><a data-sveltekit-preload-data="hover" href="/support" rel="" target="" data-analytics="" class="text-content-tertiary no-underline focus:text-important hover:text-important active:text-important svelte-zcuizw">Support</a></li> <li><a data-sveltekit-preload-data="hover" href="https://www.gitpodstatus.com/" rel="noopener" target="_blank" data-analytics="" class="text-content-tertiary no-underline focus:text-important hover:text-important active:text-important svelte-zcuizw">Status</a></li></ul> <ul class="min-w-min mb-xx-small space-y-2.5 md:mb-0 w-40 svelte-1bk5xs"><li class="font-bold text-content-tertiary">Resources</li> <li><a data-sveltekit-preload-data="hover" href="/blog" rel="" target="" data-analytics="" class="text-content-tertiary no-underline focus:text-important hover:text-important active:text-important svelte-zcuizw">Blog</a></li> <li><a data-sveltekit-preload-data="hover" href="/pricing" rel="" target="" data-analytics="" class="text-content-tertiary no-underline focus:text-important hover:text-important active:text-important svelte-zcuizw">Pricing</a></li> <li><a data-sveltekit-preload-data="hover" href="/events" rel="" target="" data-analytics="" class="text-content-tertiary no-underline focus:text-important hover:text-important active:text-important svelte-zcuizw">Events</a></li> <li><a data-sveltekit-preload-data="hover" href="/screencasts" rel="" target="" data-analytics="" class="text-content-tertiary no-underline focus:text-important hover:text-important active:text-important svelte-zcuizw">Videos</a></li> <li><a data-sveltekit-preload-data="hover" href="/customers" rel="" target="" data-analytics="" class="text-content-tertiary no-underline focus:text-important hover:text-important active:text-important svelte-zcuizw">Customers</a></li> <li><a data-sveltekit-preload-data="hover" href="/whitepapers" rel="" target="" data-analytics="" class="text-content-tertiary no-underline focus:text-important hover:text-important active:text-important svelte-zcuizw">Whitepapers</a></li> <li><a data-sveltekit-preload-data="hover" href="/gartner-platform-engineering-hype-cycle-2024" rel="" target="" data-analytics="" class="text-content-tertiary no-underline focus:text-important hover:text-important active:text-important svelte-zcuizw">Gartner reports</a></li> <li><a data-sveltekit-preload-data="hover" href="/state-of-platform-engineering-report-vol3-2024" rel="" target="" data-analytics="" class="text-content-tertiary no-underline focus:text-important hover:text-important active:text-important svelte-zcuizw">State of Platform Engineering report</a></li></ul> <ul class="min-w-min mb-xx-small space-y-2.5 md:mb-0 w-40 svelte-1bk5xs"><li class="font-bold text-content-tertiary">Solutions</li> <li><a data-sveltekit-preload-data="hover" href="/solutions/onboarding" rel="" target="" data-analytics="" class="text-content-tertiary no-underline focus:text-important hover:text-important active:text-important svelte-zcuizw">Developer onboarding</a></li> <li><a data-sveltekit-preload-data="hover" href="/solutions/developer-productivity" rel="" target="" data-analytics="" class="text-content-tertiary no-underline focus:text-important hover:text-important active:text-important svelte-zcuizw">Developer productivity</a></li> <li><a data-sveltekit-preload-data="hover" href="/solutions/developer-self-service" rel="" target="" data-analytics="" class="text-content-tertiary no-underline focus:text-important hover:text-important active:text-important svelte-zcuizw">Developer self-service</a></li> <li><a data-sveltekit-preload-data="hover" href="/solutions/supply-chain-security" rel="" target="" data-analytics="" class="text-content-tertiary no-underline focus:text-important hover:text-important active:text-important svelte-zcuizw">Supply chain security</a></li> <li><a data-sveltekit-preload-data="hover" href="/solutions/vdi" rel="" target="" data-analytics="" class="text-content-tertiary no-underline focus:text-important hover:text-important active:text-important svelte-zcuizw">VDI replacement</a></li></ul> <ul class="min-w-min mb-xx-small space-y-2.5 md:mb-0 w-40 svelte-1bk5xs"><li class="font-bold text-content-tertiary">Compare</li> <li><a data-sveltekit-preload-data="hover" href="/vs/github-codespaces" rel="" target="" data-analytics="" class="text-content-tertiary no-underline focus:text-important hover:text-important active:text-important svelte-zcuizw">GitHub Codespaces</a></li> <li><a data-sveltekit-preload-data="hover" href="/blog/gitpod-vs-coder" rel="" target="" data-analytics="" class="text-content-tertiary no-underline focus:text-important hover:text-important active:text-important svelte-zcuizw">Coder</a></li></ul> <ul class="min-w-min mb-xx-small space-y-2.5 md:mb-0 w-40 svelte-1bk5xs"><li class="font-bold text-content-tertiary">Company</li> <li><a data-sveltekit-preload-data="hover" href="/about" rel="" target="" data-analytics="" class="text-content-tertiary no-underline focus:text-important hover:text-important active:text-important svelte-zcuizw">About</a></li> <li><a data-sveltekit-preload-data="hover" href="/careers" rel="" target="" data-analytics="" class="text-content-tertiary no-underline focus:text-important hover:text-important active:text-important svelte-zcuizw">Careers</a></li> <li><a data-sveltekit-preload-data="hover" href="/media-kit" rel="" target="" data-analytics="" class="text-content-tertiary no-underline focus:text-important hover:text-important active:text-important svelte-zcuizw">Media kit</a></li> <li><a data-sveltekit-preload-data="hover" href="/security" rel="" target="" data-analytics="" class="text-content-tertiary no-underline focus:text-important hover:text-important active:text-important svelte-zcuizw">Security</a></li> <li><a data-sveltekit-preload-data="hover" href="/contact" rel="" target="" data-analytics="" class="text-content-tertiary no-underline focus:text-important hover:text-important active:text-important svelte-zcuizw">Contact</a></li></ul></div> <div class="border-t border-solid border-[#727B7B33] pt-micro"><div class="flex flex-wrap flex-row sm:flex-row-reverse justify-between mt-micro md:mt-0 items-center"><div class="flex space-x-macro lg:mt-macro"><a data-sveltekit-preload-data="hover" href="https://github.com/gitpod-io" rel="" target="_blank" data-analytics="{"variant":"social_media","context":"github_visit"}" class="text-content-tertiary no-underline focus:text-important hover:text-important active:text-important hover:opacity-80 self-center svelte-zcuizw"><img src="/svg/brands/github.svg" alt="GitHub" class="mx-1 sm:m-1 w-6 h-6 md:w-7 md:h-7"> </a><a data-sveltekit-preload-data="hover" href="https://www.linkedin.com/company/gitpod/" rel="" target="_blank" data-analytics="{"variant":"social_media","context":"linkedin_visit"}" class="text-content-tertiary no-underline focus:text-important hover:text-important active:text-important hover:opacity-80 self-center svelte-zcuizw"><img src="/svg/brands/linkedin.svg" alt="LinkedIn" class="mx-1 sm:m-1 w-6 h-6 md:w-7 md:h-7"> </a><a data-sveltekit-preload-data="hover" href="https://www.youtube.com/@Gitpod" rel="" target="_blank" data-analytics="{"variant":"social_media","context":"youtube_visit"}" class="text-content-tertiary no-underline focus:text-important hover:text-important active:text-important hover:opacity-80 self-center svelte-zcuizw"><img src="/svg/brands/youtube.svg" alt="YouTube" class="mx-1 sm:m-1 w-6 h-6 md:w-7 md:h-7"> </a><a data-sveltekit-preload-data="hover" href="https://twitter.com/gitpod" rel="" target="_blank" data-analytics="{"variant":"social_media","context":"twitter_visit"}" class="text-content-tertiary no-underline focus:text-important hover:text-important active:text-important hover:opacity-80 self-center svelte-zcuizw"><img src="/svg/brands/twitter.svg" alt="Twitter" class="mx-1 sm:m-1 w-6 h-6 md:w-7 md:h-7"> </a></div> <div class="lg:mt-xx-small"><div class="flex flex-wrap gap-x-4 gap-y-4 sm:gap-y-0 mt-small md:mt-micro w-5/10 place-items-center"><a data-sveltekit-preload-data="hover" href="/imprint" rel="" target="" data-analytics="" class="text-content-tertiary no-underline focus:text-important hover:text-important active:text-important svelte-zcuizw">Imprint</a> <a data-sveltekit-preload-data="hover" href="/terms" rel="" target="" data-analytics="" class="text-content-tertiary no-underline focus:text-important hover:text-important active:text-important svelte-zcuizw">Terms of service</a> <a data-sveltekit-preload-data="hover" href="/privacy" rel="" target="" data-analytics="" class="text-content-tertiary no-underline focus:text-important hover:text-important active:text-important svelte-zcuizw">Privacy policy</a> <a data-sveltekit-preload-data="hover" href="/cookies" rel="" target="" data-analytics="" class="text-content-tertiary no-underline focus:text-important hover:text-important active:text-important svelte-zcuizw">Cookie policy</a> <button class="text-left text-content-tertiary no-underline focus:text-important hover:text-important active:text-important">Cookie preferences</button></div> <p class="mt-9 sm:mt-6 text-content-tertiary">Copyright © 2024 Gitpod</p></div></div></div></footer></div> </div> <div data-analytics="{"position":"cookie-consent"}"><div class="fixed stroked stroked-sand bottom-0 md:bottom-macro md:left-macro z-50 w-full md:max-w-[410px] px-micro py-macro md:p-xx-small text-xs md:text-base md:rounded-2xl md:shadow-sm svelte-1s1a9l4" style=""><p>This website uses cookies to enhance the user experience. Read
our <a href="/privacy">privacy policy</a> for more info.</p> <div class="flex flex-row-reverse md:flex-row items-center justify-between mt-micro md:mt-x-small"><button class="underline">Customise</button> <button class="transition-all duration-200 delay-[50ms] inline-block text-center shadow-md dark:shadow-none font-semibold whitespace-nowrap text-black bg-important dark:bg-primary text-white dark:text-black hover:text-white focus:text-white hover:bg-less-important focus:bg-less-important dark:hover:bg-quaternary dark:focus:bg-quaternary py-2 px-6 text-btn-small leading-4 rounded-xl svelte-1bslz4w"> Accept </button></div> </div></div> <div id="svelte-announcer" aria-live="assertive" aria-atomic="true" style="position: absolute; left: 0px; top: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); overflow: hidden; white-space: nowrap; width: 1px; height: 1px;"></div></div>
<script async="" id="netlify-rum-container" src="/.netlify/scripts/rum" data-netlify-rum-site-id="444ff2d3-6870-4d3f-890a-d738b69ca9cb" data-netlify-deploy-branch="main" data-netlify-deploy-context="production" data-netlify-cwv-token="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzaXRlX2lkIjoiNDQ0ZmYyZDMtNjg3MC00ZDNmLTg5MGEtZDczOGI2OWNhOWNiIiwiYWNjb3VudF9pZCI6IjVhYTI2NjllYTYxODhmMzljYzZmNzExZSIsImRlcGxveV9pZCI6IjY3NjAyYTg2YzM4YTU3MDAwOGFiOGY0YyIsImlzc3VlciI6Im5mc2VydmVyIn0.bJFLcbDZCPIum5VcgdzS71PI6vYaZ6Fxk6wmDH1azjU"></script>
<iframe height="0" width="0" style="display: none; visibility: hidden;"></iframe><script type="text/javascript" id="" charset="">function initApollo(){var b=Math.random().toString(36).substring(7),a=document.createElement("script");a.src="https://assets.apollo.io/micro/website-tracker/tracker.iife.js?nocache\x3d"+b;a.async=!0;a.defer=!0;a.onload=function(){window.trackingFunctions.onLoad({appId:"6618697cb6ff0201c7a9cfe0"})};document.head.appendChild(a)}initApollo();</script></body></html>