Build Your First Node.js Express To-Do App
Computer Science
Build Your First Node.js Express To-Do App
Build Your First Node.js Express To-Do App
Build a small, usable to-do list from scratch with a Node.js Express server and vanilla JavaScript. You will move from an empty folder to a browser app where you can add, view, complete, and delete tasks.
What you learn by building this
- Create and run a small Node.js project
- Use Express routes to serve pages and handle task requests
- Connect vanilla JavaScript in the browser to a server endpoint
- Add, display, complete, and delete to-do items
- Keep the project understandable with a simple file structure and clear behavior
Learning Journey
Create the App Shell
2 lessonsStart from an empty project and make a working Express page with the basic to-do interface.
Make Tasks Work on the Server
3 lessonsAdd a small in-memory task model and routes so the server can list, create, complete, and delete tasks.
Connect the Browser Interface
3 lessonsUse vanilla JavaScript and fetch to turn the page into a responsive client for the Express task routes.
Public lesson
Create and Run a Node.js Project
Make a Node.js server answer in the browser
Today you’ll make the supplied Node.js practice project respond to a browser request with a message you chose. The important idea is not just memorizing Express commands:
- Node.js runs JavaScript outside the browser.
- Express gives Node a clearer way to describe web routes.
- A route connects a request, such as
GET /, to a response. - The browser is a useful test client: when it displays your message, the server received the request and sent a response.
Tasks
1. Inspect the project before changing it
Open the project’s package.json. Look for:
- an
expressentry underdependencies - a
scriptssection, especially a start or dev command - a
mainfield, which may identify the server entry file - a
"type": "module"field
This tells you how the project expects to run. In particular, a project using "type": "module" generally uses import, while a project without it may use require. Match the style already used by the project instead of mixing the two.
If Express is not listed as a dependency, install it from the project folder with:
npm install express
npm install express
Check that package.json now lists Express and that npm completed without an error. Do not create a second project or run initialization commands.
Tasks
2. Add a deliberate route
Open the existing server entry file. If you are unsure which file it is, use the main field or the project’s documentation rather than guessing a filename.
Find the part that creates the Express application, or add that small piece in the project’s existing style. Your server needs four ideas:
// Use the import style already present in this project.
const express = /* obtain Express */;
const app = express();
const port = /* choose a local port */;
app.get("/", (request, response) => {
response.send(/* your deliberate welcome message */);
});
app.listen(port, () => {
console.log(/* a message that includes the port */);
});
// Use the import style already present in this project.
const express = /* obtain Express */;
const app = express();
const port = /* choose a local port */;
app.get("/", (request, response) => {
response.send(/* your deliberate welcome message */);
});
app.listen(port, () => {
console.log(/* a message that includes the port */);
});
Adapt the missing parts to the project:
- If the project uses
import, use its existing import style. - Choose a local port such as
3000, unless the project already specifies one. - Write a message that makes it obvious this is your server, such as a welcome sentence naming the practice project. Do not leave the response as a generic placeholder.
- The
/route matters:/is the path the browser requests when you visit the server’s base address.
Save the file.
Why this works
When you visit a local address, the process is:
- The browser sends a
GETrequest to/. - Express matches that request to
app.get("/", ...). - Your callback runs.
response.send(...)sends text back to the browser.- The browser displays the text.
Without the route, the server might still be running, but it would not know what response to provide for /. Without listen, the application would be defined in memory but would not accept browser connections.
Tasks
3. Run the server
Use the start command documented by the project or listed in package.json under scripts. For example, if the project has a "start" script, run that script through npm rather than inventing a different command.
Watch the terminal for the message from your listen callback. It should indicate that the server is listening on the port you selected.
If the process exits immediately, read the first error carefully:
- An import error often means the module style does not match
package.json. - “Cannot find module
express” means the dependency is missing or the command was run from the wrong project folder. - “Address already in use” means another process has claimed that port; stop that process or choose another available port.
Tasks
4. Test the result in a browser
Open:
http://localhost:YOUR_PORT
http://localhost:YOUR_PORT
Replace YOUR_PORT with the port in your code.
You should see your deliberate welcome message. This is more than a visual check: it confirms the whole request-and-response path worked.
Now make one small change to the message, save the file, and observe what happens:
- If the server process does not restart automatically, stop it and run the project’s command again.
- Refresh the browser.
- Confirm that the new message appears.
That refresh demonstrates an important boundary: changing a source file does not necessarily change the already-running Node process until the project restarts or uses a file-watching tool.
Explain it back
Put it in your own words
Check your understanding
Explain these in your own words:
- What does
app.get("/", ...)match? - Why does the browser show your message only after
response.send(...)runs? - What is the purpose of
app.listen(...)? - Which part of the result proves that your route—not merely the server process—worked?
If you can answer those questions and see your own message at localhost, you have a working minimal Express server.
20 more characters
Course Outline
3 modules · 8 lessons
Create the App Shell
Make Tasks Work on the Server
Connect the Browser Interface
Learn by building your own version.
Remix this public project to open the workspace, follow the guided build, and let the AI mentor teach you through the work instead of doing it for you.