Swagger-UI Access to Relative Paths

[Peter Luttrell]

I've downloaded the Swagger-UI source and in the docs, it talks about being able to host it in any server environment. I would like to host it with our APIs themselves and am wondering how I reference my swagger.json file such that it's relative to the Swagger-ui /dist dir that I plan to host as part of our application, which will flow through our deployment process and be hosted on varying different host names...so I won't have a pre-defined URL that hosts my swagger.json file, I'd like to access it relative to the /dist dir.

So for example, say I have a restful API like this {host}/v1/pets, and I want to host a way for clients to view my swagger.json with swagger-ui with this url: {host}/v1/api-view. I can easily include the swagger-ui /dist directory in our deployments such that it'll respond to requests for the /v1/api-view path. So my two questions are: 

1) Where should I put the swagger.json I just generated from the online Swagger Editor?

2) How do I reference that relative location in the /dist/index.html?

I've tried several combinations and only generate errors like this:

Please specify the protocol for file://localhost/Users/me/Desktop/swagger-ui-master/dist/index.html/swagger.json

Thanks,

Peter Luttrell

[tony tam]

Hi, if hosted on a server, swagger.json can live anywhere addressable via AJAX.  If you are not hosting on the filesystem, you can do the following:

1) put your swagger spec in a file in the swagger-ui file system.  Assign the `value` in the UI to a variable:

var swaggerSpec = { ... // your spec in JSON }};

2) when initializing swaggerUi, assign the variable:

window.swaggerUi = new SwaggerUi({

 url: url,

 spec: spec,

 dom_id: "swagger-ui-container",

3) when loading swagger-ui, you'll have the spec loaded automatically.

[Sean Matthews]

Hey Tony,

Hoping you still check this. When you say "put your swagger spec in a file in the swagger-ui file system", do you mean to open up a .js file within the swagger-ui directory (like index.js) and assign a variable swaggerSpec with the actual JSON of our spec? Or should we put the swagger.json file in our /dist director, then reference that file in the index.html file with a "var swaggerSpec = '/swagger.json';?

I'm having trouble figuring out your meaning, you could be saying either

1. Place the file in my local swagger-ui  directory and then reference it in the index.html file
   OR
   
2. Copy the JSON into either an HTML file or a .js file in the directory, and wrap it with a var swaggerSpec, then reference this variable in the index.html file (which, did you mean I should be able to just have "spec: spec," in there, or should it say "spec: swaggerSpec,"?)

Any tips there would be super helpful!

Best,

~Sean

[Josh Ponelat]

Maybe I can help...

There are two ways to get your spec /into/ swagger-ui

One, you can inline it, but copying the acual JSON and sticking it into dist/index.html (or src/main/html/index.html if you ever plan on building it)

So...

dist/index.html

var spec = {

   swagger: '2.0'

   info: {}
   //...
}

window.swaggerUi = new SwaggerUi({

 url: url,

 spec: spec, // <--- this is an object, not a string and not a reference to a file/path/URL

 dom_id: "swagger-ui-container",
 // ..

Two, you can reference your spec -- IF its hosted by a server somewhere.

window.swaggerUi = new SwaggerUi({

 url: url, // <---- some URL beginning with http(s):// AJAX cannot access the filesystem (file:///)

 dom_id: "swagger-ui-container",

There are simple ways to host your file for development, I use node.js which has a commanline called 'serve'

Hope that help!

--
You received this message because you are subscribed to the Google Groups "Swagger" group.
To unsubscribe from this group and stop receiving emails from it, send an email to swagger-swaggers...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.