Created
August 2, 2026 22:22
-
-
Save lassebenni/9d7d895b7d9d84a82ece2cb4d91f1a32 to your computer and use it in GitHub Desktop.
Visual for: What happens when you deploy (Week 14 Bicep pipeline)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Visual: What happens when you deploy</title> | |
| <style> | |
| body { | |
| margin: 0; | |
| padding: 24px; | |
| background: #faf5d9; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| font-family: "Lato", "Helvetica Neue", Arial, sans-serif; | |
| } | |
| svg { max-width: 860px; width: 100%; height: auto; } | |
| </style> | |
| </head> | |
| <body> | |
| <svg viewBox="0 0 860 470" xmlns="http://www.w3.org/2000/svg" font-family="Lato, Helvetica Neue, Arial, sans-serif"> | |
| <rect x="2" y="2" width="856" height="466" rx="16" fill="#ffffff" stroke="#e6dfb8" stroke-width="2"/> | |
| <text x="430" y="36" text-anchor="middle" fill="#b12900" font-size="21" font-weight="700">What happens when you deploy</text> | |
| <text x="430" y="58" text-anchor="middle" fill="#595959" font-size="13.5">One command, and the halves either side of the dashed line are very different</text> | |
| <!-- YOUR MACHINE --> | |
| <rect x="26" y="78" width="380" height="252" rx="12" fill="#fbfaf3" stroke="#8a8a8a" stroke-width="2"/> | |
| <rect x="40" y="68" width="132" height="20" rx="5" fill="#ffffff"/> | |
| <text x="44" y="83" fill="#595959" font-size="11.5" font-weight="700">YOUR MACHINE</text> | |
| <rect x="52" y="106" width="150" height="58" rx="9" fill="#f3edc6" stroke="#b12900" stroke-width="2"/> | |
| <text x="127" y="130" text-anchor="middle" fill="#b12900" font-size="13.5" font-weight="700">main.bicep</text> | |
| <text x="127" y="150" text-anchor="middle" fill="#000000" font-size="11.5">what you wrote</text> | |
| <text x="222" y="132" text-anchor="middle" fill="#595959" font-size="17">→</text> | |
| <text x="222" y="180" text-anchor="middle" fill="#595959" font-size="10.5">transpile</text> | |
| <rect x="240" y="106" width="150" height="58" rx="9" fill="#e8f5e9" stroke="#2e7d32" stroke-width="2"/> | |
| <text x="315" y="130" text-anchor="middle" fill="#2e7d32" font-size="13.5" font-weight="700">ARM JSON</text> | |
| <text x="315" y="150" text-anchor="middle" fill="#000000" font-size="11.5">in memory, not a file</text> | |
| <text x="52" y="196" fill="#595959" font-size="11.5">The Azure CLI ships the Bicep compiler. This step needs</text> | |
| <text x="52" y="213" fill="#595959" font-size="11.5">no network and no login: it is pure text in, text out.</text> | |
| <text x="52" y="238" fill="#595959" font-size="11.5">Want to see the JSON? Run it yourself:</text> | |
| <text x="52" y="262" fill="#1565c0" font-size="11" font-family="SF Mono, Menlo, monospace">az bicep build --file main.bicep --stdout</text> | |
| <rect x="52" y="278" width="338" height="38" rx="8" fill="#fff8e1" stroke="#d29922" stroke-width="1.5"/> | |
| <text x="62" y="294" fill="#000000" font-size="11">Functions are <tspan font-weight="700">not</tspan> resolved here. <tspan font-family="SF Mono, Menlo, monospace" font-size="10.5">resourceGroup().location</tspan></text> | |
| <text x="62" y="309" fill="#000000" font-size="11">survives into the JSON as an expression for Azure to evaluate.</text> | |
| <!-- boundary --> | |
| <line x1="424" y1="78" x2="424" y2="410" stroke="#8a8a8a" stroke-width="2" stroke-dasharray="6 5"/> | |
| <rect x="386" y="352" width="78" height="18" rx="4" fill="#ffffff"/> | |
| <text x="425" y="366" text-anchor="middle" fill="#595959" font-size="10.5" font-weight="700">HTTPS</text> | |
| <!-- AZURE --> | |
| <rect x="442" y="78" width="392" height="252" rx="12" fill="#e3f2fd" stroke="#1565c0" stroke-width="2"/> | |
| <rect x="456" y="68" width="60" height="20" rx="5" fill="#ffffff"/> | |
| <text x="460" y="83" fill="#1565c0" font-size="11.5" font-weight="700">AZURE</text> | |
| <rect x="468" y="106" width="342" height="52" rx="9" fill="#ffffff" stroke="#1565c0" stroke-width="2"/> | |
| <text x="639" y="128" text-anchor="middle" fill="#1565c0" font-size="13.5" font-weight="700">Azure Resource Manager</text> | |
| <text x="639" y="147" text-anchor="middle" fill="#595959" font-size="10.5" font-family="SF Mono, Menlo, monospace">management.azure.com</text> | |
| <text x="639" y="176" text-anchor="middle" fill="#1565c0" font-size="17">↓</text> | |
| <rect x="468" y="186" width="342" height="46" rx="9" fill="#f3edc6" stroke="#b12900" stroke-width="2"/> | |
| <text x="639" y="205" text-anchor="middle" fill="#b12900" font-size="13" font-weight="700">Compare with what already exists</text> | |
| <text x="639" y="223" text-anchor="middle" fill="#000000" font-size="11.5">create, update, or leave alone</text> | |
| <text x="639" y="250" text-anchor="middle" fill="#1565c0" font-size="17">↓</text> | |
| <rect x="468" y="260" width="164" height="56" rx="9" fill="#e8f5e9" stroke="#2e7d32" stroke-width="2"/> | |
| <text x="550" y="281" text-anchor="middle" fill="#2e7d32" font-size="12.5" font-weight="700">Your resources</text> | |
| <text x="550" y="300" text-anchor="middle" fill="#000000" font-size="11">storage account</text> | |
| <rect x="646" y="260" width="164" height="56" rx="9" fill="#ede7f6" stroke="#5e35b1" stroke-width="2"/> | |
| <text x="728" y="281" text-anchor="middle" fill="#5e35b1" font-size="12.5" font-weight="700">Deployment record</text> | |
| <text x="728" y="300" text-anchor="middle" fill="#000000" font-size="11">the Deployments blade</text> | |
| <!-- takeaway --> | |
| <rect x="26" y="386" width="808" height="62" rx="10" fill="#f3edc6" stroke="#b12900" stroke-width="2"/> | |
| <text x="430" y="410" text-anchor="middle" fill="#b12900" font-size="14" font-weight="700">Azure never sees your .bicep file. It receives JSON, and it decides what to change.</text> | |
| <text x="430" y="432" text-anchor="middle" fill="#000000" font-size="12.5">That second half is why a re-deploy is safe, and why the preview can exist at all.</text> | |
| </svg> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment