Swagger UI Express plugin issue with webpack bundling in production mode

Question

I have included swagger-ui-express plugin in my node express REST API. While bundling with webpack in production mode, I am receiving as error such as SwaggerUIBundle is not defined. Without webpack my app is working fine. Can someone help me on configuring webpack for swagger-ui-express

Answer 1

Basically, there's still a known issue on swagger-ui-express when it comes to Webpack. So there is still no official fix for it. For the workaround, we include the dist artifacts of swagger-ui-express to our build artifact (done by webpack) and deploy it together with our server.js (or whatever is your main file).

You need to install CopyWebpackPlugin

npm install copy-webpack-plugin --save-dev

And include this configuration to your webpack.config

node: {
    __dirname: false
},
plugins: [
    new CopyWebpackPlugin({
        patterns: [
            './node_modules/swagger-ui-dist/swagger-ui.css',
            './node_modules/swagger-ui-dist/swagger-ui-bundle.js',
            './node_modules/swagger-ui-dist/swagger-ui-standalone-preset.js',
            './node_modules/swagger-ui-dist/favicon-16x16.png',
            './node_modules/swagger-ui-dist/favicon-32x32.png'
        ]
    })
]