Simple way to provide custom UI

[jdarling]

Ok, I get that custom views allow you serve a custom page that embeds the UI and that if you disable enableDocumentation and create the custom view handlers, and thus and such you can get a custom view for the SwaggerUI. Why not just have a property for the views location to make it easy to just copy the public folder to a new location, modify, set the property and serve as usual.

I've been trying to get the hacky feeling disable enableDocumentation and custom views to work for several hours now and its conflicting with other view handlers that I have in place. It also seems that many have requested customization of the UI that could be easily done by just providing a way to set the view location.

Anyways, just my two cents. Great plugin btw.

[jdarling]

Seems like this would be as simple as changing line 71 in lib/index.js from

    const swaggerDirPath = publicDirPath + Path.sep + 'swaggerui';

to

    const swaggerDirPath = options.swaggerDirPath||(publicDirPath + Path.sep + 'swaggerui');

[jdarling]

And maybe allowing publicDirPath (on line 70) as well, just in case someone needs to overwrite extends.

[glennjones]

Came across problem configuring custom pages myself a couple of days ago. After which the next release will have option properties that may help you:

• enableSwaggerUI: (boolean) Add files that support SwaggerUI. Only removes files if enableDocumentation is also set to false - default: true,
• swaggerUIPath: (string) The path for the interface files - default: /swaggerui/

You should then be able to switch off the documentation page and keep the /swaggerui/ file routes. You should also be able to change swaggerUIPath to map the files to a custom URL structure.

For those people that only want the swagger.json endpoint they can set enableDocumentation and enableSwaggerUI to false.

In this last configuration you could add you only mapping for the SwaggerUI resources routes just using the plugin to generate the swagger.json.

I was a little unclear of what you where trying to achieve but I hope the flexibility of these properties will give you want your looking for.

[jdarling]

That is almost the exact same solution I came to with the exception of naming and adding the enableSwaggerUI flag. I was planning on sending a PR once I completed the project I'm working on to validate everything went as expected, but I'm more than a few days out (I think). Should work perfectly as basically I needed to add basic auth and token auth stuff to the header of the swagger index page.

[ghost]

This is slightly confusing. My custom templates work when I have the documentation enabled but fail when disable the documentation page...

For example, the following works, but then exposes /documentation (which I do not want): options: { enableDocumentation: true, pathPrefixSize: 2, info: { title: 'Mock API Documentation', description: 'API Sandbox', version: pack.version } }

The "simple" but not working fix I figured would be the follow, but to no avail: options: { enableDocumentation: false, enableSwaggerUI: true, //swaggerUIPath: '/node_modules/hapi-swagger/public/swaggerui/', pathPrefixSize: 2, info: { title: 'Mock API Documentation', description: 'API Sandbox', version: pack.version } }

[glennjones]

@jdarling now in v6.0.0 on NPM

@ppallesws I changed readme to Github a couple of weeks ago, but then I got sidelined by so much work its taken till today to publish it on NPM. Mostly likely you read the Github readme about options for v6.0.0, but where using a earlier version from NPM

If you have any problem with this feature after moving to v6.0.0 please let me know

[jdarling]

Just pulled in v6, had to do some overrides as we are on Hoek 4, but that shouldn't make too much of a difference.

I must have something wrong in my configuration though as I'm not seeing the custom UI.

Here is how I am setting up HapiSwagger

  {
    register: HapiSwagger,
    options: {
      swaggerUIPath: path.resolve(__dirname, '../web/swaggerui')+path.sep,
      pathPrefixSize: 3,
      jsonEditor: true,
      info: {
        title: pjson.name.replace(/\w\S*/g, (txt)=>txt.charAt(0).toUpperCase()+txt.substr(1))+' Documentation',
        version: pjson.version
      },
      auth: {
        mode: 'optional',
        strategy: 'simple',
      },
      securityDefinitions: {
        type: 'basic'
      },
    },
  },

[glennjones]

Sorry about that, a pathing problem not picked up in the tests cause this issue. If you try v6.1.0 it should now be corrected.

I also added a example of a custom page setup in the the bin directory of the project

[skeep]

I am trying to use https://github.com/jensoleg/swagger-ui , but it's not showing up. I tried :

        {
            register: HapiSwagger,
            options: {
                swaggerUIPath: '/node_modules/swagger-ui/dist/'
            }
        }

as well as this:

        {
            register: HapiSwagger,
            options: {
                enableDocumentation: false,
                enableSwaggerUI: true,
                swaggerUIPath: '/node_modules/swagger-ui/dist/'
            }
        }

and this

        {
            register: HapiSwagger,
            options: {
                enableDocumentation: true,
                enableSwaggerUI: false,
                swaggerUIPath: '/node_modules/swagger-ui/dist/'
            }
        }

[ghost]

@glennjones Thank you for the update. I will report my findings this weekend.

[bencooling]

Is it possible to customise this hapi plugin with the jensoleg/swagger-ui theme? Reading @skeep's comment it's not currently possible?