Local Dev-Container Playground

Local Dev-Container Playground is a desktop-friendly web application that helps developers generate configuration files for local development environments.

Instead of manually writing a devcontainer.json, Dockerfile, or related setup files, users can select their preferred programming language, framework, database, and VS Code extensions. The application then generates ready-to-use configuration files based on those choices.

Project Goal

Setting up a development container can be confusing and repetitive, especially for developers who are new to Docker or Visual Studio Code Dev Containers.

This project aims to make the process easier by providing a simple graphical interface where developers can build a customized development environment without writing every configuration file from scratch.

Main Features

• Select a programming language
• Select a framework
• Select a database
• Choose recommended VS Code extensions
• Generate a devcontainer.json file
• Generate a Dockerfile
• Preview generated files directly in the browser
• Copy generated code to the clipboard
• Reset the form and create another configuration
• Display useful setup instructions for the generated environment

Example Technology Options

The first version of the application may support configurations such as:

• Python with Flask
• Python with Django
• Node.js with Express
• Node.js with MongoDB
• Python with MySQL
• Node.js with PostgreSQL

More languages, frameworks, databases, and tools can be added later.

Technology Stack

Backend

• Python
• Flask
• Jinja templates
• JSON responses

Frontend

• HTML
• CSS
• JavaScript
• Fetch API

Development Tools

• Git
• GitHub
• Docker
• Visual Studio Code
• VS Code Dev Containers

How the Application Will Work

1. The user opens the application in a web browser.
2. The user selects a language, framework, database, and optional extensions.
3. The user clicks the Generate Configuration button.
4. JavaScript collects the selected options.
5. JavaScript sends the choices to the Flask backend using the Fetch API.
6. Python selects the correct configuration templates.
7. Python fills the templates with the selected values.
8. The backend returns the generated configuration files as JSON.
9. JavaScript displays the generated code on the page.
10. The user copies the configuration into their project.

Planned Project Structure

local-dev-container-playground/
│
├── app.py
├── requirements.txt
├── README.md
├── .gitignore
│
├── templates/
│   └── index.html
│
├── static/
│   ├── css/
│   │   └── style.css
│   │
│   └── js/
│       └── script.js
│
├── generators/
│   ├── __init__.py
│   ├── config_generator.py
│   └── templates.py
│
└── tests/
    └── test_generator.py

Project Roadmap

Phase 1: Project Setup

• Create the Flask application
• Create the project folder structure
• Add the homepage route
• Connect the HTML, CSS, and JavaScript files
• Add a Python virtual environment
• Add project dependencies to requirements.txt

Phase 2: User Interface

• Create the project title and description
• Add language selection
• Add framework selection
• Add database selection
• Add VS Code extension selection
• Add the Generate button
• Add an output area for generated files
• Add Copy to Clipboard buttons

Phase 3: Configuration Generator

• Create reusable Python templates
• Generate devcontainer.json
• Generate Dockerfile
• Support Python and Flask
• Support Node.js and Express
• Add database-specific configuration
• Add selected VS Code extensions

Phase 4: Frontend and Backend Connection

• Send form data using JavaScript
• Create a Flask generation API route
• Validate the submitted choices
• Return generated files as JSON
• Display the generated files without refreshing the page
• Show readable error messages

Phase 5: Testing and Improvements

• Test every supported configuration
• Test invalid or missing selections
• Add backend unit tests
• Improve mobile and desktop layouts
• Add syntax highlighting
• Add reset functionality
• Add loading and success messages

Phase 6: Future Features

• Download generated files
• Generate docker-compose.yml
• Add Redis support
• Add Java and Spring Boot
• Add C++ development containers
• Allow users to save custom templates
• Add dark mode
• Add configuration history
• Deploy a public demo

Initial API Design

The frontend will send a request similar to this:

{
  "language": "python",
  "framework": "flask",
  "database": "mysql",
  "extensions": [
    "ms-python.python",
    "ms-azuretools.vscode-docker"
  ]
}

The backend will return a response similar to this:

{
  "success": true,
  "files": {
    "devcontainer.json": "{ generated configuration }",
    "Dockerfile": "generated Dockerfile content"
  }
}

Running the Project Locally

These instructions will be completed once the first version of the Flask application is created.

The expected setup will look similar to this:

git clone YOUR_REPOSITORY_URL
cd local-dev-container-playground
python -m venv venv

Activate the virtual environment on Windows:

venv\Scripts\activate

Activate it on macOS or Linux:

source venv/bin/activate

Install the dependencies:

pip install -r requirements.txt

Run the Flask application:

flask --app app run --debug

Then open the local address shown in the terminal.

Learning Objectives

This project will provide practice with:

• Flask routes
• Python modules and functions
• JSON data
• HTML forms
• CSS layouts
• JavaScript events
• The Fetch API
• Input validation
• Docker configuration
• VS Code Dev Containers
• Git and GitHub workflows
• Backend testing

Current Status

The project is currently in the planning and initial setup stage.

The GitHub repository has been created, and the next step is to build the Flask project structure and create the first working homepage.

License

A license has not yet been selected.