# How to Set Up Swagger UI in Express with TypeScript

API documentation is crucial for developers to understand, test, and consume your endpoints efficiently. Swagger (OpenAPI) is a popular standard for documenting RESTful APIs.

In this blog, you’ll learn how to integrate **Swagger UI** in an Express TypeScript project using:

* [`swagger-ui-expre`](https://www.npmjs.com/package/swagger-ui-express)[`ss`](https://www.npmjs.com/package/swagger-ui-express)
    
* [`swagger-auto`](https://www.npmjs.com/package/swagger-ui-express)[`gen`](https://www.npmjs.com/package/swagger-autogen)
    

---

Step 1 : Install Required Packages

```javascript
npm i swagger-ui-express
npm i --save-dev swagger-autogen
```

  
Step2: Enable JSON Module Import in TypeScript

Edit your `tsconfig.json` file and enable the following option:

```javascript
{
  "compilerOptions": {
    "resolveJsonModule": true
  }
}
```

This allows TypeScript to import JSON files directly (which is required for the Swagger output).

Step 3 : Integrate Swagger UI in Your App

In your `app.ts` (or `server.ts`), add the Swagger middleware:

```javascript
import swaggerui from "swagger-ui-express"

import * as swaggerDocument from "./swagger-output.json" // we will create this swagger-output.json later on
```

```javascript
app.use("/api-docs", swaggerui.serve, swaggerui.setup(swaggerDocument));
```

Step 4 : Create Swagger Generator File

Create a file called `swagger-gen.js` in the root of your project:

```javascript
import swaggerAutogen from "swagger-autogen";

const doc = {
  info: {
    title: "CodeSummit Api",
    description: "Description",
  },
  host: "localhost:8080",
};

const outputFile = "./swagger-output.json";
const routes = ["./app.ts"];

swaggerAutogen(outputFile, routes, doc);
```

💡 Note: Even though your app is written in TypeScript, you can keep this generator file in JavaScript because `swagger-autogen` uses static analysis.

Step 5 : Run the Generator

Generate your Swagger docs by running:

```javascript
node swagger-gen.js
```

This will create a new file called `swagger-output.json` which will be used by `swagger-ui-express`.

Visit your Swagger UI at:

```bash
http://localhost:8080/api-docs
```

You’ll see a beautiful, interactive Swagger interface displaying your documented API endpoints.

## 🎉 Conclusion

With this setup, you now have **automatic API documentation** using Swagger UI in your Express + TypeScript project. This makes your APIs self-explanatory and testable without external tools like Postman.

Happy coding! ✨