Week 29 — Going live — deploy to Azure¶

At a glance


Date	Friday, April 16, 2027
Unit	4 — Ship It
Big idea	Deployed means your files live on a web server that other people can reach with a URL.
Goal	Every student's first web page is reviewed, placed in a student folder, and published through one teacher-managed Azure Static Web App.
Student accounts needed	None for Azure. Students never create Azure accounts, see credentials, or touch the portal.
Prep time	45–60 minutes before class. This is not a 5-minute prep week.

Why this lesson looks the way it does¶

Last Friday students styled their first pages. Today is the emotional payoff: their work becomes reachable at a real public address. That moment matters. For some students, especially younger ones, "I made something on the internet" will be the sentence they remember from the whole year.

The logistics are intentionally centralized. Students write files; the teacher reviews and deploys. One Azure Static Web App contains one folder per student, such as /students/blue-otter/. This protects student privacy, avoids account sprawl, and keeps the class from turning into portal troubleshooting.

CSTA 2026 standards¶

Concept area	Connection
Algorithms & Design	Prepare files in a predictable folder structure so links resolve correctly
Programming	Debug HTML/CSS by testing the deployed output against the local preview
Data & Analysis	Organize student artifacts as files and folders with consistent names
Systems & Security	Explain server, URL, deployment, domain, HTTPS, and why credentials stay with the teacher
Computing & Society	Publish only reviewed, public-safe content with no full names or personal information

"I can…" objectives¶

By the end of today, students can say:

I can explain what it means for a website to be deployed.
I can prepare index.html and style.css for a real public URL.
I can describe why public websites need privacy review.
I can visit and share a URL for a page I built.

Teacher prep — the 5-minute version¶

This is really a 45–60 minute prep because Azure must be tested before students arrive.

Do this before Friday

Do not create the Azure resource for the first time while students watch. Create and test the shell once before class. On Friday, the classroom task should be collecting, reviewing, copying files, and running one deploy.

1. Create a local deployment folder¶

On your teacher machine, create:

eca-shipit-site/
  index.html
  students/
    sample-student/
      index.html
      style.css

Use safe slugs for student folders. Good: blue-otter, mango-lab, rocket-7. Avoid full names, birthdays, graduation years tied to identity, or anything embarrassing.

Example class landing page:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>ECA Coding Showcase 2027</title>
    <style>
      body { font-family: Arial, sans-serif; margin: 40px; background: #f5f7fb; }
      main { max-width: 800px; }
      a { color: #2457a6; }
    </style>
  </head>
  <body>
    <main>
      <h1>ECA Coding Showcase 2027</h1>
      <p>Student pages built in resource class.</p>
      <ul>
        <li><a href="students/sample-student/">Sample student page</a></li>
      </ul>
    </main>
  </body>
</html>

2. Install tools on the teacher machine¶

These commands use documented Azure CLI and Azure Static Web Apps CLI behavior. I verified the command names and flags against Microsoft Learn on Azure Static Web Apps and SWA CLI deployment: https://learn.microsoft.com/azure/static-web-apps/ and https://learn.microsoft.com/azure/static-web-apps/static-web-apps-cli-deploy.

az login
az account set --subscription "<YOUR-SUBSCRIPTION-ID-OR-NAME>"
npm install -g @azure/static-web-apps-cli

If npm is not available, install Node.js LTS on the teacher machine before class. Do not do this on student devices.

3. Create the Azure Static Web App shell¶

$resourceGroup = "eca-coding-2027-rg"
$appName = "eca-coding-shipit-2027"
$location = "eastus2"

az group create --name $resourceGroup --location $location
az staticwebapp create --name $appName --resource-group $resourceGroup --location $location --sku Free

az staticwebapp create defaults to Free, but --sku Free is included so the intent is visible.

4. Test a deployment before class¶

From inside the eca-shipit-site folder:

$token = az staticwebapp secrets list --name $appName --resource-group $resourceGroup --query "properties.apiKey" -o tsv
swa deploy . --env production --deployment-token $token
$siteHost = az staticwebapp show --name $appName --resource-group $resourceGroup --query "defaultHostname" -o tsv
"https://$siteHost"

Don't name that variable $host

$host is a reserved automatic variable in PowerShell and is read-only. Assigning to it fails with "Cannot overwrite variable Host because it is read-only or constant." Use $siteHost — or anything other than $host. This is exactly the kind of thing you do not want to discover with sixteen students watching.

Do not paste or project the deployment token. Treat it like a password.

5. Make the file handoff simple¶

Use one mechanism: a Google Drive folder named Unit 4 Drop Box with subfolders named by approved slugs.

Each student submits exactly:

index.html
style.css

If a student has images, put them in the same folder and use relative paths like cat.png, not a private Drive URL.

Minute-by-minute run sheet¶

0:00–0:04 — Anchor¶

Say:

"Last Friday your page looked like yours. Today it leaves this room.

The word for that is deploy. Deploy means the files are copied to a place on the internet where a server can hand them to someone else's browser."

Then pause:

"This is the day the Week 1 promise starts coming true."

0:04–0:12 — Mini-lesson: what happens when someone clicks a URL¶

Draw this on the board:

Grandmother's browser → URL → web server → files → rendered page

Say:

"A domain is the human-readable address. A server is the computer service that sends the files back. HTTPS means the connection is encrypted. Azure Static Web Apps is the service I am using to host your static files. You do not need Azure accounts because you are not managing the server — I am."

Then state the safety review:

"Before anything goes live, I check for full names, photos of students, contact info, location details, and unapproved links. If I ask you to change something, that is not punishment. That is publishing like a professional."

0:12–0:36 — Paired build: final check and handoff¶

Students work in pairs through this checklist:

Page has a clear title and heading.
File names are exactly index.html and style.css.
CSS link is exactly <link rel="stylesheet" href="style.css">.
No full names, emails, phone numbers, addresses, student photos, or school schedule details.
Links are appropriate and open to public pages.
Partner can explain what the page is about in one sentence.

Submission process:

Student tells teacher their approved public slug.
Student uploads or copies files to Unit 4 Drop Box/<slug>/.
Teacher opens each page locally, reviews it, then copies the folder into eca-shipit-site/students/<slug>/.
Teacher updates the class landing page with a link.
Teacher runs one deploy from the root folder.

While you deploy, students write their URL on an index card:

https://<class-site-hostname>/students/<slug>/

Keep deployment boring

Do not narrate every CLI detail. Narrate the concept and the milestone:

"I am copying our class folder to the web app. The important thing is not the command; the important thing is that the server now has the same files we tested."

Project the class landing page. Click one student link after confirming it is reviewed.

"This is not a preview. This is the public internet. Someone outside this building could load this same address. That is why we were careful — and that is why this is exciting."

Let the room react. Then have students open their own URL if deployment completed.

0:42–0:45 — Teaser + prompt¶

"Next Friday we start the capstone. Now that you know what shipping feels like, you get to choose what you want to build for the final showcase."

Tiered challenges¶

🟢 Starter — grades 5–6¶

Use this final-safe starter if your page is broken. Replace only the words in brackets:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>[Project Name]</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <main>
      <h1>[Project Name]</h1>
      <p>This page is about [safe topic].</p>
      <ul>
        <li>[Fact one]</li>
        <li>[Fact two]</li>
        <li>[Fact three]</li>
      </ul>
    </main>
  </body>
</html>

body {
  font-family: Arial, sans-serif;
  margin: 40px;
  background: #f5f7fb;
}

main {
  background: white;
  padding: 16px;
  border-radius: 12px;
}

🟡 Builder — grades 7–8¶

Add a footer that is safe and generic:

<footer>
  <p>Built in ECA Coding, 2027.</p>
</footer>

Style it:

footer {
  margin-top: 24px;
  color: #555555;
  font-size: 0.9rem;
}

🔴 Extender — grades 9–10¶

Help with launch operations: verify relative links. If a link starts with C:\, file:///, or a private Google Drive path, it will not work for the public. Replace it with a relative path or remove it.

"What changed when your page moved from the editor to a public URL? What responsibilities came with that change?"

🤔 Think About This¶

If you could build one small thing for someone else to use or enjoy, what would it be? A page, a game, a quiz, a tool, a guide — just notice ideas.

🔌 Unplugged Plan B — if the internet is down¶

This is the week where Plan B matters most. No student should leave thinking the launch failed because of them.

Time	Activity
0:00–0:04	Same anchor: today is deployment day, even if the network makes us delay the final click
0:04–0:12	Teach the URL/server/files diagram on the board
0:12–0:25	Students complete a paper "publish checklist" and privacy review with partners
0:25–0:35	Students design their public URL card: `https://<class-site>/students/<slug>/` and write their approved slug
0:35–0:42	Students rehearse a 20-second explanation of their page for launch day
0:42–0:45	Tell them the truth: teacher will deploy after class when internet returns and reveal URLs next week

Fallback promise to say out loud:

"The internet being down does not erase your work. Your files are ready. If Azure or the school network fights us today, I will deploy after class and next Friday we will open the real URLs together."

If Azure deployment fails but internet works, use local preview plus celebration today, then deploy after class. Email or post the URLs only after reviewing every page again.

Common problems & fixes¶

Problem	Fix
Student submits one combined file but no `style.css`	Publish it if it works; separation is ideal, not worth ruining launch day. Rename consistently later.
CSS works in editor but not after deploy	Check file name case and path. `style.css` is not `Style.css`.
Images disappear after deploy	Use local image files in the same folder or remove the image. Private editor/Drive image URLs often fail publicly.
Student uses full name in title or URL	Change before deploy. Public slug and page content must be privacy-safe.
Azure CLI login expired	Use the already-tested fallback: collect files, preview locally, deploy after class. Do not make students watch authentication.
SWA CLI deploy fails	Do not debug for 20 minutes in front of students. Save the error, celebrate completed files, deploy after class, reveal next week.
A student is embarrassed by their simple page	Say: "Simple and live beats fancy and imaginary." Then click it proudly.

Vocabulary¶

Deploy — copy a project to a server so other people can reach it
Server — a computer service that sends files to browsers when requested
URL — the address used to find a resource on the web
Domain — the human-readable host name part of a web address
HTTPS — encrypted web communication between browser and server

Reflection — fill in after class¶

Did every student have a reviewed folder ready to publish?
Which pages need post-class fixes before sharing broadly?
Did the Azure workflow work under classroom pressure?
Which student reaction captured the emotional payoff?

Next week: Week 30 — Capstone kickoff — pitch your project