How to open local files in Swagger-UI
Use the spec parameter.
Instructions below.
Create spec.js file containing Swagger JSON
Create a new javascript file in the same directory as index.html (/dist/)
Then insert spec
variable declaration:
var spec =
Then paste in the swagger.json file contents after. It does not have to be on the same line as the =
sign.
Example:
var spec =
{
"swagger": "2.0",
"info": {
"title": "I love Tex-Mex API",
"description": "You can barbecue it, boil it, broil it, bake it, sauté it. Dey's uh, Tex-Mex-kabobs, Tex-Mex creole, Tex-Mex gumbo. Pan fried, deep fried, stir-fried. There's pineapple Tex-Mex, lemon Tex-Mex, coconut Tex-Mex, pepper Tex-Mex, Tex-Mex soup, Tex-Mex stew, Tex-Mex salad, Tex-Mex and potatoes, Tex-Mex burger, Tex-Mex sandwich..",
"version": "1.0.0"
},
...
}
}
Modify Swagger UI index.html
This is a two-step like Ciara.
Include spec.js
Modify the /dist/index.html file to include the external spec.js
file.
<script src='spec.js' type="text/javascript"></script>
Example:
<!-- Some basic translations -->
<!-- <script src='lang/translator.js' type='text/javascript'></script> -->
<!-- <script src='lang/ru.js' type='text/javascript'></script> -->
<!-- <script src='lang/en.js' type='text/javascript'></script> -->
<!-- Original file pauses -->
<!-- Insert external modified swagger.json -->
<script src='spec.js' type="text/javascript"></script>
<!-- Original file resumes -->
<script type="text/javascript">
$(function () {
var url = window.location.search.match(/url=([^&]+)/);
if (url && url.length > 1) {
url = decodeURIComponent(url[1]);
} else {
url = "http://petstore.swagger.io/v2/swagger.json";
}
Add spec parameter
Modify the SwaggerUi instance to include the spec
parameter:
window.swaggerUi = new SwaggerUi({
url: url,
spec: spec,
dom_id: "swagger-ui-container",
I could not get Adam Taras's answer to work (i.e. using the relative path ../my.json
).
Here was my solution (pretty quick and painless if you have node installed):
- With Node, globally install package http-server
npm install -g http-server
- Change directories to where my.json is located, and run the command
http-server --cors
(CORS has to be enabled for this to work) - Open swagger ui (i.e. dist/index.html)
- Type
http://localhost:8080/my.json
in input field and click "Explore"
After a bit of struggle, I found a better solution.
create a directory with name: swagger
mkdir C:\swagger
If you are in Linux, try:
mkdir /opt/swagger
get swagger-editor with below command:
git clone https://github.com/swagger-api/swagger-editor.git
go into swagger-editor directory that is created now
cd swagger-editor
now get swagger-ui with below command:
git clone https://github.com/swagger-api/swagger-ui.git
now, copy your swagger file, I copied to below path:
./swagger-editor/api/swagger/swagger.json
all setup is done, run the swagger-edit with below commands
npm install npm run build npm start
You will be prompted 2 URLs, one of them might look like:
http://127.0.0.1:3001/
Above is swagger-editor URL
Now browse to:
http://127.0.0.1:3001/swagger-ui/dist/
Above is swagger-ui URL
Thats all.
You can now browse files from either of swagger-ui or swagger-editor
It will take time to install/build, but once done, you will see great results.
It took roughly 2 days of struggle for me, one-time installation took only about 5 minutes.
Now, on top-right, you can browse to your local file.
best of luck.