The latest articles on DEV Community by Fabian Jevon (@tryxns). https://dev.to/tryxns https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1183629%2F8a22ea3e-8afe-422c-82c6-72443e21f1e6.png https://dev.to/tryxns en Fabian Jevon Fri, 10 Jan 2025 06:08:07 +0000 https://dev.to/tryxns/how-to-generate-devcontainerjson-automatically-without-using-devcontainerai-2fd9 https://dev.to/tryxns/how-to-generate-devcontainerjson-automatically-without-using-devcontainerai-2fd9 <p>I want to share my troubleshooting experience when creating a sample project for <a href="https://www.daytona.io/" rel="noopener noreferrer">https://www.daytona.io/</a>.</p> <h2> Problem Background </h2> <p>I need a valid <code>devcontainer.json</code> to run daytona properly but I don't have experience in writing devcontainer configuration &amp; (in that moment) <a href="https://devcontainer.ai/" rel="noopener noreferrer">https://devcontainer.ai/</a> can't generate one for me.</p> <h2> The Solution </h2> <p>I found the alternative way to generate it using VSCode IDE.</p> <ol> <li>Install VSCode Plugin named <em><code>Dev Containers</code></em> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjwuvqdmnmneuaj300jdn.png" alt="Image description" width="800" height="484"> </li> <li>Open Command Palette (default shortcut: Ctrl+shift+P)</li> <li>Search for Dev Containers: <code>Add Dev Container Configuration Files</code> then select it <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkmch3abmjur0409ljf0b.png" alt="Image description" width="605" height="156"> </li> <li>Choose <code>Add configuration to workspace</code> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp2lxkfnyulxvkbw51z2v.png" alt="Image description" width="604" height="132"> </li> <li>Choose the configuration template. In my case, because I'm building a project using Laravel, I choose PHP for the configuration template then choose the default for the PHP version. <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjt7zmnlm5w6v24eym9hs.png" alt="Image description" width="597" height="427"> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fk1xxw761ro0xwrpl3vxk.png" alt="Image description" width="603" height="199"> </li> <li>Choose the additional features to install. In my case, I need Node.js (via NPM) installed to support my Laravel project then keep defaults <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1pzhhtxx3wkulalysw28.png" alt="Image description" width="600" height="424"> </li> <li>Choose optional File / directories. In my case, I don't need additional file / directories <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbh5xmc6zwa6q90ftozfs.png" alt="Image description" width="601" height="96"> </li> <li>And.. Voila! A fresh <code>devcontainer.json</code> has been generated for you. <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnxpeki6mcaz35ylrr1mr.png" alt="Image description" width="800" height="389"> </li> </ol> <p>I found this method is very beginner friendly to those who don't have experience in writing devcontainer configuration because the generated config file has several informative comments in it so it can help us learn</p> daytona laravel productivity