How to set up swagger ui with working anchors - swagger-ui

Question

I am using https://app.swaggerhub.com/ to develop my api endpoints. I have set it up in webroot/swagger folder. This folder contains
favicon-16x16.png
oauth2-redirect.html
swagger-ui-bundle.js.map
swagger-ui.js
swagger-ui-standalone-preset.js.map
favicon-32x32.png
swagger.json
swagger-ui.css
swagger-ui.js.map
index.html
swagger-ui-bundle.js
swagger-ui.css.map
swagger-ui-standalone-preset.js
What i do is export json_resolved for app... to my repo and it loads fine. problem is when i click on an endpoint and want to load the endpoint specifically on first load. for example
loading http://exampledomain.com/swagger/#/giant/addCm on 1st load would error
Unable to render this definition
The provided definition does not specify a valid version field.
Please indicate a valid Swagger or OpenAPI version field. Supported version fields are swagger: "2.0" and those that match openapi: 3.0.n (for example, openapi: 3.0.0).
r {name: "YAMLException", reason: "end of the stream or a document separator is expected", mark: o, message: "end of the stream or a document separator is expec… box-sizing: border-box;↵ ^", stack: "YAMLException: end of the stream or a document sep…lreply.com/swagger/swagger-ui-bundle.js:51:29161)"}
name: "YAMLException"
reason: "end of the stream or a document separator is expected"
mark: o {name: null, buffer: "<!-- HTML for static distribution bundle build -->…dow.ui = ui↵ }↵ </script>↵ </body>↵</html>↵", position: 432, line: 12, column: 18}
message: "end of the stream or a document separator is expected at line 13, column 19:↵ box-sizing: border-box;↵ ^"
stack: "YAMLException: end of the stream or a document separator is expected at line 13, column 19:↵ box-sizing: border-box;↵ ^↵ at M (https://dev1.domain.com/swagger/swagger-ui-bundle.js:79:71772)↵ at N (https://dev1.domain.com/swagger/swagger-ui-bundle.js:79:71870)↵ at Y (https://dev1.domain.com/swagger/swagger-ui-bundle.js:79:85578)↵ at $ (https://dev1.domain.com/swagger/swagger-ui-bundle.js:79:85933)↵ at Z (https://dev1.domain.com/swagger/swagger-ui-bundle.js:79:86083)↵ at Object.e.exports.safeLoad (https://dev1.domain.com/swagger/swagger-ui-bundle.js:79:86413)↵ at https://dev1.domain.com/swagger/swagger-ui-bundle.js:6:6349↵ at Object.dispatch (https://dev1.domain.com/swagger/swagger-ui-bundle.js:1:60251)↵ at dispatch (<anonymous>:1:28545)↵ at Object.parseToJson (https://dev1.domain.com/swagger/swagger-ui-bundle.js:51:29161)"
__proto__: Error
openapi: 3.0.0
info:
description: |
# Requirements
* domain Service Account
* CORS Proxy | We can add your FQDN to the whitelist
version: 2.0.0
title: CCP API
# put the contact info for your development or API team
contact:
email: m.uddin#reply.com
license:
name: Apache 2.0
url: http://www.apache.org/licenses/LICENSE-2.0.html
# tags are used for organizing operations
tags:
- name: dcsn
- name: find
- name: firewall
- name: lists
- name: services
- name: vpf
- name: cm
- name: giant
security:
- BasicAuth: []
paths:
/iwsapi/admin/rename/comms/matrices:
post:
tags:
- cm
summary: Rename Cm
operationId: renameCm
description: Rename Cm
requestBody:
#description: add column filters
required: true
content:
application/x-www-form-urlencoded:
schema:
$ref: '#/components/schemas/CmForm'
responses:
200:
description: Verify Policy Flow
content:
application/json:
schema:
$ref: '#/components/schemas/Cm'
401:
description: invalid user
content:
application/json:
schema:
$ref: '#/components/schemas/Error'
422:
description: invalid input, object invalid
content:
application/json:
schema:
$ref: '#/components/schemas/Error'
security:
- BasicAuth: []
components:
securitySchemes:
BasicAuth:
type: http
scheme: basic
headers:
xPaginationCount:
description: Total no. of records found.
schema:
type: integer
xPaginationLimit:
description: No. of records to limit fetch.
schema:
type: integer
xPaginationOffset:
description: Start fetch from row
schema:
type: integer
schemas:
Error:
type: object
items:
type: object
properties:
header:
type: object
properties:
error:
type: boolean
message:
type: string
example:
header:
error: true
message: error message if available
CmForm:
type: object
required:
- comms_matrix_id
properties:
comms_matrix_id:
type: number
example: 1
remedy_inc:
type: string
description: 15 characters long, starts with AAS|INC|CRQ|TAS|RLM, continues with 12 digits
example: AAS111111111111
remedy_status:
type: string
enum: [Assigned, Cancelled, Closed, In Progress, Pending, Resolved]
example: Assigned
remedy_team:
type: string
example: team
remedy_status_reason:
type: string
example: free text
Cm:
type: object
items:
type: object
properties:
body:
type: object
properties:
recordset:
type: object
properties:
record:
type: array
items:
type: object
properties:
id:
type: number
service_id:
type: number
filename:
type: string
visible_lines:
type: number
aggregated_flows:
type: number
security_flows:
type: number
routing_flows:
type: number
error_flows:
type: number
security_permit:
type: number
security_deny:
type: number
security_exemption:
type: number
security_prevention:
type: number
routing_permit:
type: number
routing_deny:
type: number
routing_exemption:
type: number
routing_prevention:
type: number
routing_issues:
type: number
uploaded_by:
type: string
ts_updated:
type: string
ts_created:
type: string
frozen:
type: boolean
deleted:
type: boolean
warning_flows:
type: number
remedy_status:
type: string
remedy_inc:
type: string
cm_sox_approval_id:
type: number
remedy_team:
type: string
remedy_status_reason:
type: string
metadata:
type: object
properties:
num_rows:
type: number
example:
body:
recordset:
record:
- id: 135841
service_id: 3
filename: German_Zones_Test3.xlsx
visible_lines: 48
aggregated_flows: 1
security_flows: 48
routing_flows: 1
error_flows: 0
security_permit: 48
security_deny: 48
security_exemption: 0
security_prevention: 0
routing_permit: 0
routing_deny: 0
routing_exemption: 48
routing_prevention: 0
routing_issues: null
uploaded_by: kakoullim
ts_updated: 13-Mar-20 11:55:38
ts_created: 20-Mar-03 12:14:04
frozen: 0
deleted: 0
warning_flows: 0
remedy_status: Pending
remedy_inc: INC123456789101
cm_sox_approval_id: 4550
remedy_team: null
remedy_status_reason: null
metadata:
num_rows:
1
schemes:
- https
# Added by API Auto Mocking Plugin
# basePath: /
# Added by API Auto Mocking Plugin
host: ccp.domain.com
# basePath: /vf-ccp/ccp/1.0.0
# Added by API Auto Mocking Plugin
basePath: /
# Added by API Auto Mocking Plugin
servers:
# Added by API Auto Mocking Plugin
- description: CCP-PRODSUPP
url: https://prodsupp.domain.com
- description: Sytel
url: https://dev1.domain.com
- description: CCP-TEST
url: https://test.domain.com
/swagger/index.html
...
<body>
<div id="swagger-ui"></div>
<script src="./swagger-ui-bundle.js"> </script>
<script src="./swagger-ui-standalone-preset.js"> </script>
<script>
window.onload = function() {
// Begin Swagger UI call region
const ui = SwaggerUIBundle({
url: window.location.href + "swagger.json",
dom_id: '#swagger-ui',
deepLinking: true,
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
],
plugins: [
SwaggerUIBundle.plugins.DownloadUrl
],
layout: "StandaloneLayout"
})
// End Swagger UI call region
window.ui = ui
}
</script>
</body>
...