Logo

dev-resources.site

for different kinds of informations.

Conquering the Setup Loop with Daytona

Published at
12/27/2024
Categories
daytona
nextjs
opensource
productivity
Author
akashjana
Author
9 person written this
akashjana
open
Conquering the Setup Loop with Daytona

How I Started Using Daytona 🛠️

As a developer juggling multiple projects, I often found myself stuck in the dreaded "setup loop." Every new project meant 30-40 minutes—sometimes hours—configuring environments to match different dependencies and tooling requirements. It felt like I was spending more time setting up than actually coding... for fixing small bugs in massive repositories. 😩

Quira Quest 023 introduced a hidden gem: Daytona. Intrigued, I gave it a quick search and discovered its promise of creating Workspaces—preconfigured development environments that just work. Could this be the end of my setup nightmares? Spoiler alert: It was.

Daytona Logo

What is Daytona? 🤔

Daytona is an open-source tool that helps developers create, manage, and use ready-to-go coding environments called Workspaces. Think of it as a magic wand 🪄 for your development setups. It works seamlessly with container tech (like Docker) and popular tools like Git and Visual Studio Code.

Key Features That Won Me Over 🎉

  1. 🔒 Secure Access: No more messy port forwarding. Daytona sets up a secure connection between your machine and the remote server—effortlessly.

Secure Access and IDE support flowchart

  1. 💻 IDE Support: Whether you're a Visual Studio Code fan or a JetBrains loyalist, Daytona has your back.

  2. 🔗 Seamless Git Integration: Pull, push, or commit directly from the Workspace without ever leaving your flow.

Integrations flowchart

  1. 📂 Multi-Project Workspaces: Managing microservices? Multiple repositories? Daytona makes it a breeze.

Multi-project workpsaces and easy sharing flowchart

  1. 🌐 Easy Sharing: Share your Workspace over public or restricted networks with just a few clicks.

  2. 🔧 Customizable: Extend functionality with Go plugins or integrate with tools you love.

Customization flowchart

In short, Daytona takes the hassle out of setup and lets you focus on what you do best: coding.

Link to the flow chart: Daytona Features flowchart


A Quick Vocabulary Lesson 📘

Here are some terms I picked up while getting to know Daytona:

  1. Dev Container: A pre-configured environment that contains all the tools and settings you need. Think of it as your development Swiss army knife. 🛠️
  2. Workspace: Your digital playground where files, code, and projects live harmoniously. 🏞️
  3. Git Providers (SCMs): Tools like GitHub, GitLab, and Bitbucket that help you host and collaborate on codebases. {SCMs: Source Code Managers}
  4. Target: The destination for your development setup—local machine, remote server, or the cloud. ☁️

Let’s Get Started 🚀

For this tutorial, I’ll show you how I used Daytona to integrate GlobalSync, a frontend project using Aceternity UI.

✨ Do give it a star: GlobalSync Frontend ⭐


Step 1️⃣: Installing Daytona 🖥️

For Windows, run the following in PowerShell:

$architecture = if ($env:PROCESSOR_ARCHITECTURE -eq "AMD64") { "amd64" } else { "arm64" }
md -Force "$Env:APPDATA\bin\daytona"; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.SecurityProtocolType]'Tls,Tls11,Tls12';
Invoke-WebRequest -URI "https://download.daytona.io/daytona/v0.50/daytona-windows-$architecture.exe" -OutFile "$Env:APPDATA\bin\daytona\daytona.exe";
$env:Path += ";" + $Env:APPDATA + "\bin\daytona"; [Environment]::SetEnvironmentVariable("Path", $env:Path, [System.EnvironmentVariableTarget]::User);
daytona serve;
Enter fullscreen mode Exit fullscreen mode

📝 For other OS (Linux, macOS, Homebrew, Nix), check out Daytona Installation Guide.


Step 2️⃣: Setting Up a Dev-Container 📦

  • Create a folder named .devcontainer in your repository. (Yes, the dot is important. Don’t skip it!)
  • Inside, add a devcontainer.json file.

Here’s how mine looks:

{
    "name": "GlobalSync Development Container",
    "image": "mcr.microsoft.com/devcontainers/javascript-node",
    "forwardPorts": [
      3000
    ],
    "customizations": {
      "vscode": {
        "settings": {
          "eslint.enable": true,
          "editor.formatOnSave": true
        },
        "extensions": [
          "esbenp.prettier-vscode",
          "dbaeumer.vscode-eslint",
          "ms-vscode.vscode-typescript-tslint-plugin"
        ]
      }
    },
    "postCreateCommand": "npm install"
}
Enter fullscreen mode Exit fullscreen mode

Pro Tip: You can generate this file with DevContainer.ai to save time! ⏳


Step 3️⃣: Configuration ⚙️

1. Connect Daytona to Your Git Repositories 🛠️
First things first—connect Daytona to your version control system! Whether you’re working with GitHub, GitLab, or any other Git provider, Daytona makes it seamless to manage your repositories. Just run this command in your terminal:

daytona git-providers add
Enter fullscreen mode Exit fullscreen mode

Once done, Daytona will ask you to authenticate with your chosen Git provider. A few clicks, and voilà! You’re ready to fetch code, push commits, and manage branches directly from your Workspace. No more hunting down SSH keys or copy-pasting HTTPS URLs—Daytona handles it all for you. 🎉

2. Install a Cloud Provider ☁️
Next up, let’s set up a cloud provider. If you’re deploying your Workspace on platforms like AWS, Azure, or Google Cloud, this step is essential. Installing a provider ensures Daytona can interact with these platforms smoothly.

Run this command:

daytona provider install
Enter fullscreen mode Exit fullscreen mode

Daytona will guide you through the setup—adding credentials, configuring access, and more. Don’t worry, it’s all secure and straightforward. By the end, your cloud environments will be ready for action, making collaboration and scalability a breeze.

3. Set a Target 🎯

A "Target" is simply where your development environment will live. It could be:

  • Local Docker instance (great for personal projects).
  • Remote servers (ideal for team collaborations).
  • Cloud platforms like AWS or GCP.

To define your target, use this command:

daytona target set
Enter fullscreen mode Exit fullscreen mode

Daytona will ask a few questions—like which platform to use and any specific configurations. Once set, it’ll remember your target, so you can jump into coding without worrying about the underlying setup. 💪

4. Choose Your IDE 💻
Let’s face it, we all have our go-to IDE. Whether you’re a VS Code enthusiast, an IntelliJ master, or someone who swears by Vim, Daytona has you covered. To link your favorite IDE to Daytona, run:

daytona ide
Enter fullscreen mode Exit fullscreen mode

Daytona will configure your IDE to work seamlessly with the Workspaces. This means you’ll have all the power of your IDE—debugging, extensions, and custom shortcuts—working in harmony with your remote environment. It’s like bringing the comfort of home to your cloud setup! 🏡✨

Ready to Code! 🚀
With your Git provider, cloud platform, target, and IDE set up, you’re all set to unleash the magic of Daytona. No more wasting time on repetitive configurations—just run a command and get straight into solving the next big problem!

Step 4️⃣: Create Your Workspace 🖇️

Finally, create your Workspace with this command:

daytona create <REPO_URL>
Enter fullscreen mode Exit fullscreen mode

Run your project locally using:

npm run dev
Enter fullscreen mode Exit fullscreen mode

My View 🤓

I didn't have any issue using Daytona for my development workflow. From eliminating the headaches of environment setup to simplifying multi-repo management, it feels like having a personal assistant for coding.

So, if you’re tired of wasting hours in the "setup loop" ⏳, give Daytona a shot. Trust me, your future self will thank you! 🙌

And hey, don’t forget to give Daytona and GlobalSync a star while you’re at it. Who knows, it might inspire your next big project! 💡✨

GitHub logo daytonaio / daytona

The Open Source Dev Environment Manager.


Daytona logo

Documentation License Go Report Card Issues - daytona GitHub Release
Open Bounties Rewarded Bounties


Daytona - Dev environment manager that makes you 2x more productive | Product Hunt Daytona - Dev environment manager that makes you 2x more productive | Product Hunt

The Open Source Development Environment Manager

Set up a development environment on any infrastructure, with a single command

Documentation · Report Bug · Request Feature · Join Our Slack · Twitter

Features

  • Single Command: Activate a fully configured development environment with a single command.
  • Runs everywhere: spin up your development environment on any machine — whether it's local, remote, cloud-based, physical server, or a VM & any architecture x86 or ARM.
  • Configuration File Support: Initially support for dev container, ability to expand to DevFile, Nix & Flox (Contributions welcome here!).
  • Prebuilds System: Drastically improve environment setup times (Contributions welcome here!).
  • IDE Support : Seamlessly supports VS Code & JetBrains locally, ready to use without configuration. Includes a built-in Web IDE for added convenience.
  • Git Provider Integration: GitHub, GitLab, Bitbucket, Bitbucket Server, Gitea, Gitness, Azure DevOps, AWS CodeCommit, Gogs & Gitee can be connected, allowing…

And before I sign off, here are some useful links:

A big shoutout to the incredible folks behind Quira and Daytona. Your innovation has made our developer lives a whole lot easier—and dare I say—a bit more fun!

Kudos to the entire team, and here’s to many more seamless setups and productive coding sessions! 🚀

daytona Article's
27 articles in total
Favicon
From Legacy to Lightning: Modernizing an Astro App with Daytona
Favicon
Daytona_Sample_Project : CareCradle
Favicon
Stremlining Development with Daytona
Favicon
🔮 Daytona + EchoBrain – AI Development Reimagined
Favicon
Daytona-Sample-React: Text AI
Favicon
PathGen with Daytona: Revolutionizing Personalized Learning Paths
Favicon
Integrate Daytona into a Machine Learning Project with React, Node, and Python
Favicon
How Daytona Helped Me Streamline My Development Workflow
Favicon
Make your Day with Daytona
Favicon
Effortless Full Stack Development: Set Up Django-React Application with One Command Using Daytona
Favicon
Daytona: Your Project’s New Best Friend
Favicon
Comprehensive Guide: Creating and Running the "Sample Video Generator" with Daytona
Favicon
Simplifying Recipe Discovery: Integrating Daytona into Recipe Finder🍝☕️
Favicon
How to generate devcontainer.json automatically without using devcontainer.ai
Favicon
Using Daytona to maintain a Development Environment
Favicon
🚀 Simplify Your Dev Workflow with Daytona: Building a Pydantic AI-Powered Flask App
Favicon
Conquering the Setup Loop with Daytona
Favicon
Discord Image Generation Bot with Daytona
Favicon
My Journey with Daytona and How I Plan to Use It Going Forward
Favicon
Mastering Daytona Integration in Python: A Detailed Step-by-Step Guide 🚀
Favicon
Integrate DAYTONA and let the magic begin....
Favicon
Integrate Daytona into Your React Project: A Step-by-Step Guide
Favicon
Integrate Daytona in your NextJS app
Favicon
How to Set Up Dev Environment on a Remote Machine
Favicon
Streamlined DevEx with the Daytona Installer Script
Favicon
The days of “it works on my machine” are gone; meet standardized development environments
Favicon
Daytona, a Secure Alternative to GitHub Codespaces, Launched by Cloud Development Veterans

Featured ones: