Swagger UI express shows blank page when host in server - express

Question

I have generated the swagger JSON file below using "swagger-autogen"
{
"swagger": "2.0",
"info": {
"version": "0.0.0",
"title": "api-impact",
"description": "Documentation automatically generated by the <b>swagger-autogen</b> module."
},
"host": "localhost:3000",
"basePath": "/v1",
"tags": [
{
"name": "CRUD",
"description": "Endpoints classic CRUD"
},
{
"name": "Search",
"description": "Different search strategy to get equipements"
},
{
"name": "Utils",
"description": "Utils endpoints"
}
],
"schemes": [
"http",
"https"
],
"consumes": [
"application/json"
],
"produces": [
"application/json"
],
"paths": {
"/v1/equipement/CRUD/": {
"post": {
"tags": [
"CRUD"
],
"description": "create an equipement",
"parameters": [
{
"name": "id",
"type": "string",
"required": true,
"in": "query"
},
{
"name": "equipement",
"in": "body",
"required": true,
"description": "equipement",
"schema": {
"$ref": "#/definitions/Equipement"
}
}
],
"responses": {
"200": {
"description": "OK",
"schema": {
"$ref": "#/definitions/Equipement"
}
},
"400": {
"description": "Bad Request"
}
}
}
},
"/v1/equipement/CRUD/{id}": {
"put": {
"tags": [
"CRUD"
],
"description": "modify the equipement by the id",
"parameters": [
{
"name": "id",
"in": "path",
"required": true,
"type": "string"
},
{
"name": "equipement",
"in": "body",
"required": true,
"description": "equipement",
"schema": {
"$ref": "#/definitions/Equipement"
}
}
],
"responses": {
"200": {
"description": "OK",
"schema": {
"$ref": "#/definitions/Equipement"
}
},
"400": {
"description": "Bad Request"
}
}
},
"delete": {
"tags": [
"CRUD"
],
"description": "delete an equipement by its id",
"parameters": [
{
"name": "id",
"in": "path",
"required": true,
"type": "string"
}
],
"responses": {
"200": {
"description": "OK",
"schema": {
"$ref": "#/definitions/Equipement"
}
},
"400": {
"description": "Bad Request"
}
}
},
"get": {
"tags": [
"CRUD"
],
"description": "Get the equipement by the id",
"parameters": [
{
"name": "id",
"in": "path",
"required": true,
"type": "string"
}
],
"responses": {
"200": {
"description": "Equipement with the specified id ",
"schema": {
"$ref": "#/definitions/Equipement"
}
},
"400": {
"description": "Bad Request"
}
}
}
},
"/v1/equipement/search/all": {
"get": {
"tags": [
"Search"
],
"description": "Get all equipement in the database",
"parameters": [],
"responses": {
"200": {
"description": "Array of all the equipements",
"schema": {
"type": "array",
"items": {
"$ref": "#/definitions/Equipement"
},
"xml": {
"name": "main"
}
}
},
"400": {
"description": "Bad Request"
}
}
}
},
"/v1/equipement/search/mongo_query": {
"get": {
"tags": [
"Search"
],
"description": "Access equipements with a mongoDB find query passed in body",
"parameters": [
{
"name": "obj",
"in": "body",
"required": true,
"description": "Mongo Query",
"schema": {
"type": "object",
"properties": {}
}
}
],
"responses": {
"200": {
"description": "Array of the equipements returned by the mongo query",
"schema": {
"type": "array",
"items": {
"$ref": "#/definitions/Equipement"
},
"xml": {
"name": "main"
}
}
},
"400": {
"description": "Bad Request"
}
}
}
},
"/v1/equipement/search/text": {
"get": {
"tags": [
"Search"
],
"description": "Search equipement via a text query on name and brand",
"parameters": [
{
"name": "n",
"description": "Number of results wanted",
"required": false,
"type": "number",
"in": "query"
},
{
"name": "searchString",
"description": "search text query",
"required": true,
"type": "string",
"in": "query"
}
],
"responses": {
"200": {
"description": "Array of the equipements returned by the text query",
"schema": {
"type": "array",
"items": {
"$ref": "#/definitions/Equipement"
},
"xml": {
"name": "main"
}
}
},
"400": {
"description": "Bad Request"
}
}
}
},
"/v1/equipement/search/query_param": {
"get": {
"tags": [
"Search"
],
"description": "Access equipements by parameters",
"parameters": [
{
"name": "type",
"type": "string",
"in": "query"
},
{
"name": "brand",
"type": "string",
"in": "query"
},
{
"name": "segmentation",
"in": "query",
"type": "string"
}
],
"responses": {
"200": {
"description": "Array of the equipements returned by the parameter query",
"schema": {
"type": "array",
"items": {
"$ref": "#/definitions/Equipement"
},
"xml": {
"name": "main"
}
}
},
"400": {
"description": "Bad Request"
}
}
}
},
"/v1/equipement/utils/getAllBrands": {
"get": {
"tags": [
"Utils"
],
"description": "Return all the existing brands",
"parameters": [],
"responses": {
"200": {
"description": "Array of the brand names",
"schema": {
"type": "array",
"example": [
"string"
],
"items": {
"type": "string"
},
"xml": {
"name": "main"
}
}
},
"400": {
"description": "Bad Request"
}
}
}
},
"/v1/equipement/utils/getAllTypes": {
"get": {
"tags": [
"Utils"
],
"description": "Return all the existing type of equipement",
"parameters": [],
"responses": {
"200": {
"schema": {
"type": "array",
"example": [
"string"
],
"items": {
"type": "string"
},
"xml": {
"name": "main"
}
},
"description": "Array of the equipements type"
}
}
}
},
"/v1/equipement/utils/getAllSegmentation": {
"get": {
"tags": [
"Utils"
],
"description": "Return all the existing segmentation of equipement",
"parameters": [],
"responses": {
"200": {
"schema": {
"type": "array",
"example": [
"string"
],
"items": {
"type": "string"
},
"xml": {
"name": "main"
}
},
"description": "Array of the equipements segmentation"
}
}
}
}
},
"definitions": {
"Equipement": {
"type": "object",
"properties": {
"name": {
"type": "string",
"example": "Dell Vostro"
},
"type": {
"type": "string",
"example": "Ordinateur"
},
"brand": {
"type": "string",
"example": "Dell"
},
"segementation": {
"type": "string",
"example": "Portable"
},
"descritpion": {
"type": "string",
"example": " ... "
},
"date_modify": {
"type": "string",
"example": "2012-04-23T00:00:00.000Z"
},
"impact_cc": {
"type": "object",
"properties": {
"type": {
"type": "string",
"example": "cc"
},
"unit": {
"type": "string",
"example": "Kg CO2 eq."
},
"cradle_to_gate_impact": {
"type": "number",
"example": 30
},
"gate_to_grave_impact": {
"type": "number",
"example": 40
},
"transport_impact": {
"type": "number",
"example": 45
},
"use_impact": {
"type": "number",
"example": 32
},
"eof_impact": {
"type": "number",
"example": 12
},
"margin_error": {
"type": "number",
"example": 12
},
"year_usage": {
"type": "number",
"example": 4
},
"methodology": {
"type": "string",
"example": "test"
},
"use_methodology": {
"type": "string",
"example": "none"
},
"source": {
"type": "string",
"example": "dede"
},
"impact_factor": {
"type": "string",
"example": "55"
},
"date_publication": {
"type": "string",
"example": "2012-04-23T00:00:00.000Z"
}
}
}
}
}
}
}
When i use "swagger-ui-express" to display it, it works on my localhost. But when installed on a server, the swagger page is blank (even when curled from the server itself).
app.use('/doc', swaggerUi.serve, swaggerUi.setup(swaggerFile));
Blank page :
<!-- HTML for static distribution bundle build -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Swagger UI</title>
<link rel="stylesheet" type="text/css" href="./swagger-ui.css" >
<link rel="icon" type="image/png" href="./favicon-32x32.png" sizes="32x32" /><link rel="icon" type="image/png" href="./favicon-16x16.png" sizes="16x16" />
<style>
html
{
box-sizing: border-box;
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
*,
*:before,
*:after
{
box-sizing: inherit;
}
body {
margin:0;
background: #fafafa;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute;width:0;height:0">
<defs>
<symbol viewBox="0 0 20 20" id="unlocked">
<path d="M15.8 8H14V5.6C14 2.703 12.665 1 10 1 7.334 1 6 2.703 6 5.6V6h2v-.801C8 3.754 8.797 3 10 3c1.203 0 2 .754 2 2.199V8H4c-.553 0-1 .646-1 1.199V17c0 .549.428 1.139.951 1.307l1.197.387C5.672 18.861 6.55 19 7.1 19h5.8c.549 0 1.428-.139 1.951-.307l1.196-.387c.524-.167.953-.757.953-1.306V9.199C17 8.646 16.352 8 15.8 8z"></path>
</symbol>
<symbol viewBox="0 0 20 20" id="locked">
<path d="M15.8 8H14V5.6C14 2.703 12.665 1 10 1 7.334 1 6 2.703 6 5.6V8H4c-.553 0-1 .646-1 1.199V17c0 .549.428 1.139.951 1.307l1.197.387C5.672 18.861 6.55 19 7.1 19h5.8c.549 0 1.428-.139 1.951-.307l1.196-.387c.524-.167.953-.757.953-1.306V9.199C17 8.646 16.352 8 15.8 8zM12 8H8V5.199C8 3.754 8.797 3 10 3c1.203 0 2 .754 2 2.199V8z"/>
</symbol>
<symbol viewBox="0 0 20 20" id="close">
<path d="M14.348 14.849c-.469.469-1.229.469-1.697 0L10 11.819l-2.651 3.029c-.469.469-1.229.469-1.697 0-.469-.469-.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-.469-.469-.469-1.228 0-1.697.469-.469 1.228-.469 1.697 0L10 8.183l2.651-3.031c.469-.469 1.228-.469 1.697 0 .469.469.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c.469.469.469 1.229 0 1.698z"/>
</symbol>
<symbol viewBox="0 0 20 20" id="large-arrow">
<path d="M13.25 10L6.109 2.58c-.268-.27-.268-.707 0-.979.268-.27.701-.27.969 0l7.83 7.908c.268.271.268.709 0 .979l-7.83 7.908c-.268.271-.701.27-.969 0-.268-.269-.268-.707 0-.979L13.25 10z"/>
</symbol>
<symbol viewBox="0 0 20 20" id="large-arrow-down">
<path d="M17.418 6.109c.272-.268.709-.268.979 0s.271.701 0 .969l-7.908 7.83c-.27.268-.707.268-.979 0l-7.908-7.83c-.27-.268-.27-.701 0-.969.271-.268.709-.268.979 0L10 13.25l7.418-7.141z"/>
</symbol>
<symbol viewBox="0 0 24 24" id="jump-to">
<path d="M19 7v4H5.83l3.58-3.59L8 6l-6 6 6 6 1.41-1.41L5.83 13H21V7z"/>
</symbol>
<symbol viewBox="0 0 24 24" id="expand">
<path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/>
</symbol>
</defs>
</svg>
<div id="swagger-ui"></div>
<script src="./swagger-ui-bundle.js"> </script>
<script src="./swagger-ui-standalone-preset.js"> </script>
<script src="./swagger-ui-init.js"> </script>
<style>
.swagger-ui .topbar .download-url-wrapper { display: none } undefined
</style>
</body>
</html>
Thank you in advance if you have some clues how to resolve this