Azure Blob Storage Static Website React SPA routing fails after Webpack compression changes

Question

I'm working with a React Native Application web SPA, built with Webpack and hosted on Azure Blob Storage Static Website.

My issues began when I added the CompressionPlugin to speed up my build time and reduce my bundle size.

To optimize, I started configuring the CompressionPlugin to compress specific files, delete the original ones, and use a script to remove the .gz extension from the compressed files. Following are certain sections of my original Webpack configurations

Webpack module.exports output configuration:

output: {
  path: helpers.root("dist"),
  filename: "[name].[contenthash].js",
  chunkFilename: "chunk.[contenthash].js",
  clean: true,
},

Webpack CompressionPlugin configuration:

new CompressionPlugin({
    algorithm: "gzip",
    exclude: /env\//,
    test: /\.(js|json|xml|svg|txt|eot|ttf|css|html)$/,
    minRatio: Number.MAX_SAFE_INTEGER,
    deleteOriginalAssets: true,
}),

Webpack devServer configuration:

devServer: {
  static: { // Where static assets such as images are found
    directory: path.join(__dirname, "assets"),
  },
  host: "localhost",
  hot: true,
  port: 8090,
  compress: true, // gzip compression
  open: true,
},

Issue

When running the app locally with webpack serve --config config/webpack.development.js or http-server ./dist/ -g, everything works correctly, i.e., the client-side routing works as it should, and no errors.

However, after building and deploying to Azure, navigating directly to a route like /about results in a 404 Page Not Found error instead of the expected client-side routing taken over by the React Router.

Questions

What could be causing Azure Blob Storage Static Website to break client-side routing after applying compression and Webpack configuration changes?

• Is the removal of publicPath affecting routing?
• Does deleting original files cause issues?
• Can Azure Blob Storage be configured to support React Router?

Edit and answer my question:

After testing and looking through the documentation, I found the answers to my issues.

• Don't host both compressed and non-compressed versions of your built files on Azure; if you do, Azure will only serve the non-compressed files. (As per Azure documentation, only non-compressed file extensions should be served directly.) I.e., add clean: true to your module.exports output configuration.
• If you compress your files, you must remove the .gz extension either in the build steps or as a script or function on Azure. Read more here
• You must manually change the content-encoding for all the compressed files you use, as Azure can't handle this dynamically with Azure Static Website from Blob Storage. Read more here
• The routing will break when using Azure's Static Website with Blob Storage because it can't handle client-side routing as it is a serverless hosting option without a CDN. So when a route is accessed that does not exist, have the index.html or what you use for the main HTML file act as the 404 page to make it so that the React Router picks up and handles the routing when the page "404" page gets accessed. Microsoft does not document this anywhere, but the 404 page can't be compressed. Thanks to the answer by @Jura here.
  • Another option is to specify a fallback route (read Microsoft's documentation about it here, and in other Stack Overflow questions here) in a staticwebapp.config.json file as the following:

{
  "navigationFallback": {
    "rewrite": "/index.html"
  }
}

• To make the routing work on Azure, remember to have the Webpack's module.exports output set to publicPath: "/".
• To make the SPA routing work locally with the WebPack devServer, you need to remember to have disableDotRule set to true in your devServer configuration:

historyApiFallback: {
    disableDotRule: true, // Fixes issues with dots in paths
},

---

Updated Webpack configurations that made my setup work locally with Webpack's devServer and when building with Webpack and hosting it on Azure Static Website on Blob Storage.

Webpack base config:

module.exports = {
  target: "web",
  entry: "./src/index.js", // Root file. The config finds all JS and React files imports starting from the entry point
  output: {
    path: helpers.root("dist"),
    filename: "[name].[contenthash].js",
    chunkFilename: "chunk.[contenthash].js",
    publicPath: "/",
    clean: true,
  },

Webpack's devServer:

module.exports = webpackMerge(commonConfig, {
  mode: "development", // Sets development default values for several config options
  devtool: "eval-cheap-module-source-map",
  stats: "normal",
  devServer: {
    static: ["assets"], // Serve static files from the assets directory
    host: "localhost",
    hot: true, // Enables Hot Module Replacement (HMR)
    port: 8090,
    compress: true, // Gzip compression
    open: true,
    historyApiFallback: {
      disableDotRule: true, // Fixes issues with dots in paths
    },
  },

Webpack CompressionPlugin

plugins: [
  new CompressionPlugin({
    algorithm: "gzip",
    test: /\.(js|json|xml|svg|txt|eot|ttf|css|html|)$/,
    exclude: [/env\//, /index\.html/], // Since Azure static hosting doesn't allow 404 pages to be compressed, index.html needs to be uncompressed
    minRatio: Number.MAX_SAFE_INTEGER,
    deleteOriginalAssets: true,
  }),