node express Server does not serve compressed static files with brotli and gzip compression

Question

I have react app with SSR implementation using react loadable SSR addon npm package.

I am following this tutorial A Tale of Brotli Compression to implement brotli and gzip compression

I can see .br and .gzip compressed files in build folder. but these file do not serve when I check on localhost, I am not sure whether it is because I am checking on localhost development server or something else.

Followed below steps:

webpackConfig/plugins.js

const CompressionPlugin = require('compression-webpack-plugin');
const BrotliPlugin = require('brotli-webpack-plugin');

  new CompressionPlugin({
    filename: '[path].gz[query]',
  }),
  new BrotliPlugin({
    asset: '[path].br[query]',
    test: /\.(js|css|html|svg)$/,
    threshold: 10240,
    minRatio: 0.8,
  }),

server/index.js

import expressStaticGzip from 'express-static-gzip';
import path from 'path';

const server = express();
server.use(cors());
server.use(bodyParser.json());
server.use(bodyParser.urlencoded({ extended: false }));
server.use(cookieParser());
server.use(
  '/static*',
  // '/build/client',
  expressStaticGzip(path.join(paths.clientBuild, paths.publicPath), {
    enableBrotli: true,
    orderPreference: ['br', 'gz'],
    setHeaders(res) {
      res.setHeader('Content-Encoding', 'br');
      res.setHeader('Cache-Control', 'public, max-age=31536000');
    },
  })
);

server.use(
  '/static*',
  expressStaticGzip(path.join(paths.serverBuild, paths.publicPath), {
    enableBrotli: true,
    orderPreference: ['br', 'gz'],
    setHeaders(res) {
      res.setHeader('Content-Encoding', 'br');
      res.setHeader('Cache-Control', 'public, max-age=31536000');
    },
  })
);
server.use(compression());

start.js

// app.use('/static', express.static(paths.clientBuild));

commented above code in start.js.

In the browser, I see the same size of static JS and CSS files as before.

UPDATE:

After trying a few things I understood that I need to make changes in start.js and not server/index.js

Therefore to test if things are working as expected I added a middleware to test specific use case:

 app.get('/static*', function (req, res, next) {
    console.log('req buncle url', req.url)
     req.url = req.url + '.gz';
    res.set('Content-Encoding', 'gzip');
    res.set('Content-Type', 'text/javascript');
    next();
  });

The above code worked as expected, I got compressed bundle.js file in a browser. but same does not work with express-static-gzip.

FYI: My build folder is on root and has below structure:

build/client/static/

I am using google chrome. and it accepts gzip and brotli encoding. I checked with specific route for static file and it is serving correctly app.get('/static*', function (req, res, next) { console.log('req buncle url', req.url) req.url = req.url + '.gz'; res.set('Content-Encoding', 'gzip'); res.set('Content-Type', 'text/javascript'); next(); }); — Always_a_learner, Aug 24 '20 at 10:34
@MohamedRamrami thanks, I have made an update if that helps. — Always_a_learner, Aug 24 '20 at 10:39
I had CI/CD setup for Azure web app on `Linux/node` and was facing this issue on a new production web app that was identical to dev web app. On the dev web app all was working fine & `.gz` files were being served. Stop/Start on the production web app solved my issue. Just fyi for anyone who might be facing this issue, happened to see this when I was left scratching my head — Sangeet Agarwal, Jul 22 '22 at 13:41

score 1 · Answer 1 · answered Aug 31 '20 at 03:51

I believe issue is related to the paths that you are providing expressStaticGzip

Here is a tutorial that provides you with more detail information on directory structure and setting this up. https://codeburst.io/express-brotli-webpack-a60773e7ec6c

 expressStaticGzip(path.join(__dirname)

node express Server does not serve compressed static files with brotli and gzip compression

1 Answers1