mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
feat(curriculum): add working with express theory block (#66215)
Co-authored-by: Sem Bauke <sem@freecodecamp.org> Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -7070,6 +7070,12 @@
|
||||
"In these lessons, you will learn about REST APIs and web services, and how they allow different applications to communicate with each other over the internet."
|
||||
]
|
||||
},
|
||||
"lecture-working-with-express": {
|
||||
"title": "Working with Express",
|
||||
"intro": [
|
||||
"In these lessons, you will learn what Express.js is, why developers use it for building web servers and APIs, and how to set up a basic Express application with routes and request handling."
|
||||
]
|
||||
},
|
||||
"exam-back-end-development-and-apis-certification": {
|
||||
"title": "Back-End Development and APIs Certification Exam",
|
||||
"intro": [
|
||||
|
||||
+171
@@ -0,0 +1,171 @@
|
||||
---
|
||||
id: 69a6f5cc0512c4107ec1d446
|
||||
title: What is Express.js?
|
||||
challengeType: 19
|
||||
dashedName: what-is-express-js
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Express.js or Express for short, is a minimal and flexible web framework built **on top** of Node.js. It simplifies the process of building web servers and APIs.
|
||||
|
||||
Instead of writing tons of boilerplate code with Node’s native `http` module, Express lets you create robust web applications with just a few lines.
|
||||
|
||||
You can think of it as the fast, unopinionated layer that makes Node.js easier and more powerful.
|
||||
|
||||
Here are three key reasons developers love Express:
|
||||
|
||||
1. **Minimal and fast** – Express provides only the essentials, giving you full control while letting you add features as needed through middleware and plugins.
|
||||
|
||||
2. **Massive ecosystem** – It has a huge collection of middleware and plugins for logging, authentication, security, sessions, and more.
|
||||
|
||||
3. **Great for APIs** – Its simple routing and request-handling model makes Express especially well suited for building RESTful APIs.
|
||||
|
||||
With Express, you can create:
|
||||
|
||||
* Web apps
|
||||
|
||||
* RESTful APIs
|
||||
|
||||
* Single Page Application (SPA) backends
|
||||
|
||||
* Middleware-heavy services
|
||||
|
||||
* Anything server-side with HTTP
|
||||
|
||||
|
||||
## How To Install Express
|
||||
|
||||
First, make sure you have Node.js and npm installed. Here is how to check if node and npm are installed:
|
||||
|
||||
```bash
|
||||
node -v
|
||||
npm -v
|
||||
```
|
||||
|
||||
If you see a version number, that means it is installed. If not, you will need to install them. You can find installation instructions in an earlier lesson, or on the official Node.js website.
|
||||
|
||||
Next, in your terminal, write the following commands:
|
||||
|
||||
```bash
|
||||
mkdir my-app
|
||||
cd my-app
|
||||
npm init -y
|
||||
npm install express
|
||||
```
|
||||
|
||||
You'll learn more about middleware and plugins in future lessons, but in short, middleware is code that runs between receiving a request and sending a response. It's commonly used for error handling, input validation, modifying data in the request or response, and more. You can chain middleware together to build flexible and reusable logic to handle requests.
|
||||
|
||||
Plugins are typically external, third-party Node.js modules that extend the functionality of Express. You can install them separately with npm, and most are implemented as middleware that can be used in your app with just a little setup. Instead of writing common features from scratch, you can use a plugin to handle things like logging, authentication, or security best practices.
|
||||
|
||||
Express is a popular framework for server-side development in Node.js. It gives you the building blocks to quickly spin up a server, handle routes, manage middleware, and build APIs—all with clean and readable code.
|
||||
|
||||
# --questions--
|
||||
|
||||
## --text--
|
||||
|
||||
What is Express.js built on?
|
||||
|
||||
## --answers--
|
||||
|
||||
React
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about what JavaScript runtime Express runs on.
|
||||
|
||||
---
|
||||
|
||||
Python
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about what JavaScript runtime Express runs on.
|
||||
|
||||
---
|
||||
|
||||
Node.js
|
||||
|
||||
---
|
||||
|
||||
Angular
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about what JavaScript runtime Express runs on.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
|
||||
## --text--
|
||||
|
||||
Which command installs Express?
|
||||
|
||||
## --answers--
|
||||
|
||||
`npm start express`
|
||||
|
||||
### --feedback--
|
||||
|
||||
It's the standard npm install command.
|
||||
|
||||
---
|
||||
|
||||
`npm build express`
|
||||
|
||||
### --feedback--
|
||||
|
||||
It's the standard npm install command.
|
||||
|
||||
---
|
||||
|
||||
`npm install express`
|
||||
|
||||
---
|
||||
|
||||
`install express`
|
||||
|
||||
### --feedback--
|
||||
|
||||
It's the standard npm install command.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
|
||||
## --text--
|
||||
|
||||
Why is Express a popular framework?
|
||||
|
||||
## --answers--
|
||||
|
||||
To quickly spin up a server.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Express.js does a lot of heavy lifting.
|
||||
|
||||
---
|
||||
|
||||
To handle routes.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Express.js does a lot of heavy lifting.
|
||||
|
||||
---
|
||||
|
||||
To manage middleware.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Express.js does a lot of heavy lifting.
|
||||
|
||||
---
|
||||
|
||||
All of the above.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
4
|
||||
+215
@@ -0,0 +1,215 @@
|
||||
---
|
||||
id: 69a6f5e1264af50c407aecfe
|
||||
title: How Do You Create a Basic Express App?
|
||||
challengeType: 19
|
||||
dashedName: how-do-you-create-a-basic-express-app
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In the previous lesson, you created a project folder and installed Express:
|
||||
|
||||
```bash
|
||||
mkdir my-app
|
||||
cd my-app
|
||||
npm init -y
|
||||
npm install express
|
||||
```
|
||||
|
||||
As a reminder, these commands create a new project folder, `cd` into the project folder, initialize the project and create a basic `package.json` file, and install Express.
|
||||
|
||||
Next, open up a code editor, create a file named `index.js`, and write your first Express server:
|
||||
|
||||
```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}`);
|
||||
});
|
||||
```
|
||||
|
||||
You can run your code with the following command in the terminal:
|
||||
|
||||
```bash
|
||||
node index.js
|
||||
```
|
||||
|
||||
Open your browser to [http://localhost:3000](http://localhost:3000) and you'll see the message **"Hello World!"**
|
||||
|
||||
That’s how fast it is to get started with Express! Now let’s walk through the code step-by-step.
|
||||
|
||||
In the first line of code, you are loading the Express library and assigning that to a variable called `express`:
|
||||
|
||||
```javascript
|
||||
const express = require("express");
|
||||
```
|
||||
|
||||
The `express` variable is a factory function. When you call it, it creates and returns a new Express application instance:
|
||||
|
||||
```javascript
|
||||
const app = express();
|
||||
```
|
||||
|
||||
`app` now has access to all the methods provided by Express, such as `.get()`, `.post()`, `.listen()`, and so on. This is your main server object.
|
||||
|
||||
The next line defines the `port` variable. A port is a network endpoint that your application listens on, and `3000` is a commonly used port for local development:
|
||||
|
||||
```javascript
|
||||
const port = 3000;
|
||||
```
|
||||
|
||||
Now, let’s take a look at the next part here:
|
||||
|
||||
```javascript
|
||||
app.get("/", (req, res) => {
|
||||
res.send("Hello World!");
|
||||
});
|
||||
```
|
||||
|
||||
This block of code defines a route and tells the server how to respond to requests. `app.get()` registers a handler for HTTP GET requests. A GET request is a commonly used HTTP method for retrieving data.
|
||||
|
||||
The `"/"` argument inside `app.get()` represents the route path. In this case, it points to the root URL of the application.
|
||||
|
||||
The `(req, res) => { ... }` part is a callback function that runs when a request matches this route. The `req` object contains information about the incoming request, and the `res` object is used to send a response back to the client.
|
||||
|
||||
Finally, `res.send("Hello World!")` sends a response to the client. In this example, the response is the plain text `"Hello World!"`.
|
||||
|
||||
Now, let’s take a look at the last piece of code here:
|
||||
|
||||
```javascript
|
||||
app.listen(port, () => {
|
||||
console.log(`Example app listening on port ${port}`);
|
||||
});
|
||||
```
|
||||
|
||||
The `app.listen()` method starts the Express application and tells Node to listen for incoming HTTP requests on the specified port, in this case, `3000`.
|
||||
|
||||
Once the server starts, the callback function executes and the message `Example app listening on port 3000` is logged to the console, confirming that the Express app has started successfully and is ready to receive requests.
|
||||
|
||||
# --questions--
|
||||
|
||||
## --text--
|
||||
|
||||
What does this Express route do?
|
||||
|
||||
```javascript
|
||||
app.get("/", (req, res) => {
|
||||
res.send("Hello World!");
|
||||
});
|
||||
```
|
||||
|
||||
## --answers--
|
||||
|
||||
It deletes the homepage.
|
||||
|
||||
### --feedback--
|
||||
|
||||
What happens when a user visits `/`?
|
||||
|
||||
---
|
||||
|
||||
It creates a new database.
|
||||
|
||||
### --feedback--
|
||||
|
||||
What happens when a user visits `/`?
|
||||
|
||||
---
|
||||
|
||||
It sends a response to the root URL.
|
||||
|
||||
---
|
||||
|
||||
It starts the server.
|
||||
|
||||
### --feedback--
|
||||
|
||||
What happens when a user visits `/`?
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
|
||||
## --text--
|
||||
|
||||
What does `app.listen()` do?
|
||||
|
||||
```javascript
|
||||
app.listen(port, () => {
|
||||
console.log(`Example app listening on port ${port}`);
|
||||
});
|
||||
```
|
||||
|
||||
## --answers--
|
||||
|
||||
It stops the app.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about what must happen before you can visit [`http://localhost:3000`](http://localhost:3000) in a browser.
|
||||
|
||||
---
|
||||
|
||||
It sends a 404 code back to the client.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about what must happen before you can visit [`http://localhost:3000`](http://localhost:3000) in a browser.
|
||||
|
||||
---
|
||||
|
||||
It defines the port for the app.
|
||||
|
||||
### --feedback--
|
||||
|
||||
Think about what must happen before you can visit [`http://localhost:3000`](http://localhost:3000) in a browser.
|
||||
|
||||
---
|
||||
|
||||
It starts the server and listens for incoming requests on a port.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
4
|
||||
|
||||
## --text--
|
||||
|
||||
Which of these is a root URL?
|
||||
|
||||
## --answers--
|
||||
|
||||
`http://localhost:3000/posts`
|
||||
|
||||
### --feedback--
|
||||
|
||||
Recall that the root URL does not include any additional path segments.
|
||||
|
||||
---
|
||||
|
||||
`http://localhost:3000/posts?id=34`
|
||||
|
||||
### --feedback--
|
||||
|
||||
Recall that the root URL does not include any additional path segments.
|
||||
|
||||
---
|
||||
|
||||
`http://localhost:3000`
|
||||
|
||||
---
|
||||
|
||||
`http://localhost:3000/posts+comments`
|
||||
|
||||
### --feedback--
|
||||
|
||||
Recall that the root URL does not include any additional path segments.
|
||||
|
||||
## --video-solution--
|
||||
|
||||
3
|
||||
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"isUpcomingChange": true,
|
||||
"dashedName": "lecture-working-with-express",
|
||||
"helpCategory": "Backend Development",
|
||||
"blockLayout": "challenge-list",
|
||||
"challengeOrder": [
|
||||
{ "id": "69a6f5cc0512c4107ec1d446", "title": "What is Express.js?" },
|
||||
{
|
||||
"id": "69a6f5e1264af50c407aecfe",
|
||||
"title": "How Do You Create a Basic Express App?"
|
||||
}
|
||||
],
|
||||
"blockLabel": "lecture"
|
||||
}
|
||||
@@ -48,7 +48,10 @@
|
||||
{
|
||||
"dashedName": "introduction-to-express",
|
||||
"comingSoon": true,
|
||||
"blocks": ["lecture-understanding-rest-api-and-web-services"]
|
||||
"blocks": [
|
||||
"lecture-understanding-rest-api-and-web-services",
|
||||
"lecture-working-with-express"
|
||||
]
|
||||
},
|
||||
{
|
||||
"dashedName": "express-middleware",
|
||||
|
||||
Reference in New Issue
Block a user