Creating documents in Express - Visual Walkthrough

Concept Flow - Creating documents

Start Express App

↓

Define Route Handler

↓

Receive Client Request

↓

Create Document Content

↓

Send Document as Response

↓

Client Receives Document

This flow shows how an Express app handles a request to create and send a document back to the client.

Execution Sample

Express

const express = require('express');
const app = express();

app.get('/doc', (req, res) => {
  res.type('text/plain');
  res.send('Hello, this is your document!');
});

app.listen(3000);

This code creates a simple Express server that sends a plain text document when the '/doc' route is requested.

Execution Table

Step	Action	Input/Request	Response Content	Notes
1	Start Express app	N/A	N/A	Server listens on port 3000
2	Client sends GET request to /doc	GET /doc	N/A	Request received by Express
3	Route handler runs	GET /doc	Preparing document	Handler function executes
4	Set response type	N/A	Content-Type: text/plain	Response header set
5	Send document content	N/A	Hello, this is your document!	Response body sent
6	Client receives response	N/A	Hello, this is your document!	Document displayed to client
7	End	N/A	N/A	Request cycle complete

💡 Request handled and response sent, Express waits for next request

Variable Tracker

Variable	Start	After Request	After Response	Final
req.url	N/A	/doc	/doc	/doc
res.headersSent	false	false	true	true
res.statusCode	200	200	200	200
responseContent	N/A	N/A	Hello, this is your document!	Hello, this is your document!

Key Moments - 3 Insights

Why do we set the response type before sending the document?

Setting the response type (Content-Type) tells the client how to handle the document. In the execution_table step 4, the header is set before sending the content in step 5.

What happens if the route '/doc' is not defined?

Express will not find a matching route and will send a 404 Not Found response. This is why defining the route handler in step 3 is essential.

Can we send other document types besides plain text?

Yes, by changing the response type and content, for example 'application/json' for JSON or 'application/pdf' for PDFs. The flow remains the same.

Visual Quiz - 3 Questions

Look at the execution_table, what is the response content sent at step 5?

A "GET /doc"

B "Hello, this is your document!"

C "Content-Type: text/plain"

D "N/A"

💡 Hint

Check the 'Response Content' column at step 5 in the execution_table

At which step does Express set the Content-Type header?

A Step 5

B Step 3

C Step 4

D Step 2

💡 Hint

Look at the 'Action' column in the execution_table for setting response headers

If the client requests '/doc' but the route handler is missing, what will happen?

A Express sends a 404 Not Found response

B Express sends the document anyway

C Express crashes

D Express redirects to '/'

💡 Hint

Refer to key_moments about route handling and missing routes

Concept Snapshot

Express creates documents by defining a route handler.
Inside the handler, set the response type (e.g., text/plain).
Send the document content with res.send().
Client receives and displays the document.
Missing routes cause 404 errors.
This flow handles one request at a time.

Full Transcript

This visual execution trace shows how an Express app creates and sends a document. The app starts and listens on port 3000. When a client requests the '/doc' route, Express runs the route handler. The handler sets the response type to 'text/plain' and sends a simple text document. The client receives and displays this document. Variables like request URL and response headers change during this process. Key points include setting the content type before sending data and handling missing routes with 404 responses. The quiz questions help reinforce understanding of these steps.

Practice

1. Which Express method is used to handle creating new documents via HTTP POST requests?

easy

A. app.post()

B. app.get()

C. app.put()

D. app.delete()

Solution

1. Step 1: Understand HTTP methods in Express

   Express uses different methods like get, post, put, and delete to handle HTTP requests.

2. Step 2: Identify method for creating new data

   The post method is used to create new documents or data entries.

3. Final Answer:

   app.post() -> Option A

4. Quick Check:

   Creating documents = app.post() [OK]

Hint: Use app.post() for creating new data entries [OK]

Common Mistakes:

• Using app.get() instead of app.post()
• Confusing app.put() with app.post()
• Using app.delete() for creation

2. Which code snippet correctly enables JSON parsing middleware in Express to access req.body?

easy

A. app.use(express.urlencoded());

B. app.use(express.json());

C. app.use(bodyParser.text());

D. app.use(express.static('public'));

Solution

1. Step 1: Identify middleware for JSON parsing

   Express provides express.json() middleware to parse JSON request bodies.

2. Step 2: Match correct usage

   The correct way is app.use(express.json()); to enable JSON parsing.

3. Final Answer:

   app.use(express.json()); -> Option B

4. Quick Check:

   JSON parsing middleware = express.json() [OK]

Hint: Use app.use(express.json()) to read JSON body [OK]

Common Mistakes:

• Using express.urlencoded() for JSON data
• Using bodyParser.text() instead of JSON parser
• Forgetting to enable any parser middleware

3. What will be the HTTP status code sent when the following Express route successfully creates a document?

app.post('/items', (req, res) => {
  // Assume document creation here
  res.status(201).send('Created');
});

medium

A. 200

B. 500

C. 400

D. 201

Solution

1. Step 1: Understand HTTP status codes for creation

   Status code 201 means "Created" and is used when a new resource is successfully created.

2. Step 2: Check the code's status method

   The code uses res.status(201), so it sends status 201.

3. Final Answer:

   201 -> Option D

4. Quick Check:

   Creation success status = 201 [OK]

Hint: Use status 201 for successful creation responses [OK]

Common Mistakes:

• Assuming 200 means creation success
• Using 400 or 500 for successful creation
• Not setting status code explicitly

4. Identify the error in this Express route for creating a document:

app.post('/users', (req, res) => {
  const user = req.body;
  saveUser(user);
  res.send('User created');
});

medium

A. saveUser function is not asynchronous

B. Using res.send instead of res.json

C. Missing JSON parsing middleware to read req.body

D. Route should use app.get instead of app.post

Solution

1. Step 1: Check access to req.body

   Without JSON parsing middleware, req.body will be undefined.

2. Step 2: Identify missing middleware

   The code does not show app.use(express.json()), so req.body won't work.

3. Final Answer:

   Missing JSON parsing middleware to read req.body -> Option C

4. Quick Check:

   Missing express.json() causes req.body undefined [OK]

Hint: Always enable express.json() before accessing req.body [OK]

Common Mistakes:

• Thinking res.send must be res.json
• Using app.get for creation routes
• Assuming saveUser must be async here

5. You want to create an Express route that accepts JSON data to create a new product and respond with the created product including an ID. Which code snippet correctly implements this?

hard

A. app.post('/products', (req, res) => {
const product = req.body;
product.id = Date.now();
res.status(201).json(product);
});

B. app.get('/products', (req, res) => {
const product = req.body;
product.id = Date.now();
res.json(product);
});

C. app.post('/products', (req, res) => {
const product = req.query;
product.id = Date.now();
res.status(200).send(product);
});

D. app.post('/products', (req, res) => {
const product = req.body;
res.send('Product created');
});

Solution

1. Step 1: Use correct HTTP method and access JSON body

   The route uses app.post and accesses req.body which is correct for creating a product.

2. Step 2: Add an ID and respond with status 201 and JSON

   Assigning product.id = Date.now() simulates creating an ID. Responding with res.status(201).json(product) sends the created product with proper status.

3. Final Answer:

   Option A code snippet -> Option A

4. Quick Check:

   POST + req.body + status 201 + json response = app.post('/products', (req, res) => { const product = req.body; product.id = Date.now(); res.status(201).json(product); }); [OK]

Hint: Use app.post with req.body and res.status(201).json() [OK]

Common Mistakes:

• Using app.get instead of app.post
• Reading data from req.query instead of req.body
• Not sending status 201 on creation