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

Antistrophe

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'
        ]
    })
]

Beshrew

I hope this works. Same problem and its 2024. – Led

@Led have you tried it? Prolly you can update us. – Beshrew

Answer 2

My reputation is low, so adding to the conversation as a new answer. Rich's answer is correct. It just needs a little more guiding.

If you are loading Swagger UI into your ExpressJS application using code like the following:

app.use('/api-docs', swaggerUi.serve, swaggerUI.setup(swaggerDocs));

Then the CopyWebpackPlugin configuration should include the following patterns:

    { from: 'node_modules/swagger-ui-dist/favicon-32x32.png', to: 'api-docs/', toType: 'dir' },
    { from: 'node_modules/swagger-ui-dist/favicon-16x16.png', to: 'api-docs/', toType: 'dir' },
    { from: 'node_modules/swagger-ui-dist/swagger-ui.css', to: 'api-docs/', toType: 'dir' },
    { from: 'node_modules/swagger-ui-dist/swagger-ui-bundle.js', to: 'api-docs/', toType: 'dir' },
    { from: 'node_modules/swagger-ui-dist/swagger-ui-standalone-preset.js', to: 'api-docs/', toType: 'dir' },

Finally, in your ExpressJs app setup, make sure you include a route configuration to the static files. Something like the following will work:

app.use('/api-docs', express.static('dist/api-docs'));

For me, I had to include the static config before I make the call to configure Swagger UI, so the proper placement would be:

app.use('/api-docs', express.static('dist/api-docs'));
app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocs));

Musaceous

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review – Sped

Answer 3

@Rich The solution still works, you just have to refactor it in the following way:

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

Lepidus