Akash Jana

Posted on Dec 27, 2024 • Edited on Apr 26

Conquering the Setup Loop with Daytona

#daytona #nextjs #opensource #productivity

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.

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 🎉

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

💻 IDE Support: Whether you're a Visual Studio Code fan or a JetBrains loyalist, Daytona has your back.
🔗 Seamless Git Integration: Pull, push, or commit directly from the Workspace without ever leaving your flow.

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

🌐 Easy Sharing: Share your Workspace over public or restricted networks with just a few clicks.
🔧 Customizable: Extend functionality with Go plugins or integrate with tools you love.

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:

Dev Container: A pre-configured environment that contains all the tools and settings you need. Think of it as your development Swiss army knife. 🛠️
Workspace: Your digital playground where files, code, and projects live harmoniously. 🏞️
Git Providers (SCMs): Tools like GitHub, GitLab, and Bitbucket that help you host and collaborate on codebases. {SCMs: Source Code Managers}
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;

📝 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"
}

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

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

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

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

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>

Run your project locally using:

npm run dev

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! 💡✨

daytonaio / daytona

Daytona is a Secure and Elastic Infrastructure for Running AI-Generated Code.

Set up a development environment on any infrastructure using a single command

Documentation · Report Bug · Request Feature · Join Our Slack · Connect On X

Open Source Development Environment Manager

For detailed/manual setup steps click here

Mac / Linux

curl -sfL get.daytona.io | sudo bash && daytona server -y && daytona

Windows

powershell -Command "irm https://get.daytona.io/windows | iex; daytona serve"

Create your first dev environment by opening a new terminal, and running:

daytona create

Start coding.

Features

Quick Setup: Activate a fully configured development environment with a single command - daytona create.
Runs everywhere: Spin up your development environment on any machine; local, remote, cloud-based, physical server or a VM & on any architecture; x86 or ARM.
Various Providers Support: Choose popular providers like AWS, GCP, Azure, DigitalOcean & more or use Docker on bare metal.
IDE Support : Seamlessly supports…

View on GitHub

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! 🚀