|
| 1 | +# Guide to Local Development |
| 2 | + |
| 3 | +This guide provides step-by-step instructions for setting up and running the **Modernize your code solution accelerator** locally for development and testing purposes. |
| 4 | + |
| 5 | +## Requirements |
| 6 | + |
| 7 | +Before you begin, ensure you have the following tools installed: |
| 8 | + |
| 9 | +• **Python 3.9 or higher** + PIP |
| 10 | +• **Node.js 18+** and npm |
| 11 | +• **Azure CLI** and an Azure Subscription |
| 12 | +• **Docker Desktop** (optional, for containerized development) |
| 13 | +• **Visual Studio Code IDE** (recommended) |
| 14 | +• **Git** for version control |
| 15 | + |
| 16 | +## Local Setup |
| 17 | + |
| 18 | +**Note for macOS Developers:** If you are using macOS on Apple Silicon (ARM64), you may experience compatibility issues with some Azure services. We recommend testing thoroughly and using alternative approaches if needed. |
| 19 | + |
| 20 | +The easiest way to run this accelerator is in a VS Code Dev Container, which will open the project in your local VS Code using the [Dev Containers extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers): |
| 21 | + |
| 22 | +1. **Start Docker Desktop** (install it if not already installed) |
| 23 | +2. **Open the project:** [Open in Dev Containers](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/microsoft/Modernize-your-code-solution-accelerator) |
| 24 | +3. In the VS Code window that opens, once the project files show up (this may take several minutes), open a terminal window |
| 25 | + |
| 26 | +## Detailed Development Container Setup Instructions |
| 27 | + |
| 28 | +The solution contains a [development container](https://code.visualstudio.com/docs/remote/containers) with all the required tooling to develop and deploy the accelerator. To deploy the Modernize your code Solution Accelerator using the provided development container you will also need: |
| 29 | + |
| 30 | +• [Visual Studio Code](https://code.visualstudio.com/) |
| 31 | +• [Remote containers extension for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) |
| 32 | + |
| 33 | +If you are running this on Windows, we recommend you clone this repository in [WSL](https://code.visualstudio.com/docs/remote/wsl): |
| 34 | + |
| 35 | +```bash |
| 36 | +git clone https://github.com/microsoft/Modernize-your-code-solution-accelerator |
| 37 | +``` |
| 38 | + |
| 39 | +Open the cloned repository in Visual Studio Code and connect to the development container: |
| 40 | + |
| 41 | +```bash |
| 42 | +code . |
| 43 | +``` |
| 44 | + |
| 45 | +!!! tip |
| 46 | + Visual Studio Code should recognize the available development container and ask you to open the folder using it. For additional details on connecting to remote containers, please see the [Open an existing folder in a container](https://code.visualstudio.com/docs/remote/containers#_quick-start-open-an-existing-folder-in-a-container) quickstart. |
| 47 | + |
| 48 | +When you start the development container for the first time, the container will be built. This usually takes a few minutes. Please use the development container for all further steps. |
| 49 | + |
| 50 | +The files for the dev container are located in `/.devcontainer/` folder. |
| 51 | + |
| 52 | +## Local Deployment and Debugging |
| 53 | + |
| 54 | +### 1. Clone the Repository |
| 55 | + |
| 56 | +```bash |
| 57 | +git clone https://github.com/microsoft/Modernize-your-code-solution-accelerator |
| 58 | +cd Modernize-your-code-solution-accelerator |
| 59 | +``` |
| 60 | + |
| 61 | +### 2. Log into the Azure CLI |
| 62 | + |
| 63 | +• Check your login status using: |
| 64 | +```bash |
| 65 | +az account show |
| 66 | +``` |
| 67 | + |
| 68 | +• If not logged in, use: |
| 69 | +```bash |
| 70 | +az login |
| 71 | +``` |
| 72 | + |
| 73 | +• To specify a tenant, use: |
| 74 | +```bash |
| 75 | +az login --tenant <tenant_id> |
| 76 | +``` |
| 77 | + |
| 78 | +### 3. Create a Resource Group |
| 79 | + |
| 80 | +You can create it either through the Azure Portal or the Azure CLI: |
| 81 | + |
| 82 | +```bash |
| 83 | +az group create --name <resource-group-name> --location eastus |
| 84 | +``` |
| 85 | + |
| 86 | +### 4. Deploy the Infrastructure |
| 87 | + |
| 88 | +You can use the Azure Developer CLI (recommended) or deploy the Bicep template directly: |
| 89 | + |
| 90 | +#### Option A: Using Azure Developer CLI (Recommended) |
| 91 | + |
| 92 | +```bash |
| 93 | +# Initialize the environment |
| 94 | +azd env new <environment-name> |
| 95 | + |
| 96 | +# Deploy the infrastructure and application |
| 97 | +azd up |
| 98 | +``` |
| 99 | + |
| 100 | +#### Option B: Using Azure CLI with Bicep |
| 101 | + |
| 102 | +```bash |
| 103 | +az deployment group create -g <resource-group-name> -f infra/main.bicep --query 'properties.outputs' |
| 104 | +``` |
| 105 | + |
| 106 | +**Note:** You will be prompted for various parameters including: |
| 107 | +- **principalId**: The ObjectID of your user in Entra ID. To find it, use: |
| 108 | + ```bash |
| 109 | + az ad signed-in-user show --query id -o tsv |
| 110 | + ``` |
| 111 | +- **Azure AI Service Location**: Choose from supported regions (eastus, japaneast, etc.) |
| 112 | +- **Solution Name**: A unique name for your deployment |
| 113 | + |
| 114 | +### 5. Configure Role Assignments |
| 115 | + |
| 116 | +The Bicep deployment includes the assignment of appropriate roles. If you need to add additional permissions for local development, use these commands: |
| 117 | + |
| 118 | +```bash |
| 119 | +# Cosmos DB permissions |
| 120 | +az cosmosdb sql role assignment create \ |
| 121 | + --resource-group <resource-group-name> \ |
| 122 | + --account-name <cosmos-db-account-name> \ |
| 123 | + --role-definition-name "Cosmos DB Built-in Data Contributor" \ |
| 124 | + --principal-id <aad-user-object-id> \ |
| 125 | + --scope /subscriptions/<subscription-id>/resourceGroups/<resource-group-name>/providers/Microsoft.DocumentDB/databaseAccounts/<cosmos-db-account-name> |
| 126 | + |
| 127 | +# Azure OpenAI permissions |
| 128 | +az role assignment create \ |
| 129 | + --assignee <aad-user-upn> \ |
| 130 | + --role "Cognitive Services OpenAI User" \ |
| 131 | + --scope /subscriptions/<subscription-id>/resourceGroups/<resource-group-name>/providers/Microsoft.CognitiveServices/accounts/<azure-openai-name> |
| 132 | +``` |
| 133 | + |
| 134 | +### 6. Create Environment Files |
| 135 | + |
| 136 | +Navigate to the backend directory and create a `.env` file based on the provided `.env.sample`: |
| 137 | + |
| 138 | +```bash |
| 139 | +cd src/backend |
| 140 | +cp .env.sample .env |
| 141 | +``` |
| 142 | + |
| 143 | +Fill in the `.env` file with values from your Azure deployment. You can find these in: |
| 144 | +- Azure Portal under "Deployments" in your resource group |
| 145 | +- Output from the `azd up` command |
| 146 | +- Azure resources directly in the portal |
| 147 | + |
| 148 | +### 7. Set up Virtual Environments (Optional) |
| 149 | + |
| 150 | +If you are using `venv`, create and activate your virtual environment for the backend: |
| 151 | + |
| 152 | +```bash |
| 153 | +# Backend setup |
| 154 | +cd src/backend |
| 155 | +python -m venv venv |
| 156 | + |
| 157 | +# Activate virtual environment |
| 158 | +# On Windows: |
| 159 | +venv\Scripts\activate |
| 160 | +# On macOS/Linux: |
| 161 | +source venv/bin/activate |
| 162 | +``` |
| 163 | + |
| 164 | +### 8. Install Python Dependencies |
| 165 | + |
| 166 | +In the backend directory with your virtual environment activated: |
| 167 | + |
| 168 | +```bash |
| 169 | +pip install -r requirements.txt |
| 170 | +``` |
| 171 | + |
| 172 | +### 9. Install Frontend Dependencies |
| 173 | + |
| 174 | +In the frontend directory: |
| 175 | + |
| 176 | +```bash |
| 177 | +cd src/frontend |
| 178 | +npm install |
| 179 | +``` |
| 180 | + |
| 181 | +### 10. Run the Application |
| 182 | + |
| 183 | +#### Start the Backend API: |
| 184 | + |
| 185 | +From the `src/backend` directory: |
| 186 | + |
| 187 | +```bash |
| 188 | +uvicorn app:app --host 0.0.0.0 --port 8000 --reload |
| 189 | +``` |
| 190 | + |
| 191 | +#### Start the Frontend: |
| 192 | + |
| 193 | +In a new terminal from the `src/frontend` directory: |
| 194 | + |
| 195 | +```bash |
| 196 | +npm run dev |
| 197 | +``` |
| 198 | + |
| 199 | +### 11. Access the Application |
| 200 | + |
| 201 | +• **Frontend:** Open a browser and navigate to `http://localhost:3000` |
| 202 | +• **API Documentation:** Navigate to `http://localhost:8000/docs` for Swagger documentation |
| 203 | +• **API Health Check:** Navigate to `http://localhost:8000/health` |
| 204 | + |
| 205 | +## Debugging the Solution Locally |
| 206 | + |
| 207 | +### Backend Debugging |
| 208 | + |
| 209 | +You can debug the API backend running locally with VSCode using the following `launch.json` entry: |
| 210 | + |
| 211 | +```json |
| 212 | +{ |
| 213 | + "name": "Python Debugger: Modernize Code API", |
| 214 | + "type": "debugpy", |
| 215 | + "request": "launch", |
| 216 | + "cwd": "${workspaceFolder}/src/backend", |
| 217 | + "module": "uvicorn", |
| 218 | + "args": ["app:app", "--reload", "--host", "0.0.0.0", "--port", "8000"], |
| 219 | + "jinja": true, |
| 220 | + "envFile": "${workspaceFolder}/src/backend/.env" |
| 221 | +} |
| 222 | +``` |
| 223 | + |
| 224 | +### Frontend Debugging |
| 225 | + |
| 226 | +For debugging the React frontend, you can use the browser's developer tools or set up debugging in VS Code with the appropriate extensions. |
| 227 | + |
| 228 | +### Agent System Debugging |
| 229 | + |
| 230 | +To debug the SQL agents system: |
| 231 | + |
| 232 | +1. **Enable debug logging** in your `.env` file: |
| 233 | + ``` |
| 234 | + APP_LOGGING_LEVEL=DEBUG |
| 235 | + ``` |
| 236 | + |
| 237 | +2. **Monitor agent interactions** through the application logs and WebSocket messages |
| 238 | + |
| 239 | +3. **Test individual agents** using the API endpoints directly |
| 240 | + |
| 241 | +## Using Docker for Local Development |
| 242 | + |
| 243 | +### Run with Docker Compose |
| 244 | + |
| 245 | +```bash |
| 246 | +# Build and start all services |
| 247 | +docker-compose -f docker/docker-compose.yml up --build |
| 248 | + |
| 249 | +# Run in detached mode |
| 250 | +docker-compose -f docker/docker-compose.yml up -d --build |
| 251 | +``` |
| 252 | + |
| 253 | +### Access Services |
| 254 | + |
| 255 | +• **Frontend:** `http://localhost:3000` |
| 256 | +• **Backend:** `http://localhost:8000` |
| 257 | + |
| 258 | +## Troubleshooting |
| 259 | + |
| 260 | +### Common Issues |
| 261 | + |
| 262 | +**Python Module Not Found:** |
| 263 | +```bash |
| 264 | +# Ensure virtual environment is activated |
| 265 | +source venv/bin/activate # Windows: venv\Scripts\activate |
| 266 | +pip install -r requirements.txt |
| 267 | +``` |
| 268 | + |
| 269 | +**Node.js Dependencies Issues:** |
| 270 | +```bash |
| 271 | +# Clear npm cache and reinstall |
| 272 | +npm cache clean --force |
| 273 | +rm -rf node_modules package-lock.json |
| 274 | +npm install |
| 275 | +``` |
| 276 | + |
| 277 | +**Port Conflicts:** |
| 278 | +```bash |
| 279 | +# Check what's using the port |
| 280 | +netstat -tulpn | grep :8000 # Linux/Mac |
| 281 | +netstat -ano | findstr :8000 # Windows |
| 282 | +``` |
| 283 | + |
| 284 | +**Azure Authentication Issues:** |
| 285 | +```bash |
| 286 | +# Re-authenticate |
| 287 | +az logout |
| 288 | +az login |
| 289 | +``` |
| 290 | + |
| 291 | +**CORS Issues:** |
| 292 | +• Ensure API CORS settings include the web app URL |
| 293 | +• Check browser network tab for CORS errors |
| 294 | +• Verify API is running on the expected port |
| 295 | + |
| 296 | +**Environment Variables Not Loading:** |
| 297 | +• Verify `.env` file is in the correct directory |
| 298 | +• Check file permissions (especially on Linux/macOS) |
| 299 | +• Ensure no extra spaces in variable assignments |
| 300 | + |
| 301 | +**Agent Initialization Failures:** |
| 302 | +• Verify Azure AI Foundry endpoint is correct |
| 303 | +• Check Azure OpenAI model deployments are available |
| 304 | +• Ensure proper authentication and permissions |
| 305 | + |
| 306 | +### Debug Mode |
| 307 | + |
| 308 | +Enable detailed logging by setting these environment variables in your `.env` file: |
| 309 | + |
| 310 | +``` |
| 311 | +APP_LOGGING_LEVEL=DEBUG |
| 312 | +AZURE_OPENAI_API_VERSION=2024-08-01-preview |
| 313 | +``` |
| 314 | + |
| 315 | +### Database Issues |
| 316 | + |
| 317 | +**Using a Different Database in Cosmos:** |
| 318 | + |
| 319 | +You can set the solution up to use a different database in Cosmos. For example, you can name it something like `modernize-dev`. To do this: |
| 320 | + |
| 321 | +1. Change the environment variable `AZURE_COSMOS_DATABASE` to the new database name |
| 322 | +2. Create the database in the Cosmos DB account from the Data Explorer pane in the portal |
| 323 | + |
| 324 | +--- |
| 325 | + |
| 326 | +For production deployment instructions, see the [Deployment Guide](./DeploymentGuide.md). |
0 commit comments