Skip to content

Commit 3eee1e7

Browse files
Add articles 5.3 and 5.4 with Bicep infrastructure files
1 parent 9f20808 commit 3eee1e7

8 files changed

Lines changed: 956 additions & 0 deletions

File tree

Lines changed: 298 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,298 @@
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+
![Azure Portal Dashboard](https://raw.githubusercontent.com/workcontrolgit/AngularNetTutorial/master/docs/images/webapi/swagger-api-endpoints.png)
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

Comments
 (0)