How to serve svgz files with webpack dev server?

[Friksel]

In a project we've converted SVG files into SVGZ (gzipped svg) with the webpack CompressionPlugin. This works great whith the transpiled project as served on an apache server with .htaccess using

AddType 'image/svg+xml' .svg .svgz
AddEncoding gzip svgz

However, webpack dev server clearly doesn't use the .htaccess config and so browsers are failing to understand the svgz files as no encoding has been set to gzip on the svgz file type.

There is a headers option in the devserver config object, but AFAIK that's for all files and cannot be made conditionally. I also don't know what header to set exactly.

I tried the following, but it didn't work:

    config.devServer = {
        host: 'localhost',
        port: 8080,
        static: buildPath,
        compress: false, 
        proxy: {
            '*.svgz': {
                target: 'http://localhost:8080',
                headers: {
                    'Content-Encoding': 'gzip',
                },
            },
        },
    };

How can we set the encoding of already zipped files to gzip on svgz files when served with webpack dev server so browsers know they need to uncompress them?

Thanks in advance!

[alexander-akait]

You can try to use https://github.com/tkoenig89/express-static-gzip, using https://webpack.js.org/configuration/dev-server/#devserversetupmiddlewares

[Friksel]

If you don't need something special why not use static (we use https://github.com/expressjs/serve-static under the hood)

Alright, so basically you're saying we just cannot set headers to files within the devserver config? I'm very surprised.
I'll take a look at that serve-static. Bummer that it's yet another lib to dive into for just setting file headers, but if that's the way I'll take a look at it. Thanks for the tip.

Browsers don't uncompress svgz, your server does it, you just prepare files (adding .*z) to avoid overhead on server side due compressing time

You aren't serious here right? Of course the server is NOT uncompressing svgz files. It wouldn't make any sense if a server would uncompress. The whole point of svgz and gzip in general is to be able to use compressed files over the line to make files transmit faster. And that's also why we need to set the content-encoding type to gzip.

Sorry, but it's starting to look like you don't understand the svgz file format and gzip in general. I am surprised about that as your title says 'Collaborator'. So probably you made a typo somewhere.

No offence, but at least now it's clear we're not on the same wavelength here and we're having miscommunication.
Thanks for your effort to help tho and have a nice day!

[alexander-akait]

Sorry, I was misleading, really, I told about image.svg.gzip (i.e. precompress files for server), I don't know why did I think of them, maybe I should have read more carefully.

Why don't handle svgz files using server-static, no headers? Also you can add additional headers using https://github.com/expressjs/serve-static#setheaders, it is built-in middleware in dev server and you can set them using https://webpack.js.org/configuration/dev-server/#staticoptions

[Friksel]

@alexander-akait Sorry for the late response. For some reason I don't get updates on this thread and the times I watched you hadn't responded yet.

Sorry, I was misleading, really, I told about image.svg.gzip (i.e. precompress files for server), I don't know why did I think of them, maybe I should have read more carefully.

No worries.

Why don't handle svgz files using server-static, no headers? Also you can add additional headers using https://github.com/expressjs/serve-static#setheaders, it is built-in middleware in dev server and you can set them using https://webpack.js.org/configuration/dev-server/#staticoptions

I'm completely new to that server-static and was hoping (and still am) that it's not needed to use yet another lib for something so 'simple' like just setting file headers for a file extension. Especiallay because it didn't seem to be that hard to set headers with devserver for all files and I only need to be able to filter out the extension and leave all other files as is.

If I have more time I'll dive into that server-static. Thanks for taking the time to help!

[alexander-akait]

I'm completely new to that server-static and was hoping (and still am) that it's not needed to use yet another lib for something so 'simple' like just setting file headers for a file extension. Especiallay because it didn't seem to be that hard to set headers with devserver for all files and I only need to be able to filter out the extension and leave all other files as is.

In theory we can provide url in setHeaders, anyway we support custom middlewares, so your solution should work too, do you have some problems with it?

[Friksel]

@alexander-akait For some reason I don't get I don't receive any notification on your messages, so I just find out (again) that you reacted 6 days ago. This is inconvenient. So sorry for the late response. I wasn't aware of your response.

Whish I could give you the answer to it, but it's so busy here last weeks with several projects at once and several issues in external libs and higher priorities etc, that I couldn't find the time for this yet. I'll let you know if I know more. Thanks again!