diff --git a/docs/DEV_DEVCONTAINER.md b/docs/DEV_DEVCONTAINER.md index 9431ffa3..747fbce4 100755 --- a/docs/DEV_DEVCONTAINER.md +++ b/docs/DEV_DEVCONTAINER.md @@ -1,8 +1,8 @@ -### Devcontainer for NetAlertX Guide +# Devcontainer for NetAlertX Guide This devcontainer is designed to mirror the production container environment as closely as possible, while providing a rich set of tools for development. -#### How to Get Started +## How to Get Started 1. **Prerequisites:** * A working **Docker installation** that can be managed by your user. This can be [Docker Desktop](https://www.docker.com/products/docker-desktop/) or Docker Engine installed via other methods (like the official [get-docker script](https://get.docker.com)). @@ -15,16 +15,18 @@ This devcontainer is designed to mirror the production container environment as * A notification will pop up in the bottom-right corner asking to **"Reopen in Container"**. Click it. * VS Code will now build the Docker image and connect your editor to the container. Your terminal, debugger, and all tools will now be running inside this isolated environment. -#### Key Workflows & Features +## Key Workflows & Features Once you're inside the container, everything is set up for you. -**1. Services (Frontend & Backend)** +### 1. Services (Frontend & Backend) + ![Services](./img/DEV/devcontainer_1.png) The container's startup script (`.devcontainer/scripts/setup.sh`) automatically starts the Nginx/PHP frontend and the Python backend. You can restart them at any time using the built-in tasks. -**2. Integrated Debugging (Just Press F5!)** +### 2. Integrated Debugging (Just Press F5!) + ![Debugging](./img/DEV/devcontainer_2.png) Debugging for both the Python backend and PHP frontend is pre-configured and ready to go. @@ -32,7 +34,8 @@ Debugging for both the Python backend and PHP frontend is pre-configured and rea * **Python Backend (debugpy):** The backend automatically starts with a debugger attached on port `5678`. Simply open a Python file (e.g., `server/__main__.py`), set a breakpoint, and press **F5** (or select "Python Backend Debug: Attach") to connect the debugger. * **PHP Frontend (Xdebug):** Xdebug listens on port `9003`. In VS Code, start listening for Xdebug connections and use a browser extension (like "Xdebug helper") to start a debugging session for the web UI. -**3. Common Tasks (F1 -> Run Task)** +### 3. Common Tasks (F1 -> Run Task) + ![Common tasks](./img/DEV/devcontainer_3.png) We've created several VS Code Tasks to simplify common operations. Access them by pressing `F1` and typing "Tasks: Run Task". @@ -41,12 +44,13 @@ We've created several VS Code Tasks to simplify common operations. Access them b * `Re-Run Startup Script`: Manually re-runs the `.devcontainer/scripts/setup.sh` script to re-link files and restart services. * `Start Backend (Python)` / `Start Frontend (nginx and PHP-FPM)`: Manually restart the services if needed. -**4. Running Tests** +### 4. Running Tests + ![Running tests](./img/DEV/devcontainer_4.png) The environment includes `pytest`. You can run tests directly from the VS Code Test Explorer UI or by running `pytest -q` in the integrated terminal. The necessary `PYTHONPATH` is already configured so that tests can correctly import the server modules. -### How to Maintain This Devcontainer +## How to Maintain This Devcontainer The setup is designed to be easy to manage. Here are the core principles: