{"slug": "what-i-learned-building-my-first-express-server", "title": "What I Learned Building My First Express Server", "summary": "A frontend developer documented their experience building a first Express server from scratch, explaining core concepts like route parameters, query strings, and the `req`/`res` naming convention. The article breaks down the minimal server code line-by-line, clarifies that `req` and `res` are just conventional parameter names, and demonstrates how to handle URL parameters versus query parameters for different use cases.", "body_md": "I'm primarily a frontend developer. React, Vite, Tailwind etc. that's my world. The backend has always been that thing I knew existed but rarely touched. Today I finally sat down and built my first Express server from scratch, and I want to document everything that actually clicked, including the things that didn't at first.\nThis isn't exactly a clean tutorial. It's a honest account of what I learned, what troubled me, and what I'd tell myself if I was starting over.\nSetting up from zero\nFirst things first:\n``` in your terminal run\nnpm init -y\nnpm install express\nThen I created `server.js` and wrote the minimum possible server:\nconst express = require('express');\nconst app = express();\napp.get('/', (req, res) => {\nres.send('Hello world');\n});\napp.listen(3000, () => {\nconsole.log('Server running on port 3000');\n});\n``` javascript\nRun it with `node server.js`, open `http://localhost:3000` in the browser — \"Hello world\". That's a working HTTP server in about 10 lines.\nLet me break down what each part is actually doing.\n---\n**Breaking down the code**\n### `const express = require('express')`\nThis pulls the Express library from `node_modules` into the current file. `require` is CommonJS — the default module system in Node. You store it in a variable called `express`.\n### `const app = express()`\nYou call `express()` like a function because it is one. It returns an application object — this `app` is your server's control panel. Everything attaches to it.\n### The route\napp.get('/', (req, res) => {\nres.send('Hello world');\n});\nThis registers a route. Let's read it out loud:\n\"When someone makes a GET request to /\n, run this function.\"\nreq\nis the request object — everything the client sent you. Their URL, query params, headers, body.\nres\nis the response object — your tools for sending something back.\napp.listen(3000, () => { ... })\nThis starts the server on port 3000. The callback runs once the server is ready — that's why you log there and not outside it.\nI assumed req\nand res\nwere special keywords that Express required. They're not. They're just parameter names.\nExpress calls your callback with the request object first and the response object second, always. The names are completely up to you:\n// All of these work identically\napp.get('/', (req, res) => { res.send('ok') });\napp.get('/', (request, response) => { response.send('ok') });\napp.get('/', (banana, mango) => { mango.send('ok') });\nThat last one is valid JavaScript. mango\nholds the response object and .send()\nworks fine on it.\nThe community standardized on req\nand res\nso everyone reading your code immediately knows which is which. Stick with the convention, but knowing it's just a convention makes the whole thing less mysterious.\nThere are two ways a client can send data in a GET request.\napp.get('/user/:id', (req, res) => {\nconst id = req.params.id;\nres.json({ userId: id });\n});\nThe colon before id\ntells Express that this segment of the URL is a variable. So /user/jeffrey\n, /user/42\n, and /user/anything\nall hit this route. Whatever's in that slot gets stored in req.params.id\n.\nYou visit it like: http://localhost:3000/user/jeffrey\nFor multiple params, it's a slash between them, not a comma:\napp.get('/add/:a/:b', (req, res) => {\n// correct\n});\napp.get('/add/:a,:b', (req, res) => {\n// wrong — this will not match the way you expect\n});\nI made the comma mistake. It cost me time.\napp.get('/add', (req, res) => {\nconst a = Number(req.query.a);\nconst b = Number(req.query.b);\nres.json({ sum: a + b });\n});\nYou visit it like: http://localhost:3000/add?a=10&b=5\nWhen to use which:\nURL params are for identifying a specific resource — /user/42\n, /product/air-max\n. Query params are better for operations, filters, and optional values — /search?q=express\n, /add?a=10&b=5\n. For a math operation, query params are the natural fit.\nSplitting logic into modules\nInstead of writing all my functions inside the server file, I created a separate math.js\n:\n// math.js\nfunction add(a, b) {\nreturn a + b;\n}\nfunction mult(a, b) {\nreturn a * b;\n}\nmodule.exports = { add, mult };\nThen imported it in the server:\njs\n// server.js\nconst { add, mult } = require('./math');\nThis keeps the server file clean. Routes handle HTTP, modules handle logic. Good habit to build early.\n---\n** CommonJS vs ESModules**\nNode has two module systems and I spent time going back and forth between them today.\n**CommonJS:**\njs\nconst express = require('express');\nmodule.exports = { add };\n**ESModules:**\njs\nimport express from 'express';\nexport function add(a, b) { return a + b; }\nThe key differences:\n- To use ESM in Node, you need `\"type\": \"module\"` in your `package.json`, otherwise Node treats `.js` files as CJS by default\n- ESM requires file extensions when importing local files: `./math.js` not `./math`\n- You cannot mix them freely. `require` in an ESM file breaks. `import` in a CJS file breaks.\n**My recommendation if you're just starting:** stick with CommonJS. No config needed, works out of the box, and the vast majority of Express tutorials and packages are written in it. Switch to ESM when you have a concrete reason to.\n---\n## Handling POST requests\nGET requests carry data in the URL. POST requests carry data in the **body** — like submitting a login form or hitting an API with JSON. You don't want a password showing up in someone's browser history.\njs\napp.post('/login', (req, res) => {\nconst { username, password } = req.body;\nres.json({ message: Welcome ${username}\n});\n});\nBut there's a catch. To read `req.body`, you need this line **before** your routes:\njs\napp.use(express.json());\n`app.use()` applies middleware to every incoming request. `express.json()` reads the raw request body and parses it as JSON so you can access it via `req.body`.\nI removed this line to see what would happen. Got this:\nplaintext\nTypeError: Cannot destructure property 'username' of 'req.body' as it is undefined.\nWithout it, `req.body` is just `undefined`. The middleware is not optional — and it must come before your routes, not after.\nTo test POST requests, you can't use the browser URL bar. Use **Thunder Client** (VS Code extension) or Postman. Send a POST to `http://localhost:3000/login` with this JSON body:\njson\n{\n\"username\": \"jeffrey\",\n\"password\": \"velto123\"\n}\nResponse:\njson\n{\n\"message\": \"Welcome jeffrey\"\n}\n1. The app.listen callback\n// Wrong — logs before the server is ready\napp.listen(3000, console.log(\"Server running on port 3000\"));\n// Right — logs once the server is actually up\napp.listen(3000, () => console.log(\"Server running on port 3000\"));\nWithout the arrow function, console.log\nexecutes immediately when the file loads, not when the server is ready. It's a subtle difference but it matters.\n2. res.send() vs res.json()\nres.send()\nis for plain text. res.json()\nis for objects and structured data. When you're building an API, you almost always want res.json()\n.\n3. Not restarting the server\nEvery time I made a change and wondered why nothing was different — the old server was still running. Fix this once:\nnode --watch server.js\nBuilt into Node 18+. No install needed. Your server restarts automatically on every file change.\nBy the end of the session I had a working Express server with:\nadd\nand mult\nfunctionsreq.body\nIf you're a frontend developer who's been avoiding Express the same way I was — it's genuinely not that far from home. The concepts map to things you already know. A route is just an event listener. Middleware is just a function that runs before your handler. req\nand res\nare just objects.\nStart with a GET route. Break something. That's how it sticks.\nI'm Chinwuba Jeffrey — frontend developer and CEO of Velto, a premium web design agency focused on the African market. I'm documenting my journey going full-stack. Follow along if you're on a similar path.", "url": "https://wpnews.pro/news/what-i-learned-building-my-first-express-server", "canonical_source": "https://dev.to/chinwuba_jeffrey/what-i-learned-building-my-first-express-server-5a1k", "published_at": "2026-05-23 20:21:41+00:00", "updated_at": "2026-05-23 20:32:40.402812+00:00", "lang": "en", "topics": ["developer-tools"], "entities": ["Express", "React", "Vite", "Tailwind", "Node"], "alternates": {"html": "https://wpnews.pro/news/what-i-learned-building-my-first-express-server", "markdown": "https://wpnews.pro/news/what-i-learned-building-my-first-express-server.md", "text": "https://wpnews.pro/news/what-i-learned-building-my-first-express-server.txt", "jsonld": "https://wpnews.pro/news/what-i-learned-building-my-first-express-server.jsonld"}}