Static Files and Templates

import express from 'express';
import path from 'node:path';
import { mkdir, writeFile } from 'node:fs/promises';

const pub = path.join(import.meta.dirname, 'public-demo');
await mkdir(path.join(pub, 'css'), { recursive: true });
await writeFile(path.join(pub, 'index.html'), '<h1>Shop</h1>');
await writeFile(path.join(pub, 'css', 'site.css'), 'body { margin: 0; }');

const app = express();
app.use(express.static(pub));
app.use('/assets', express.static(path.join(pub, 'css'), { maxAge: '1y', immutable: true }));

const server = app.listen(0, async () => {
  const base = `http://localhost:${server.address().port}`;
  for (const p of ['/', '/css/site.css', '/assets/site.css', '/missing.png']) {
    const r = await fetch(base + p);
    console.log(p, r.status, (r.headers.get('content-type') ?? '-').split(';')[0], r.headers.get('cache-control') ?? '');
  }
  server.close();
});

function escapeHtml(text) {
  return String(text).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]);
}

function renderProduct({ name, price, reviews }) {
  const items = reviews.map((r) => `<li>${escapeHtml(r.author)}: ${escapeHtml(r.text)}</li>`).join('');
  return `<h1>${escapeHtml(name)}</h1><p>£${price.toFixed(2)}</p><ul>${items}</ul>`;
}

const html = renderProduct({
  name: 'Desk lamp',
  price: 24,
  reviews: [
    { author: 'Ada', text: 'Lovely & bright' },
    { author: 'Mallory', text: '<script>steal(document.cookie)</script>' },
  ],
});
console.log(html);

import express from 'express';

const messages = [];
const app = express();
app.use(express.urlencoded({ extended: false }));

app.get('/contact', (req, res) => {
  res.send(`<form method="post"><input name="email"><textarea name="message"></textarea><button>Send</button></form>`);
});

app.post('/contact', (req, res) => {
  const { email = '', message = '' } = req.body;
  if (!email.includes('@') || message.trim().length < 5) {
    return res.status(400).send('Please enter an email and a message of at least 5 characters.');
  }
  messages.push({ email, message: message.trim() });
  res.redirect(303, '/contact/thanks');
});

app.get('/contact/thanks', (req, res) => res.send('Thanks, we will reply soon.'));

const server = app.listen(0, async () => {
  const url = `http://localhost:${server.address().port}/contact`;
  const send = (fields) => fetch(url, { method: 'POST', body: new URLSearchParams(fields), redirect: 'manual' });
  let r = await send({ email: 'ada@example.com', message: 'Is the lamp dimmable?' });
  console.log(r.status, r.headers.get('location'));
  r = await send({ email: 'nope', message: 'Hi' });
  console.log(r.status, await r.text());
  console.log(messages.length);
  server.close();
});