<titledata-rh="true">Build & run Podman Desktop in a DevContainer | Podman Desktop</title><metadata-rh="true"name="viewport"content="width=device-width,initial-scale=1"><metadata-rh="true"name="twitter:card"content="summary_large_image"><metadata-rh="true"property="og:url"content="https://podman-desktop.io/blog/develop-using-devcontainer"><metadata-rh="true"name="docusaurus_locale"content="en"><metadata-rh="true"name="docusaurus_tag"content="default"><metadata-rh="true"name="docsearch:language"content="en"><metadata-rh="true"name="docsearch:docusaurus_tag"content="default"><metadata-rh="true"property="og:title"content="Build & run Podman Desktop in a DevContainer | Podman Desktop"><metadata-rh="true"name="description"content="Develop Podman Desktop using a DevContainer locally or using GitHub Codespaces."><metadata-rh="true"property="og:description"content="Develop Podman Desktop using a DevContainer locally or using GitHub Codespaces."><metadata-rh="true"property="og:type"content="article"><metadata-rh="true"property="article:published_time"content="2022-11-17T00:00:00.000Z"><metadata-rh="true"property="article:author"content="https://github.com/benoitf"><metadata-rh="true"property="article:tag"content="podman-desktop,devcontainer,codespaces"><linkdata-rh="true"rel="icon"href="/img/favicon.ico"><linkdata-rh="true"rel="canonical"href="https://podman-desktop.io/blog/develop-using-devcontainer"><linkdata-rh="true"rel="alternate"href="https://podman-desktop.io/blog/develop-using-devcontainer"hreflang="en"><linkdata-rh="true"rel="alternate"href="https://podman-desktop.io/blog/develop-using-devcontainer"hreflang="x-default"><linkdata-rh="true"rel="preconnect"href="https://MR01ANKQ9S-dsn.algolia.net"crossorigin="anonymous"><linkrel="alternate"type="application/rss+xml"href="/blog/rss.xml"title="Podman Desktop RSS Feed">
<linkrel="alternate"type="application/atom+xml"href="/blog/atom.xml"title="Podman Desktop Atom Feed">
</a>. This parent image is not changing much so it's better to use is as a parent one.</p><p>Inside <code>.devcontainer</code> directory there is a <code>.parent</code> directory with everything related to the parent image.</p><p>And in the <code>.devcontainer/Containerfile</code> file we reference this image</p><divclass="language-docker codeBlockContainer_mQmQ theme-code-block"style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><divclass="codeBlockContent_D5yF"><pretabindex="0"class="prism-code language-docker codeBlock_RMoD thin-scrollbar"><codeclass="codeBlockLines_AclH"><spanclass="token-line"style="color:#F8F8F2"><spanclass="token instruction keyword"style="color:rgb(189, 147, 249);font-style:italic">FROM</span><spanclass="token instruction"> quay.io/podman-desktop/devcontainer-parent:next</span><br></span></code></pre><divclass="buttonGroup_aaMX"><buttontype="button"aria-label="Copy code to clipboard"title="Copy"class="clean-btn"><spanclass="copyButtonIcons_z5j7"aria-hidden="true"><svgclass="copyButtonIcon_FoOz"viewBox="0 0 24 24"><pathd="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svgclass="copyButtonSuccessIcon_L0B6"viewBox="0 0 24 24"><pathd="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><p>By default, we will be <code>root</code> in the container and this is probably not what we expect. Let's change that.</p><divclass="language-json codeBlockContainer_mQmQ theme-code-block"style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><divclass="codeBlockContent_D5yF"><pretabindex="0"class="prism-code language-json codeBlock_RMoD thin-scrollbar"><codeclass="codeBlockLines_AclH"><spanclass="token-line"style="color:#F8F8F2"><spanclass="token property">"containerUser"</span><spanclass="token operator">:</span><spanclass="token plain"></span><spanclass="token string"style="color:rgb(255, 121, 198)">"podman-desktop"</span><br></span></code></pre><divclass="buttonGroup_aaMX"><buttontype="button"aria-label="Copy code to clipboard"title="Copy"class="clean-btn"><spanclass="copyButtonIcons_z5j7"aria-hidden="true"><svgclass="copyButtonIcon_FoOz"viewBox="0 0 24 24"><pathd="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svgclass="copyButtonSuccessIcon_L0B6"viewBox="0 0 24 24"><pathd="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><p>Some Visual Studio Code extensions are nice to use and we can add them</p><divclass="language-json codeBlockContainer_mQmQ theme-code-block"style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><divclass="codeBlockContent_D5yF"><pretabindex="0"class="prism-code language-json codeBlock_RMoD thin-scrollbar"><codeclass="codeBlockLines_AclH"><spanclass="token-line"style="color:#F8F8F2"><spanclass="token plain"></span><spanclass="token property">"extensions"</span><spanclass="token operator">:</span><spanclass="token plain"></span><spanclass="token punctuation"style="color:rgb(248, 248, 242)">[</span><spanclass="token string"style="color:rgb(255, 121, 198)">"svelte.svelte-vscode"</span><spanclass="token punctuation"style="color:rgb(248, 248, 242)">,</span><spanclass="token plain"></span><spanclass="token string"style="color:rgb(255, 121, 198)">"bradlc.vscode-tailwindcss"</span><spanclass="token punctuation"style="color:rgb(248, 248, 242)">]</span><br></span></code></pre><divclass="buttonGroup_aaMX"><buttontype="button"aria-label="Copy code to clipboard"title="Copy"class="clean-btn"><spanclass="copyButtonIcons_z5j7"aria-hidden="true"><svgclass="copyButtonIcon_FoOz"viewBox="0 0 24 24"><pathd="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svgclass="co
<imgloading="lazy"alt="Opening Codespace"src="/assets/images/codespaces-open-novnc-ec3f30d836eb7af5750498a833d37184.png"width="2051"height="1066"class="img_SS3x"></p><p>Click on the connect button. Then on the terminal you can enter <code>podman run quay.io/podman/hello</code> and the container is detected in Podman Desktop.
<imgloading="lazy"alt="Testing Codespace"src="/assets/images/codespaces-testing-podman-desktop-3210aa766f273a52253d27cb4e7ef782.png"width="2051"height="1066"class="img_SS3x"></p><p>It's also possible using the port widget to get on <code>3000</code> port by clicking on the world icon a preview of the website in another tab. Changing source code of the website will refresh the content of the window.</p><p>Depending on the usecase, it's also possible to open documentation in the preview browser.</p><p><imgloading="lazy"alt="Edit website Codespace"src="/assets/images/codespaces-edit-website-d1f2a645f97209e453bc72cadafa0b54.png"width="2051"height="1066"class="img_SS3x"></p><h2class="anchor anchorWithStickyNavbar_JmGV"id="conclusion">Conclusion<aclass="hash-link"href="#conclusion"title="Direct link to heading"></a></h2><p>The DevContainer image for Podman Desktop is recent so it'll probably evolve over time by adding new capabilities but it allows you to easily build/run/experiment and <strong>contribute</strong> to the tool or the website.</p></div><footerclass="row docusaurus-mt-lg blogPostFooterDetailsFull_JgJa"><divclass="col"><b>Tags:</b><ulclass="tags_Ow0B padding--none margin-left--sm"><liclass="tag_DFxh"><aclass="tag_otG2 tagRegular_s0E1"href="/blog/tags/podman-desktop">podman-desktop</a></li><liclass="tag_DFxh"><aclass="tag_otG2 tagRegular_s0E1"href="/blog/tags/devcontainer">devcontainer</a></li><liclass="tag_DFxh"><aclass="tag_otG2 tagRegular_s0E1"href="/blog/tags/codespaces">codespaces</a></li></ul></div></footer></article><navclass="pagination-nav docusaurus-mt-lg"aria-label="Blog post page navigation"><aclass="pagination-nav__link pagination-nav__link--prev"href="/blog/podman-desktop-release-0.10"><divclass="pagination-nav__sublabel">Newer Post</div><divclass="pagination-nav__label">Release Notes - Podman Desktop 0.10</div></a></nav></main><divclass="col col--2"><divclass="tableOfContents_XG6w thin-scrollbar"><ulclass="table-of-contents table-of-contents__left-border"><li><ahref="#defining-image-of-the-container"class="table-of-contents__link toc-highlight">Defining image of the container</a></li><li><ahref="#configure-the-devcontainer-using-devcontainerjson"class="table-of-contents__link toc-highlight">Configure the DevContainer using devcontainer.json</a></li><li><ahref="#using-the-devcontainerjson-on-github-codespace"class="table-of-contents__link toc-highlight">Using the DevContainer.json on Github Codespace</a></li><li><ahref="#conclusion"class="table-of-contents__link toc-highlight">Conclusion</a></li></ul></div></div></div></div></div><footerclass="footer"><divclass="container container-fluid"><divclass="row footer__links"><divclass="col footer__col"><divclass="footer__title">Documentation</div><ulclass="footer__items clean-list"><liclass="footer__item"><aclass="footer__link-item"href="/docs/intro">Introduction</a></li><liclass="footer__item"><aclass="footer__link-item"href="/docs/troubleshooting">Troubleshooting</a></li></ul></div><divclass="col footer__col"><divclass="footer__title">Links</div><ulclass="footer__items clean-list"><liclass="footer__item"><aclass="footer__link-item"href="/blog">Blog</a></li><liclass="footer__item"><ahref="https://github.com/containers/podman-desktop"target="_blank"rel="noopener noreferrer"class="footer__link-item">GitHub<svgwidth="13.5"height="13.5"aria-hidden="true"viewBox="0 0 24 24"class="iconExternalLink_nPrP"><pathfill="currentColor"d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><liclass="footer__item"><ahref="https://discordapp.com/invite/TCTB38RWpf"target="_blank"rel="noopener noreferrer"class="footer__link-item">General chat (bridged): #general on Discord<svgwidth="13.5"height="13.5"aria-hidden="true"viewBox="0 0 24 24"class="iconExternalLink_nPrP"><pathfill="currentColor"d="M2113v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.0354-6.9777.072.8282.8286.977-7.074.125
