Creating a basic Express server - Visual Walkthrough

Concept Flow - Creating a basic Express server

Start

↓

Import express

↓

Create app instance

↓

Define route handler

↓

Start server listening

↓

Server ready to accept requests

↓

Handle incoming requests

↓

Send response

↓

End

This flow shows how Express server code runs from setup to handling requests.

Execution Sample

Express

import express from 'express';
const app = express();
app.get('/', (req, res) => {
  res.send('Hello World!');
});
app.listen(3000);

This code creates a simple Express server that responds with 'Hello World!' on the home page.

Execution Table

Step	Action	Evaluation	Result
1	Import express module	express imported	express object ready
2	Create app instance	app = express()	app object created
3	Define GET route '/'	app.get('/', handler)	Route '/' registered
4	Start server listening on port 3000	app.listen(3000)	Server starts listening
5	Incoming GET request to '/'	Request received	Route handler called
6	Send response 'Hello World!'	res.send('Hello World!')	Client receives 'Hello World!'
7	No more requests	Server waits	Idle, ready for next request

💡 Server runs continuously until stopped; no exit unless manually terminated.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 6
express	undefined	express module object	express module object	express module object	express module object
app	undefined	Express app instance	Express app with route registered	Express app listening	Express app listening

Key Moments - 3 Insights

Why do we call express() to create 'app'?

Calling express() creates the server app object that holds routes and settings, as shown in step 2 of the execution_table.

What happens when app.listen(3000) runs?

It starts the server listening on port 3000, ready to accept requests, as seen in step 4 of the execution_table.

How does the server respond to a GET request at '/'?

The route handler registered in step 3 runs, sending 'Hello World!' back, shown in steps 5 and 6.

Visual Quiz - 3 Questions

Look at the execution_table, what is the state of 'app' after step 3?

A Express app with route '/' registered

B Express module imported but no app created

C Server listening on port 3000

D Route handler called for a request

💡 Hint

Check the 'variable_tracker' and 'execution_table' rows for step 3.

At which step does the server start listening for requests?

A Step 5

B Step 2

C Step 4

D Step 6

💡 Hint

Look for 'app.listen(3000)' in the execution_table.

If we change the route path from '/' to '/home', which step changes?

A Step 4

B Step 3

C Step 5

D Step 6

💡 Hint

Route registration happens in step 3 according to the execution_table.

Concept Snapshot

import express from 'express';
const app = express();
app.get('/', (req, res) => res.send('Hello World!'));
app.listen(3000);

- Import express module
- Create app instance
- Define route handler
- Start server listening
- Server handles requests and sends responses

Full Transcript

This visual trace shows how to create a basic Express server. First, the express module is imported. Then, calling express() creates the app object. Next, a GET route '/' is defined with a handler that sends 'Hello World!'. The server starts listening on port 3000. When a GET request arrives at '/', the handler runs and sends the response. The server stays running, ready for more requests.

Practice

1. What is the main purpose of app.listen() in an Express server?

easy

A. To define a route for GET requests

B. To start the server and listen for incoming requests

C. To import the Express library

D. To send a response to the client

Solution

1. Step 1: Understand the role of app.listen()

   This function starts the Express server and makes it listen on a specified port for incoming requests.

2. Step 2: Compare with other functions

   Functions like app.get() define routes, but do not start the server. Importing Express or sending responses are done elsewhere.

3. Final Answer:

   To start the server and listen for incoming requests -> Option B

4. Quick Check:

   app.listen() starts server [OK]

Hint: Remember: listen means server waits for requests [OK]

Common Mistakes:

• Confusing route definition with server start
• Thinking app.listen() sends responses
• Mixing import statements with server functions

2. Which of the following is the correct way to import Express in a modern Node.js project?

easy

A. const express = require('express');

B. load express from 'express';

C. var express = import('express');

D. import express from 'express';

Solution

1. Step 1: Identify modern import syntax

   In modern Node.js with ES modules, the correct syntax is import express from 'express';.

2. Step 2: Check other options

   require() is CommonJS style, not modern ES modules. var express = import('express'); is invalid syntax. load is not a valid keyword.

3. Final Answer:

   import express from 'express'; -> Option D

4. Quick Check:

   Modern Node.js uses import [OK]

Hint: Use 'import' for modern Node.js, not 'require' [OK]

Common Mistakes:

• Using require() in ES module projects
• Trying to use 'load' keyword
• Incorrect use of dynamic import syntax

3. What will be the output when you visit http://localhost:3000/hello given this Express code?

import express from 'express';
const app = express();
app.get('/hello', (req, res) => {
  res.send('Hello World!');
});
app.listen(3000);

medium

A. Hello World!

B. Cannot GET /hello

C. 404 Not Found error

D. Server error

Solution

1. Step 1: Analyze the route definition

   The code defines a GET route at '/hello' that sends 'Hello World!' as a response.

2. Step 2: Understand server behavior on request

   When visiting /hello, the server matches the route and sends the defined response.

3. Final Answer:

   Hello World! -> Option A

4. Quick Check:

   Defined route sends 'Hello World!' [OK]

Hint: Check if route matches URL path exactly [OK]

Common Mistakes:

• Visiting a route not defined causes 404
• Confusing response text with error messages
• Forgetting to start server with listen()

4. Identify the error in this Express server code:

import express from 'express';
const app = express();
app.get('/', (req, res) => {
  res.send('Welcome!');
});
app.listen();

medium

A. Missing port number in app.listen()

B. Incorrect route path in app.get()

C. res.send() should be res.sendResponse()

D. Express not imported correctly

Solution

1. Step 1: Check app.listen() usage

   The app.listen() method requires a port number to start the server. Here, no port is given.

2. Step 2: Verify other parts

   The route path '/' is valid, res.send() is correct, and Express is imported properly.

3. Final Answer:

   Missing port number in app.listen() -> Option A

4. Quick Check:

   app.listen() needs port [OK]

Hint: Always specify a port in app.listen(port) [OK]

Common Mistakes:

• Omitting port number in app.listen()
• Using wrong method names for response
• Incorrect route paths syntax

5. You want to create an Express server that responds with JSON at /data and listens on port 8080. Which code snippet correctly does this?

hard

A. import express from 'express';
const app = express();
app.get('/data', (req, res) => {
res.send('Hello JSON');
});
app.listen(3000);

B. import express from 'express';
const app = express();
app.post('/data', (req, res) => {
res.send({ message: 'Hello JSON' });
});
app.listen(8080);

C. import express from 'express';
const app = express();
app.get('/data', (req, res) => {
res.json({ message: 'Hello JSON' });
});
app.listen(8080);

D. import express from 'express';
const app = express();
app.get('/data', (req, res) => {
res.json('Hello JSON');
});
app.listen(8080);

Solution

1. Step 1: Check route method and path

   The question asks for a GET route at '/data', so app.get('/data', ...) is correct.

2. Step 2: Verify response and port

   Response should be JSON, so res.json({ message: 'Hello JSON' }) is correct. The server must listen on port 8080.

3. Step 3: Eliminate alternatives with errors

   Alternatives fail due to using POST instead of GET, wrong port like 3000, res.send('string') instead of res.json(object), or res.json('string') instead of object.

4. Final Answer:

   The snippet with app.get('/data'), res.json({ message: 'Hello JSON' }), app.listen(8080) -> Option C

5. Quick Check:

   GET /data + res.json + port 8080 [OK]

Hint: Use app.get + res.json + correct port [OK]

Common Mistakes:

• Using POST instead of GET for route
• Sending string instead of JSON object
• Listening on wrong port number