Don't be stuck at dev environment setup
Setting up both the frontend and backend for a Django-React full stack project can be a daunting and time-consuming task. You'll need to install the frontend dependencies, set up the backend separately, and manage migrations. But what if you could configure everything with just one command?
This is where Daytona comes into play. Daytona simplifies the development environment setup, allowing you to focus on building your application rather than wrestling with configurations.
In this blog, we’ll take a step-by-step approach:
- Setting up a Django - React with Vite full stack project
- Use a sample Django-React full stack repository to get started.
- Create a
devcontainer.jsonand test it locally
- What is Daytona, and why to use it?
- Explore Daytona’s purpose and key benefits.
- Learn how to setup and integrate Daytona into your project.
- Managing environment variables
Setting Up a Django - React with Vite Full Stack Project
We’ll use the Django-React Full Stack App from this repository as an example.
Prerequisites
- Docker
- VS Code (or any IDE based on your project tech stack)
- Git
1️⃣ Clone the Sample Repository
Fork the repository and run the following commands to clone the repository in your system and navigate into the project folder.
git clone https://github.com/<user_name>/Django-React-Full-Stack-App.git
cd Django-React-Full-Stack-App
This is the project folder structure:
root/
│
├── frontend/
│ └── (Your React + Vite frontend code)
│
├── backend/
│ └── (Your Django backend code)
│
└── .devcontainer/
└── devcontainer.json
2️⃣ Creating devcontainer
Create a .devcontainer folder in the project root and add the devcontainer.json. (.devcontainer/devcontainer.json)
A devcontainer.json file is essential for defining the environment in your VS Code Remote Development setup, specifying everything from the required programming languages to runtime tools and dependencies.
Using a devcontainer.json ensures a uniform development environment across all systems, streamlining the processes of development, testing, and debugging.
With Daytona's built-in support for Dev Containers, setting up a complete development environment with all the tools and libraries you need becomes quick and effortless.
Let's add devcontainer.json for our project as below. You can also use devcontainer.ai to quickly generate this file by providing the repository URL, with the help of AI. This will automatically create a devcontainer.json tailored to your project needs.
{
"name": "Django-React Full Stack App",
"image": "mcr.microsoft.com/devcontainers/python:3.12-bookworm",
"forwardPorts": [8000, 5173],
"features": {
"ghcr.io/devcontainers/features/node:1": {
"version": "18"
}
},
"postCreateCommand": "npm install --prefix frontend && pip install -r backend/requirements.txt && python backend/manage.py makemigrations && python backend/manage.py migrate",
"remoteUser": "vscode"
}
Let's break down the devcontainer.json
- name: Specifies the name of the dev container. You can set it to any value that describes the project.
-
image: Defines the Docker image to be used for the container. In this case, it's
mcr.microsoft.com/devcontainers/python:3.12-bookworm, which includes Python 3.12 and is based on the Debian Bookworm distribution for the backend part of the project. - forwardPorts: Forwards the specified ports (8000 for Django and 5173 for React with Vite) from the container to your local machine, allowing you to access the app in your browser.
- features: Installs additional features. Here, it's setting up Node.js version 18 for the frontend part of the project.
- postCreateCommand: Runs commands automatically after the container is created. It installs dependencies for both the frontend (React) and backend (Django), followed by applying Django migrations to set up the database.
-
remoteUser: Defines the user inside the container. In this case, it's set to
vscode, which is typically used for Visual Studio Code's remote development environments. - customizations:
"customizations": {
"vscode": {
"settings": {
"python.defaultInterpreterPath": "/usr/local/bin/python",
"python.linting.enabled": true,
"python.linting.pylintEnabled": true
}
}
}
You can also configure tool-specific properties and add any additional settings specific to your development environment.
More details can be found at Dev Containers
3️⃣ Testing it locally
Install the Dev Containers extension in VS Code, then rebuild the container:
(If you have the Dev Containers extension installed, VS Code will prompt you to reopen the folder in the container. Accept the prompt)
Ctrl+Shift+P > Dev Containers: Rebuild Container
Once the container rebuilds without errors, you’re ready to proceed😎.
4️⃣ Pushing to GitHub
Once everything is configured and tested locally, add the changes, commit and push your code to GitHub.
git push origin main
What is Daytona, and Why to Use It?
Daytona is a self-hosted, secure open source development environment manager. Daytona's support for Dev Containers standard enables developers to tailor their environments to exact specifications and share configurations for efficient collaboration. It also supports multiple tech stacks and environments.
- Scalable: Create multiple environments(workspaces) simultaneously, ideal for collaboration or switching between projects.
- Flexible: Customize environments with dev container files, and automation for tailored setups.
- Integration with Popular Tools: Seamlessly integrates with IDEs like VS Code, JetBrains and more for a smooth workflow.
- Eliminates Setup Hassles: Automatically creates clean, isolated environments, removing the need to manually install dependencies or manage permissions.
In short, Daytona streamlines your development setup, making it scalable, secure, and hassle-free, so you can focus on coding with just one step to start.
First, let's install Daytona on your local machine. Follow the instructions based on your operating system: Daytona Installation Documentation
| Platform | Installation Command |
|---|---|
| Windows | $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; |
| Linux | (curl -sf -L https://download.daytona.io/daytona/install.sh) && daytona server -y && daytona |
| macOS | (curl -sf -L https://download.daytona.io/daytona/install.sh) && daytona server -y && daytona |
| Homebrew |
brew tap daytonaio/tapand brew install daytona
|
| Nix | nix-shell -p daytona-bin |
Configure Daytona for Your Project
Now, let's configure Daytona for your Django-React project. This setup is a one-time effort (from 1-4) but super crucial for seamless integration.
Once you've installed Daytona, run daytona serve, which will start the Daytona server.
1️⃣ Connect Your Git Provider
You’ll want Daytona to communicate with your Git repositories (like GitHub, GitLab, BitBucket and others.
daytona git-providers add
Follow the prompts to authenticate with your Git provider. This will let Daytona access your repositories without needing to reauthenticate every time. 🎉
2️⃣ Install a Cloud Provider & Set a Target Environment (Optional)
Next, you’ll need a cloud provider if you're planning to deploy your application on platforms like AWS, Azure, or GCP. Run the following command to install your cloud provider:
daytona provider install
Then, set where you want your environment to run (e.g., Docker, AWS, GCP, Azure):
daytona target set
Daytona will remember your choice for next time.
3️⃣ Choose Your IDE
Finally, Daytona integrates with popular IDEs like VS Code, IntelliJ, and more. To set your default IDE:
daytona ide
This will configure your IDE to work seamlessly with Daytona, giving you all the comfort and tools you’re used to while working in a containerized environment.🎨
4️⃣ Create Your Workspace 🛠️
Your environment is all set up! Now it’s time to create the project workspace. Run the following command to create the workspace for Django-React app:
daytona create <REPO_URL>
In this case it's https://github.com/<user_name>/Django-React-Full-Stack-App
Once you run that single command, it will create a workspace and install all the dependencies for both frontend and backend. 🚀
You’ll now have a fully configured development environment that’s ready to go. To run your project locally, run:
cd frontend && npm run dev and cd backend cd backend && python manage.py runserver
This will spin up your React frontend and Django backend for local development. 💻
Ready to Code! 🎉
With your Git provider, cloud platform, target, and IDE set up, you’re ready to start developing! Daytona simplifies container management, version control, and cloud deployments, allowing you to focus on what matters most—coding your Django-React app. 😎
No more repetitive configurations—just get in and start building. 🚀
Resume Work on Your Project
If you want to work on your project again, simply run the following commands to start where you left off:
daytona serve #starts your daytona server
daytona start <your_workspace_name>
daytona code #Select the project, and Daytona will open it for you to continue coding.
Managing environment variables
There are multiple ways to manage the env variables and few are below.
1️⃣ Create a .env File
A simple and clean approach is to create a .env file manually in your project root directory and add your environment variables to it. This ensures that the variables are loaded whenever your project runs. Here's an example:
DATABASE_URL=your_database_url
SECRET_KEY=your_secret_key
DEBUG=True
This method is straightforward and helps you keep control over your environment variables, especially for existing workspaces.
2️⃣ Set Environment Variables Using Daytona
You can also set environment variables directly through Daytona before creating a workspace by using the following command:
daytona set env KEY=VALUE
Note: It’s not recommended to use this method as you lose control over the process. The environment variables set this way will only be applied to new workspaces. Existing workspaces will not receive these variables while they are running, which could lead to inconsistency across your environment.
3️⃣ Automatically Create .env Inside the frontend Folder (Using Post-Create Command)
To ensure the .env file is created automatically in the frontend folder, you can add the following postCreateCommand to your configuration:
"postCreateCommand": "bash -c 'test -f frontend/.env || touch frontend/.env'"
This command checks if the .env file exists in the frontend folder, and if not, it creates it.
Conclusion
With Daytona, you can forget about the manual setup of development environments across various tech stacks and start coding immediately. The daytona create command ensures your environment is set up in no time, saving you effort and eliminating manual configurations. Daytona’s flexibility and scalability make it an invaluable tool for efficient, hassle-free development workflows, regardless of the tech stack.
Thank you for reading! Feel free to share your thoughts and opinions in the comments 😊. I hope you found this helpful! You can connect with me on LinkedIn, X, GitHub. Few other posts to check here.
Top comments (0)