From a File on Your Laptop to a Page on the Internet

Architecture is the set of decisions that are expensive to change

• What the major parts are, what each does, how they talk
• Cost: a few dollars a month or tens of thousands
• Risk: what happens when a component fails; how a breach could occur
• Speed: how fast features ship without breaking what works

Two things people get wrong about servers

• A server is an ordinary computer: processor, memory, disk. Usually no screen
• "Server" also names a program: a web server program listens for requests and hands back pages
• The client for a website is a browser: Chrome, Safari, Firefox, Edge
• Analogy: the restaurant. You order from the menu; the kitchen cooks; you never enter the kitchen

A web page is a plain text file

• HTML: what is on the page (headings, paragraphs, images, links), marked with tags
• CSS: what it looks like (colors, fonts, layout, phone versus desktop)
• JavaScript: what it does (react to clicks, validate forms, load more posts)
• JavaScript is unrelated to Java despite the name

HTML by example

<h1>Rosenthal's Bakery</h1>
<p>Fresh bread every morning since 1998.</p>
<img src="storefront.jpg" alt="Our shop">
<a href="menu.html">See the menu</a>

• Read it aloud and it explains itself: heading, paragraph, image, link

The zero-infrastructure starting point

• A static website is fixed files sent to every visitor exactly as stored
• Double-click index.html: the browser reads it straight off your disk. Address starts with file:///
• No server, no internet, no company involved
• Limitation: only you can see it. Sharing needs an always-on server with an address

Finding the server: DNS

• Every machine on the internet has a numeric IP address, such as 142.250.72.14
• DNS is the distributed phone book: domain name in, IP address out
• A business rents its domain from a registrar; pointing it at a host means editing a DNS record
• "DNS changes take up to 48 hours": thousands of copies of the phone book refresh on a schedule

The conversation: HTTP

GET /menu.html HTTP/1.1
Host: www.rosenthalsbakery.com
User-Agent: Chrome/128.0

HTTP/1.1 200 OK
Content-Type: text/html

<!DOCTYPE html> ...

• A request names a method and a path plus headers; a response carries a status code and the content
• 200 OK, 301 moved, 404 not found, 500 server error, 503 overloaded

HTTPS and hosting

• Plain HTTP is readable by anyone on the same Wi-Fi. HTTPS wraps it in encryption; the padlock
• The server proves its identity with a free certificate. No business reason to skip HTTPS
• Hosting: rent space on someone's always-on server. Static hosting is free or nearly so
• Serving static files is the easiest job a computer can do: fast, hard to hack, hard to overload

What a static site cannot do

• Front end: runs on the user's device. Back end: runs on the server, out of sight
• A static site is front end only, so it cannot: remember anything, personalise, keep a secret, or do work (email, charge a card)
• A dynamic website runs a program per request and can do all four

Python runs on the server, not in the browser