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.