Adding a ReactJS app to any HTML page with minimal output files

138 views Asked by At

We have a small ReactJS app that needs to be shared across multiple different sites in our enterprise. It's a global navigation bar. Some of our apps are HTML, ASP.Net, and even classic ASP. Our approach is to simply allow teams to reference our JS scripts and throw a div on the page and let it run.

I've started down the road of using create-react-app with craco to get our output as simple as possible. For instance, we removed the hash name from the JS files, because we don't want all teams having to update their references on each build. We are managing cache-busting in S3/Cloudfront.

Is there a best practice to have a React App output to

build
  - globalnav.js
  - globalnav.css

1 or 2 files per would be okay, for the sake of performance, although these are very small files, to begin with.

I got it close with

const path = require('path');

module.exports = {
  webpack: {
    configure: {
      optimization: {
        runtimeChunk: false,
        splitChunks: {
          cacheGroups: {
            default: false,
            commons: {
              test: /[\\/]node_modules[\\/]/,
              name: 'vendors',
              filename: 'globalnav-vendors.js',
            }
          }
        }
      },
      output: {
        filename: 'globalnav-main.js',
        path: path.resolve(__dirname, 'build')
      }
    }
  }
}

The CSS file still goes to /build/static/css/vendors.hash.chunk.css so I'm using an ugly mv command after the build to move it to /build/globalnav.css. But now I'm missing icon fonts.

0

There are 0 answers