Stop playing the role of the client. Itโs time to switch sides. In this lesson, we break out of the browser and step into the backend. Youโre going to learn how to stand up a Node.js server using Express, open a network port, and actively listen for incoming requests.
1The Engine and The Framework
Up until now, you've used tools like fetch() or Postman to request data from external APIs. You were the client. Now, you are building the server that receives those requests.
A server is simply a computer connected to the internet that runs 24/7, waiting for incoming network traffic. To build ours, we use Node.js. Node.js is a runtime environment written in C++ that extracts the V8 JavaScript engine from Google Chrome, allowing JavaScript to run directly on a computer's operating system. This is what gives JavaScript the power to access the file system and open network ports.
While you can build a server using raw Node.js, doing so requires writing hundreds of lines of complex networking code. This is why we use Express.js. Express is a minimalist, unopinionated web framework built on top of Node. It abstracts away the low-level HTTP protocols, allowing you to initialize a robust server in just three lines of code.
async function execute() {
// See concept above
}
2Opening the Port
To create an Express server, you import the library, initialize an app object, and tell that app to listen on a specific port.
const express = require('express');
const app = express();
app.listen(3000, () => {
console.log("Server running on port 3000");
});A single server computer can run multiple applications simultaneously. It differentiates traffic using Portsโlogical endpoints numbered from 0 to 65535. Standard, unencrypted web traffic always goes to port 80, while secure HTTPS traffic goes to port 443. When developing locally, we typically configure our Express app to listen on port 3000 or 8080.
The app.listen() command is crucial. It hooks into the operating system and initializes an infinite loop that keeps the Node.js process alive, actively listening for incoming HTTP requests on that specific door.
async function execute() {
// See concept above
}
3Routing: The API Map
Once the server is listening, it needs instructions on what to do when a request arrives. This is known as Routing.
You define a route by mapping an HTTP Method (like GET, POST, DELETE) to a specific URL path (like /api/users). When a client's request matches that exact combination of method and path, Express triggers a Callback Function that you provide.
app.get('/welcome', (req, res) => {
// Route matched! Execute this logic.
});This callback function acts as the controller. It is where you write the business logic to query the database, validate input, and decide what data to return.
async function execute() {
// See concept above
}
4The Request/Response Cycle
Every Express route callback function is automatically injected with two critical objects: req (the Request) and res (the Response).
The `req` object contains everything the client sent you. If the client sent a JSON payload, you find it in req.body. If they sent an authorization token, it's in req.headers. If they included dynamic URL variables, they are in req.params.
The `res` object provides the tools you need to close the cycle and send data back. You use methods like res.status(200) to set the HTTP status code, and res.json() to format and transmit your data payload.
app.get('/profile', (req, res) => {
const token = req.headers.authorization;
// ... verify token ...
res.status(200).json({ user: "Alice" });
});Critical Rule: You must always close the request/response cycle. If you execute your database logic but forget to call res.json() or res.send(), the client's browser will spin indefinitely, waiting for a response that will never arrive, until it eventually times out.
async function execute() {
// See concept above
}
5Step-by-Step Breakdown
Entering the Backend. Until now, you have acted as the Client, using fetch() or Postman to request data. Now, we switch roles. You are going to build the Server that receives those requests. The server is simply a computer running 24/7, 'listening' for incoming network traffic. To build our server, we will use Node.js (which allows us to run JavaScript outside the browser) and Express.js, the most popular web framework for Node.
Initializing Express. Building a server from scratch using raw Node.js is tedious. Express is a minimalist framework that abstracts away the complex network protocols. To create a server, you simply import the express library, call it to create an app object, and tell that app to listen on a specific 'Port' (like port 3000). A port is like a specific door on the server computer where your API will wait for requests.
In the context of building a backend server, what is the purpose of the app.listen(3000) command in Express?
- โIt tells the server to actively start running and 'listen' for incoming network traffic on a specific port (door) on the machine.
- โIt opens the user interface in the browser.
Routing: The API Map. Once the server is listening, it needs to know what to do when a request arrives. This is called 'Routing'. You define routes by matching an HTTP Method (like GET) to a specific URL path (like /api/users). When a request matches that exact combination, Express executes a 'Callback Function' that you provide. This function acts as the controller, executing database queries and deciding what data to send back.
The Request and Response Objects. Every Express route callback function automatically receives two critical arguments from the framework: req (Request) and res (Response). The req object contains all the incoming data from the client (Headers, JSON Body, URL Parameters). The res object is what you use to send data back. You use methods like res.json() to format the return data as JSON, and res.status() to set the HTTP status code.
Inside an Express route callback, which object provides you with the methods needed to send a JSON payload and a 200 HTTP status code back to the client?
- โThe
req(Request) object. - โThe
res(Response) object (e.g.,res.status(200).json(...)).
The Missing Piece. You have successfully initialized a server and created a basic GET route. However, our route only returned hardcoded data. Real APIs must read and write dynamic data (like creating new users or updating passwords). In the next module, we will explore advanced routing to handle dynamic URL parameters and POST request bodies.
Level Up ๐
Advanced cheat sheets, SEO tricks, and interview prep for this topic.
Browser Support
Fully supported.
Fully supported.
Fully supported.
Fully supported.
Accessibility (A11y)
1Semantic Usage
Using the proper structure for Entering the Backend ensures that screen readers can correctly interpret the content hierarchy and purpose.
<!-- Apply semantic elements appropriately -->SEO Implications
- 1
Contextual Relevance
Proper implementation of Entering the Backend provides search engine crawlers with better context, improving the indexing accuracy of your page.
Best Practices
Clean Code
Always validate your structure when using Entering the Backend to prevent layout shifts and DOM inconsistencies.
Separation of Concerns
Keep styling and behavior separate from the structural markup of Entering the Backend.
Frequent Bugs
Unexpected layout shifts or styling failures.
Ensure all implementations related to Entering the Backend are properly structured according to strict specifications.
Real-World Examples
Production Usage
Here is how Entering the Backend is typically implemented in a professional, robust application.
<!-- Best practice implementation of Entering the Backend -->
<div class="production-ready">
<!-- Content -->
</div>