|
| 1 | +# Your First Azure Deployment: Setting Up a Visual Studio Subscription |
| 2 | + |
| 3 | +## Activate Your $50 Monthly Credit, Install the Azure CLI, and Understand What Fits in Your Budget |
| 4 | + |
| 5 | +Most Azure tutorials assume you already have an account, a subscription, and money to spend. If you have a Visual Studio Professional or Enterprise subscription, you already have a monthly Azure credit — and it's enough to run this entire three-tier application. You just have to activate it. |
| 6 | + |
| 7 | +This article walks through activating the benefit, setting a spending limit so you can never accidentally overspend, installing the Azure CLI and Bicep, and understanding exactly which Azure resources fit within a $50/month budget. |
| 8 | + |
| 9 | + |
| 10 | + |
| 11 | +📖 **Tutorial Repository:** [AngularNetTutorial on GitHub](https://github.com/workcontrolgit/AngularNetTutorial) |
| 12 | + |
| 13 | +--- |
| 14 | + |
| 15 | +This article is part of the **AngularNetTutorial** series. The full-stack tutorial — covering Angular 20, .NET 10 Web API, and OAuth 2.0 with Duende IdentityServer — has been published at [Building Modern Web Applications with Angular, .NET, and OAuth 2.0](https://medium.com/scrum-and-coke/building-modern-web-applications-with-angular-net-and-oauth-2-0-complete-tutorial-series-7ea97ed3fc56). **This article is the first in the Azure Deployment sub-series — it gets your Azure environment ready before any infrastructure is provisioned.** |
| 16 | + |
| 17 | +--- |
| 18 | + |
| 19 | +## 📚 What You'll Learn |
| 20 | + |
| 21 | +* **Visual Studio Azure benefit** — where the credit comes from and how to activate it |
| 22 | +* **Spending limit** — the one setting that prevents accidental charges beyond your credit |
| 23 | +* **Azure CLI** — how to install it and verify you're targeting the right subscription |
| 24 | +* **Bicep CLI** — the infrastructure-as-code tool used in the next article |
| 25 | +* **Cost profile** — what the full three-tier stack costs per month and why it fits in $50 |
| 26 | + |
| 27 | +--- |
| 28 | + |
| 29 | +## 📋 Prerequisites |
| 30 | + |
| 31 | +**Before following this article, you should have:** |
| 32 | + |
| 33 | +* **Visual Studio Professional or Enterprise subscription** — includes Azure monthly credit |
| 34 | +* **Windows 10/11 or macOS** — Azure CLI runs on both |
| 35 | +* **winget (Windows) or Homebrew (macOS)** — for CLI installation |
| 36 | + |
| 37 | +**Not sure if you have a Visual Studio subscription?** Check at [my.visualstudio.com](https://my.visualstudio.com). If your employer or school provides it, your subscription is listed there. |
| 38 | + |
| 39 | +--- |
| 40 | + |
| 41 | +## 🎯 The Problem |
| 42 | + |
| 43 | +Azure has a free trial, but it expires after 30 days and caps some services. If you have a Visual Studio Professional subscription, you have a better option: a monthly Azure credit that renews every month and never expires as long as your subscription is active. |
| 44 | + |
| 45 | +**Common pain points for first-time Azure users:** |
| 46 | + |
| 47 | +* **Credit vs. billing confusion** — the benefit doesn't automatically prevent charges above the credit limit unless you set a spending limit |
| 48 | +* **Too many subscription types** — Pay-As-You-Go, Free Trial, and Visual Studio Dev Essentials all look similar in the portal but behave differently |
| 49 | +* **Azure CLI not installed** — the remaining articles in this sub-series use `az` commands; the portal won't be enough |
| 50 | +* **Wrong subscription selected** — if you have multiple subscriptions, CLI commands may target the wrong one |
| 51 | + |
| 52 | +--- |
| 53 | + |
| 54 | +## 💡 The Solution |
| 55 | + |
| 56 | +Activate the Visual Studio Azure benefit, set a $0 spending limit above the credit, install the tools, and verify you're pointing at the right subscription. This takes about 15 minutes and you only do it once. |
| 57 | + |
| 58 | +**What you get:** |
| 59 | + |
| 60 | +* ✅ **Visual Studio Professional** — $50/month Azure credit |
| 61 | +* ✅ **Visual Studio Enterprise** — $150/month Azure credit |
| 62 | +* ✅ **Credit renews monthly** — never expires while subscription is active |
| 63 | +* ✅ **Spending limit prevents overruns** — services pause when credit runs out, no bill |
| 64 | + |
| 65 | +--- |
| 66 | + |
| 67 | +## 🚀 How It Works |
| 68 | + |
| 69 | +### Step 1: Check Your Visual Studio Subscription |
| 70 | + |
| 71 | +Go to [my.visualstudio.com/benefits](https://my.visualstudio.com/benefits) and log in with the account associated with your Visual Studio subscription. |
| 72 | + |
| 73 | +Look for the **Azure** tile under the "Tools" section. It shows your monthly credit amount: |
| 74 | + |
| 75 | +* **Professional** — $50/month |
| 76 | +* **Enterprise** — $150/month |
| 77 | +* **Dev Essentials** — $200 one-time free trial (not a monthly credit) |
| 78 | + |
| 79 | +If you do not see an Azure tile, your subscription level may not include the Azure benefit. Check [Visual Studio subscription comparison](https://visualstudio.microsoft.com/vs/compare/) to confirm. |
| 80 | + |
| 81 | +### Step 2: Activate the Azure Benefit |
| 82 | + |
| 83 | +Click **Activate** on the Azure tile at my.visualstudio.com/benefits. |
| 84 | + |
| 85 | +This redirects you to the Azure sign-up page. Use the **same Microsoft account** that holds your Visual Studio subscription — mixing accounts creates a separate, unlinked subscription. |
| 86 | + |
| 87 | +After activation, you land in the Azure Portal at [portal.azure.com](https://portal.azure.com). Your subscription appears in **Subscriptions** and has a name like `Visual Studio Professional`. |
| 88 | + |
| 89 | +**Wait for:** The subscription status to show **Active** before proceeding. |
| 90 | + |
| 91 | +### Step 3: Set a Spending Limit |
| 92 | + |
| 93 | +This is the most important step. By default, Azure pauses services when the monthly credit runs out — but the setting must be confirmed. |
| 94 | + |
| 95 | +In the Azure Portal: |
| 96 | + |
| 97 | +``` |
| 98 | +Search bar → "Subscriptions" → select your Visual Studio subscription |
| 99 | +→ "Cost Management" section → "Spending limit" |
| 100 | +→ Confirm spending limit is ON (set to $0 above credit) |
| 101 | +``` |
| 102 | + |
| 103 | +**What happens when credit runs out:** |
| 104 | +* Services are suspended (not deleted) — you get an email warning first |
| 105 | +* Everything restarts automatically when the new monthly credit is applied |
| 106 | +* No credit card is charged unless you explicitly remove the spending limit |
| 107 | + |
| 108 | +> **Never remove the spending limit** unless you intend to pay beyond the credit. For this tutorial, the full stack costs approximately $23/month — well within the $50 credit. |
| 109 | +
|
| 110 | +### Step 4: Install the Azure CLI |
| 111 | + |
| 112 | +The Azure CLI (`az`) is the command-line tool used throughout this sub-series to deploy resources, run Bicep templates, and configure app settings. |
| 113 | + |
| 114 | +**Windows (winget):** |
| 115 | + |
| 116 | +```bash |
| 117 | +winget install Microsoft.AzureCLI |
| 118 | +``` |
| 119 | + |
| 120 | +**macOS (Homebrew):** |
| 121 | + |
| 122 | +```bash |
| 123 | +brew install azure-cli |
| 124 | +``` |
| 125 | + |
| 126 | +**Verify the installation:** |
| 127 | + |
| 128 | +```bash |
| 129 | +az version |
| 130 | +``` |
| 131 | + |
| 132 | +**Expected output:** a JSON block showing the CLI version (2.60 or higher recommended). |
| 133 | + |
| 134 | +### Step 5: Log In to Azure |
| 135 | + |
| 136 | +```bash |
| 137 | +az login |
| 138 | +``` |
| 139 | + |
| 140 | +A browser window opens to the Microsoft login page. Sign in with the same account used to activate the Azure benefit. After login, the terminal lists your available subscriptions. |
| 141 | + |
| 142 | +**Expected output:** |
| 143 | + |
| 144 | +```json |
| 145 | +[ |
| 146 | + { |
| 147 | + "id": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx", |
| 148 | + "name": "Visual Studio Professional", |
| 149 | + "state": "Enabled", |
| 150 | + "isDefault": true |
| 151 | + } |
| 152 | +] |
| 153 | +``` |
| 154 | + |
| 155 | +If `isDefault` is `true` for your Visual Studio subscription, you're ready. If you have multiple subscriptions and the wrong one is selected, set the correct one explicitly. |
| 156 | + |
| 157 | +### Step 6: Set the Target Subscription |
| 158 | + |
| 159 | +If you have more than one subscription, ensure every `az` command targets the Visual Studio subscription: |
| 160 | + |
| 161 | +```bash |
| 162 | +# List all subscriptions |
| 163 | +az account list --output table |
| 164 | + |
| 165 | +# Set the correct subscription by name |
| 166 | +az account set --subscription "Visual Studio Professional" |
| 167 | + |
| 168 | +# Confirm the active subscription |
| 169 | +az account show --query "{name:name, id:id, state:state}" --output table |
| 170 | +``` |
| 171 | + |
| 172 | +**Why this matters:** Every Bicep deployment and role assignment in subsequent articles uses the active subscription. Targeting the wrong one wastes credit and may not have the right permissions. |
| 173 | + |
| 174 | +### Step 7: Install the Bicep CLI |
| 175 | + |
| 176 | +Bicep is the infrastructure-as-code language used in Article 5.4 to provision all Azure resources. It is included with Azure CLI 2.20 and later, but installing or updating it explicitly ensures you have the latest version: |
| 177 | + |
| 178 | +```bash |
| 179 | +az bicep install |
| 180 | + |
| 181 | +# Verify |
| 182 | +az bicep version |
| 183 | +``` |
| 184 | + |
| 185 | +**Expected output:** `Bicep CLI version 0.28.x` or higher. |
| 186 | + |
| 187 | +### Step 8: Verify the Complete Setup |
| 188 | + |
| 189 | +Run these three commands to confirm everything is in place: |
| 190 | + |
| 191 | +```bash |
| 192 | +# Azure CLI version |
| 193 | +az version --query '"azure-cli"' --output tsv |
| 194 | + |
| 195 | +# Active subscription |
| 196 | +az account show --query "{name:name, id:id}" --output table |
| 197 | + |
| 198 | +# Bicep version |
| 199 | +az bicep version |
| 200 | +``` |
| 201 | + |
| 202 | +All three should return values without errors. If `az account show` shows the wrong subscription, re-run Step 6. |
| 203 | + |
| 204 | +--- |
| 205 | + |
| 206 | +## 💻 Try It Yourself |
| 207 | + |
| 208 | +After completing the setup, explore your subscription from the terminal: |
| 209 | + |
| 210 | +```bash |
| 211 | +# List resource groups (empty at this point — that's expected) |
| 212 | +az group list --output table |
| 213 | + |
| 214 | +# Check available regions (useful for choosing where to deploy) |
| 215 | +az account list-locations --query "[].{Name:name, DisplayName:displayName}" --output table | head -20 |
| 216 | +``` |
| 217 | + |
| 218 | +No resources are provisioned yet. Article 5.4 writes the Bicep templates and runs the deployment command that creates all seven Azure resources at once. |
| 219 | + |
| 220 | +--- |
| 221 | + |
| 222 | +## 📊 Budget: What Fits in $50/Month |
| 223 | + |
| 224 | +The full three-tier stack uses these Azure resources. Here is the approximate monthly cost for the dev environment: |
| 225 | + |
| 226 | +**Compute:** |
| 227 | + |
| 228 | +* **App Service Plan B1** — ~$13.14/month (hosts both the .NET API and IdentityServer) |
| 229 | +* Note: Azure charges at the App Service Plan level, not per Web App. Both apps share the plan at no additional cost. |
| 230 | + |
| 231 | +**Databases:** |
| 232 | + |
| 233 | +* **Azure SQL Basic tier (5 DTUs)** — ~$4.90/month per database |
| 234 | +* Two databases (API + IdentityServer) — ~$9.80/month total |
| 235 | + |
| 236 | +**Frontend:** |
| 237 | + |
| 238 | +* **Azure Static Web Apps Free tier** — $0/month (built-in CDN and global distribution included) |
| 239 | + |
| 240 | +**Total estimate:** approximately **$23/month** — comfortably within the $50 Visual Studio Professional credit. |
| 241 | + |
| 242 | +**What would exceed the budget:** |
| 243 | + |
| 244 | +* Upgrading to B2 or B3 App Service Plan (doubles or quadruples the compute cost) |
| 245 | +* Using Standard SQL tier instead of Basic (10× more expensive) |
| 246 | +* Adding a second App Service Plan instead of sharing one |
| 247 | +* Premium networking features (Private Link, VNet integration) |
| 248 | + |
| 249 | +The architecture in this sub-series is deliberately designed to stay within $23/month. Upgrading to a larger SQL tier or higher compute is straightforward later if the application grows. |
| 250 | + |
| 251 | +--- |
| 252 | + |
| 253 | +## 🔑 Key Design Decisions |
| 254 | + |
| 255 | +**Visual Studio subscription, not Pay-As-You-Go.** The VS subscription benefit provides a monthly credit with a spending limit guardrail. Pay-As-You-Go has no spending limit by default, which makes accidental overruns possible. For a development environment, the VS benefit is the safest starting point. |
| 256 | + |
| 257 | +**One subscription for dev.** Use a single Azure subscription for the dev environment. Do not mix dev and production resources in the same subscription — they share the credit and the spending limit. When a production environment is needed, a separate subscription (or a separate resource group under a paid subscription) keeps billing isolated. |
| 258 | + |
| 259 | +**Set the spending limit before deploying anything.** Provisioning resources before confirming the spending limit means any misconfiguration (leaving a resource running, choosing the wrong SKU) immediately starts consuming credit without a safety net. Confirm the limit first. |
| 260 | + |
| 261 | +**`az account set` before every session.** The active subscription persists between terminal sessions, but if you switch between subscriptions during the day, always confirm with `az account show` before running deployment commands. |
| 262 | + |
| 263 | +**eastus as the default region.** Azure pricing is consistent across major US regions (eastus, westus2, centralus). The articles in this sub-series use `eastus` as the default. Choose the region closest to your users for production. |
| 264 | + |
| 265 | +--- |
| 266 | + |
| 267 | +## 🌟 Why This Matters |
| 268 | + |
| 269 | +Getting the Azure environment right before writing a single line of infrastructure code prevents the most common source of frustration for first-time deployers: targeting the wrong subscription, hitting unexpected charges, or discovering a missing tool in the middle of a deployment. |
| 270 | + |
| 271 | +The Visual Studio Azure benefit is one of the most underused perks of a VS subscription. It provides a real Azure environment — not a sandbox with restricted services — that renews every month. The $50/month credit for Professional subscribers is enough to run a complete three-tier application stack indefinitely for development and demo purposes. |
| 272 | + |
| 273 | +**Transferable skills:** |
| 274 | + |
| 275 | +* **`az account set` + `az account show`** — the pattern for managing multiple subscriptions applies to any Azure project, not just this one |
| 276 | +* **Spending limit strategy** — applicable to any team Azure account where you want cost guardrails during development |
| 277 | +* **Bicep CLI installation** — a one-time prerequisite for any project that uses infrastructure-as-code |
| 278 | + |
| 279 | +--- |
| 280 | + |
| 281 | +## 🤝 Community & Support |
| 282 | + |
| 283 | +**Questions or feedback?** The tutorial repository welcomes: |
| 284 | + |
| 285 | +* ⭐ **GitHub stars** — Help others discover it! |
| 286 | +* 🐛 **Issue reports** — Found a bug or have a suggestion? |
| 287 | +* 💬 **Discussions** — Ask questions, share your use cases |
| 288 | +* 🚀 **Pull requests** — Improvements always appreciated |
| 289 | + |
| 290 | +**Found this helpful?** Share it with your team and follow for more full-stack development content! |
| 291 | + |
| 292 | +--- |
| 293 | + |
| 294 | +📖 **Series:** [AngularNetTutorial Series Navigation](../SERIES-NAVIGATION-TOC.md) |
| 295 | + |
| 296 | +--- |
| 297 | + |
| 298 | +**📌 Tags:** #azure #dotnet #angular #visualstudio #devops #clouddeployment #azurecli #bicep #infrastructure #webdevelopment #fullstack #csharp #typescript #oauth2 #identityserver |
0 commit comments