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 https://github.com/swagger-api/swagger-editor.git
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 ‘http://127.0.0.1:2000’ 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 ‘http://127.0.0.1:3001’ 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! 👨🏻💻
