Make your Day with Daytona

The Challenge: A Tale of Technical Debt 😓

Just a few days ago, I participated in Online Hackathon to put myself into test. Like many developers, I was excited to dive straight into coding and bring my ideas to life. However, reality hit hard when I realized that setting up my development environment was eating into my precious hackathon time. The hackathon project required a complex stack:-

• React frontend with specific Node.js version requirements
• Python backend with multiple dependencies
• Multiple API integrations.

With only 48 hours on the clock, I spent the first 3 hours just wrestling with environment setup. Different team members were running different operating systems, and we kept running into version conflicts and dependency issues. It was frustrating to watch valuable hackathon time slip away on setup tasks instead of building features.

The breaking point came when one team member couldn't get the development environment running at all, forcing them to spend hours debugging instead of contributing to the project. We needed a better way to ensure everyone could start coding quickly and have identical development environments regardless of their local setup.

Enter Daytona: The Game-Changer ✨

After struggling with the setup for weeks, I discovered Daytona through a colleague's recommendation. The promise of standardized development environments that "just work" seemed too good to be true. Spoiler alert: it wasn't.

Daytona is an open-source Development Environment Manager (DEM) licensed under the Apache License 2.0. Daytona streamlines the entire workflow by automating instance provisioning, configuration interpretation and application, prebuild setup, secure VPN connection establishment, seamless integration with your local or Web IDE, and assigning a fully qualified domain name to the development environment for effortless sharing and collaboration.

This allows developers to dive straight into what truly matters—their code.

daytonaio / daytona

The Open Source Dev Environment Manager.

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…

View on GitHub

Setting Up Sample React Project using Daytona

I will walk you through setting up a daytona project for ReactJS app.

The Tech Stack I Used 🛠️

My project involved:

• React
• Tailwind
• Express JS
• Mistral and Llama(Groq)

Installation and Initial Setup 🗺️

• First, I installed Daytona using the following official documentation. Make sure you have Docker Desktop pre-installed.

Installation | Daytona

Learn how to install Daytona on Linux, macOS, and Windows.

daytona.io

• Next, I created a devcontainer.json file inside the .devcontainer folder. Here's what our .devcontainer.json looked like:

{
    "name": "React Dev Container",
    "image": "mcr.microsoft.com/devcontainers/javascript-node:18",
    "features": {
      "python": "3.10"
    },
    "forwardPorts": [
      5173
    ],
    "postCreateCommand": "npm install"
  }

You may make use of Devcontainer.ai help generate the initial file and then change it as per your requirement. Finally, I pushed .devcontainer folder to my GitHub repo where rest of my project is.

• Creating a workspace

Now you can create workspace with just single command.

daytona create https://github.com/daytonaio/sample-react-job-assistant

Now you are ready to go 🎉 !!

The Benefits I Saw 🌟

• Consistent Environments: No more "works on my machine" syndrome. Every team member had identical setups.
• Rapid Onboarding: New team members could start contributing within minutes instead of days.
• Resource Efficiency: Daytona's workspace management meant we weren't wasting local resources on multiple development environments.
• Version Control: Our development environment configuration was version-controlled alongside our code.

Tips for Success 💡

• Start Small: Begin with a basic configuration and iterate.
• Document Everything: Keep a changelog of your Daytona setup.
• Use Pre-builds: They significantly reduce workspace creation time.
• Leverage VS Code Remote: It works beautifully with Daytona.

The Impact 📈

After implementing Daytona:

• Development environment setup time decreased from 4+ hours to 15 minutes
• Onboarding new developers now takes 1 hour instead of 2-3 days
• Zero environment-related issues

Community and Support 🤝

The Daytona community has been incredibly helpful. Don't hesitate to Join their Slack channel

Conclusion 🎉

Daytona transformed our development workflow from a constant struggle with environment issues to a smooth, efficient process. For teams dealing with complex setups or legacy applications, it's a game-changer.

P.S. If you're struggling with similar challenges, feel free to reach out or check out my project's public documentation. Together, we can make development workflows better for everyone! 🚀

References

• Source Code to my project