DEV Community

Shelner
Shelner

Posted on

Create Simple API using Express, Swagger UI

// app/src/routes/user.routes.ts
import { Request, Response, Router } from "express";

const router = Router();

router.get("/", (req: Request, res: Response) => {
    res.json([
        { id: 1, name: "Alice" },
        { id: 2, name: "Bob" }
    ]);
});

export default router;
Enter fullscreen mode Exit fullscreen mode
// app/src/app.ts
import express from "express";
import swaggerUi from "swagger-ui-express";
import YAML from "yamljs";
import userRoutes from "./routes/user.routes";

const app = express();
app.use(express.json());

// Routes
app.use("/api/users", userRoutes);

// Swagger
const swaggerDocument = YAML.load("./src/openapi.yaml");
app.use("/api-docs", swaggerUi.serve, swaggerUi.setup(swaggerDocument));

const PORT = 3000;
app.listen(PORT, () => {
    console.log(`Server running on http://localhost:${PORT}`);
    console.log(`Swagger UI on http://localhost:${PORT}/api-docs`);
});
Enter fullscreen mode Exit fullscreen mode
# app/src/openapi.yaml
openapi: 3.0.0
info:
  title: Simple User API
  version: 1.0.0
  description: A simple API using Node.js, TypeScript, and OpenAPI

servers:
  - url: http://localhost:3000

paths:
  /api/users:
    get:
      summary: Get all users
      responses:
        "200":
          description: List of users
          content:
            application/json:
              schema:
                type: array
                items:
                  $ref: "#/components/schemas/User"

components:
  schemas:
    User:
      type: object
      properties:
        id:
          type: number
        name:
          type: string
Enter fullscreen mode Exit fullscreen mode

package.json

{
  "name": "simpleAPI",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "ts-node-dev --respawn src/app.ts",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "packageManager": "pnpm@10.15.1",
  "dependencies": {
    "express": "^5.2.1",
    "swagger-ui-express": "^5.0.1",
    "yamljs": "^0.3.0"
  },
  "devDependencies": {
    "@types/express": "^5.0.6",
    "@types/node": "^25.0.10",
    "@types/swagger-ui-express": "^4.1.8",
    "@types/yamljs": "^0.2.34",
    "ts-node-dev": "^2.0.0",
    "typescript": "^5.9.3"
  }
}
Enter fullscreen mode Exit fullscreen mode

How to use

  1. pnpm install
  2. pnpm run dev

Top comments (0)