codex-lv4-may-2025

Level Navigation: 1

Level 6: Serve HTML First

Now that you’ve tested with plain text, let’s serve HTML from your root route. Update your route to use res.send() with an HTML snippet so you can see the browser render formatted content. For example, try sending <h1>Hello Express!</h1><p>Your server is working!</p> to see HTML rendering in action.

Show Me: serving HTML with res.send()


// src/index.js
app.get('/', (req, res) => {
  res.send('<h1>Hello Express!</h1><p>Your server is working!</p>');
});

Digging Deeper: Template Literals and Backticks

When serving HTML, you might want to write multi-line HTML for better readability. JavaScript template literals (strings wrapped in backticks `) allow you to write multi-line strings and include variables:

Backticks vs. Quotes:

Regular strings (single ' or double " quotes): Must be on a single line
Template literals (backticks `): Can span multiple lines and support interpolation with ${variable}

Example:

// Single-line string (regular quotes)
res.send('<h1>Hello Express!</h1><p>Your server is working!</p>');

// Multi-line string (backticks)
res.send(`
  <h1>Hello Express!</h1>
  <p>Your server is working!</p>
  <ul>
    <li>Feature 1</li>
    <li>Feature 2</li>
  </ul>
`);

// Template literal with variable interpolation
const name = 'Express';
res.send(`<h1>Hello ${name}!</h1>`);

When to use backticks:

✅ Writing multi-line HTML strings
✅ Including variables in strings (interpolation)
✅ Building dynamic HTML content
❌ Not needed for simple single-line strings (regular quotes work fine)

Note: When using backticks for multi-line HTML, whitespace (spaces, tabs, newlines) is preserved. This is usually fine for HTML since browsers collapse extra whitespace, but be aware that indentation in your code will appear in the output.