Deploy Swagger on Your Mac!

Posted by Nino Lau on May 23, 2019

We learnt a novel tool 🔧Swagger on our SWSAD course. I went back and configured it on my personal computer 💻 and now I have the deployment method below. 😁

API design is prone to errors, and it’s extremely difficult and time-consuming to spot and rectify mistakes when modeling APIs. Swagger Editor was the first editor built for designing APIs with the OpenAPI Specification (OAS), and has continued to meet the needs of developers building APIs with OAS. The Editor validates your design in real-time, checks for OAS compliancy, and provides visual feedback on the go.

Swagger Editor

First install http server.

$ sudo npm install -g http-server

We can see the view like below if installing successfully.

Then download Swagger editor from THIS REPO.

$ git clone

Go to the download folder and run http server.

$ cd swagger-editor-master
$ http-server swagger-editor

The default port is localhost:8080. We can also change the port as follows.

$ http-server -p 4000 swagger-editor

OPPS!!! 😕 A 404 error appears when we open ‘’ in Chrome using the web method.

Some blog solve this problem, we can directly ‘npm start’.

$ npm start

It will download and install something, and automatically open the browser ‘’ to display the SwaggerEditor interface successfully! 🎉🎊🎁

Swagger UI

Download the folder dist of Swagger UI in THIS REPO.

Then let’s start the test project.

$ mkdir swagger-test
$ cd swagger-test/
$ npm init

After put dist folder into the our swagger-test, we will create a index.js.

var express = require('express');
var app = express();
app.use('/root', express.static('dist'));
app.get('/', function (req, res) {
  res.send('Hello World!');
app.listen(3000, function () {
  console.log('Example app listening on port 3000!');

We need to have our folder organized as follows.

Finally, install express and then let’s run this test!

npm install express
npm index.js

Then we have deployed Swagger successfully 😝 on our Mac! 👨🏻‍💻