diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json index 63ec0bce1b9..ecdb7a6b9f2 100644 --- a/client/i18n/locales/english/intro.json +++ b/client/i18n/locales/english/intro.json @@ -7290,6 +7290,12 @@ "In these lessons, you will learn about routing in ExpressJS, which is how you define the different endpoints of your web application and how they respond to client requests." ] }, + "review-introduction-to-express": { + "title": "Introduction to Express Review", + "intro": [ + "Review web services, REST, microservices, and Express.js routing before you take the quiz." + ] + }, "quiz-introduction-to-express": { "title": "Introduction to Express Quiz", "intro": [ diff --git a/curriculum/challenges/english/blocks/review-introduction-to-express/6a0354d43d4c00eca38561f7.md b/curriculum/challenges/english/blocks/review-introduction-to-express/6a0354d43d4c00eca38561f7.md new file mode 100644 index 00000000000..174f0eaa177 --- /dev/null +++ b/curriculum/challenges/english/blocks/review-introduction-to-express/6a0354d43d4c00eca38561f7.md @@ -0,0 +1,162 @@ +--- +id: 6a0354d43d4c00eca38561f7 +title: Introduction to Express Review +challengeType: 31 +dashedName: review-introduction-to-express +--- + +# --description-- + +## Web Services and APIs + +- **API (Application Programming Interface)**: A general way for software to communicate with other software. +- **Web service**: A specific type of API that uses web technologies like HTTP to exchange data over a network. Every web service is an API, but not every API is a web service. +- **Key characteristics of a web service**: runs on a server, enables machine-to-machine communication, is language-agnostic, is platform-agnostic, and uses standard web protocols (HTTP/HTTPS, FTP, SMTP). +- **REST (Representational State Transfer)**: The most widely used type of web service today. Exposes resources identified by URL paths like `/users` or `/users/20`. Responses are usually in JSON, but can also be XML or plain text. +- **SOAP (Simple Object Access Protocol)**: Uses only XML. Common in enterprise systems that need stricter standards and security. +- **XML-RPC**: Uses XML to encode requests and responses. Lightweight but less flexible than REST. +- **`Accept` header**: Used by a client to tell the server which response format it wants, for example `Accept: application/json`. + +## The REST Architecture + +- **Statelessness**: Every request must include all the information the server needs to process it. The server does not remember previous requests. +- **Resource**: A piece of data that can be accessed or modified, identified by a URL (for example, `/products/1`). +- **HTTP methods in REST**: + - `GET` — retrieve a resource + - `POST` — create a new resource + - `PUT` / `PATCH` — update an existing resource + - `DELETE` — remove a resource + +## HTTP Status Codes + +After processing a request, the server responds with a **status code** that indicates the result: + +- `200` **(OK)**: The request was successful +- `201` **(Created)**: A new resource was created +- `400` **(Bad Request)**: The client sent invalid data +- `404` **(Not Found)**: The requested resource does not exist +- `500` **(Internal Server Error)**: An error occurred on the server + +### How a REST request works + +1. The client sends a request with a method, URL, optional headers, and optional body. +2. The server validates the request and identifies the resource. +3. The server performs the action (get, create, update, or delete). +4. The server builds a response with a status code and optional body (usually JSON). +5. The server sends the response — no client state is stored. +6. The client checks the status code and processes the returned data. + +## Monoliths vs. Microservices + +- **Monolith**: A single, large codebase where the UI, database, and API all live together. Works well for small apps but gets harder to maintain and scale as it grows. +- **Microservices**: An architecture where a large app is broken into smaller, independent services. Each service handles one business capability (for example, products, orders, payments) and can have its own codebase, database, and team. +- **How microservices communicate**: Through APIs or message-based systems. +- **Advantages of microservices**: Faster development, better fault isolation, and the freedom to use different languages or frameworks per service. +- **Challenges of microservices**: More complex debugging, harder infrastructure management, and more network overhead between services. + +## What Is Express.js? + +- **Express**: A minimal and flexible web framework built on top of Node.js that makes it easier to build web servers and APIs. +- **Install Express**: `npm install express` +- **What you can build with Express**: web apps, RESTful APIs, SPA backends, middleware-heavy services, and anything server-side with HTTP. +- **Middleware**: Code that runs between receiving a request and sending a response. Used for error handling, input validation, modifying request or response data, and more. Multiple middleware functions can be chained together. +- **Plugins**: External npm modules that extend Express, usually implemented as middleware. + +## Creating a Basic Express App + +```javascript +const express = require("express"); +const app = express(); +const port = 3000; + +app.get("/", (req, res) => { + res.send("Hello World!"); +}); + +app.listen(port, () => { + console.log(`Example app listening on port ${port}`); +}); +``` + +- `require("express")` — loads the Express library. +- `express()` — factory function that creates and returns a new Express application instance. +- `app` — the main server object with access to methods like `.get()`, `.post()`, and `.listen()`. +- `port` — the network endpoint the app listens on. Port `3000` is common for local development. +- `app.listen(port, callback)` — starts the server and begins listening for incoming HTTP requests. + +## Routing in Express + +- **Route**: A rule that tells the app how to respond when a client requests a specific URL with a specific HTTP method. +- **Route methods**: `app.get()`, `app.post()`, `app.put()`, `app.delete()` — each handles requests with the matching HTTP method. +- **Static route path**: A fixed URL like `/home` or `/menu/drinks`. +- **Dynamic route path (route parameter)**: A placeholder in the URL that captures a value, prefixed with `:`, for example `/post/:postId`. +- **`req.params`**: An object containing the dynamic values captured from the URL. For example, a request to `/post/42` gives `req.params.postId === "42"`. + +### Route Handlers + +- A **route handler** is the callback function `(req, res) => { ... }` that runs when a request matches a route. +- `req` — contains information about the incoming request (params, query strings, headers, body). +- `res` — used to send a response back to the client. + +## Response Methods + +| Method | What it does | +| --- | --- | +| `res.send()` | Sends a response — plain text, HTML, JSON, or binary data. | +| `res.json()` | Sends a JSON response; automatically converts a JavaScript object. | +| `res.status(code)` | Sets the HTTP status code; usually chained with `res.send()` or `res.json()`. | +| `res.redirect(url)` | Redirects the client to a different URL. | +| `res.render(view, data)` | Renders a template engine view and sends the resulting HTML. | + +## Chainable Route Handlers with `app.route()` + +- `app.route(path)` groups multiple HTTP method handlers for the same path to avoid repeating it. + +```javascript +app + .route("/user") + .get((req, res) => { res.send("Fetching user data"); }) + .post((req, res) => { res.send("Creating a user"); }) + .put((req, res) => { res.send("Updating the user"); }) + .delete((req, res) => { res.send("Deleting the user"); }); +``` + +## Modular Routing with `express.Router()` + +- `express.Router()` creates a router object — like a mini Express app — that you can define routes on and then mount in the main app. +- Mount a router with `app.use(path, router)`. Routes inside the router are relative to the mount path. +- **Benefits**: separates concerns, keeps the main file clean, and makes routes reusable and easier to scale. + +```javascript +// userRoutes.js +const express = require("express"); +const router = express.Router(); +router.get("/", (req, res) => { res.send("List of users"); }); +router.get("/:id", (req, res) => { res.send(`User ${req.params.id}`); }); +module.exports = router; + +// app.js +app.use("/users", userRoutes); // mounts the router at /users +``` + +## Serving Static Files + +- **Static files**: Assets like images, CSS, and client-side JavaScript that are served directly without server-side processing. +- `express.static(directory)` — built-in middleware that serves files from a specified folder. +- If a requested file is not found, Express automatically responds with a 404. +- No route definitions are needed for individual static files. + +```javascript +app.use(express.static(path.join(__dirname, "public"))); +``` + +- You can serve from multiple directories by calling `app.use()` multiple times, optionally with a mount path: + +```javascript +app.use(express.static(path.join(__dirname, "public"))); +app.use("/images", express.static(path.join(__dirname, "images"))); +``` + +# --assignment-- + +Review the Introduction to Express topics and concepts. diff --git a/curriculum/structure/blocks/review-introduction-to-express.json b/curriculum/structure/blocks/review-introduction-to-express.json new file mode 100644 index 00000000000..3f153c2276a --- /dev/null +++ b/curriculum/structure/blocks/review-introduction-to-express.json @@ -0,0 +1,13 @@ +{ + "isUpcomingChange": true, + "dashedName": "review-introduction-to-express", + "helpCategory": "Backend Development", + "blockLayout": "link", + "challengeOrder": [ + { + "id": "6a0354d43d4c00eca38561f7", + "title": "Introduction to Express Review" + } + ], + "blockLabel": "review" +} diff --git a/curriculum/structure/superblocks/back-end-development-and-apis-v9.json b/curriculum/structure/superblocks/back-end-development-and-apis-v9.json index 2c8c7d4a933..3edd5ceccc2 100644 --- a/curriculum/structure/superblocks/back-end-development-and-apis-v9.json +++ b/curriculum/structure/superblocks/back-end-development-and-apis-v9.json @@ -65,6 +65,7 @@ "lecture-understanding-routing-in-express-js", "workshop-express-by-building-a-random-joke-app", "lab-personal-profile-app", + "review-introduction-to-express", "quiz-introduction-to-express" ] },