How to structure multiple react apps and still share code + assets - reactjs

Question

I've built a react app which uses the following structure;
node_modules
src/
app/
index.ts
index.html
...
server/
index.ts
...
node_modules/ // using the Alle pattern here
#<custom_packages>
api
components
Now I need to add a new app. Which runs on a different domain, but should be able to use as much shared code as it can, inc our custom packages. My first attempt was to do the following;
node_modules
src/
app1/
index.ts
index.html
...
app2/
index.ts
index.html
...
server/
index.ts // Uses ENV_VAR to serve a different bundle
...
node_modules/
#<custom_packages>
api
components
The problem I'm now running into, is that both apps generate their own assets etc. But i would like to share them between apps so the client can cache them. I could decide not to use webpack to build the assets and just put them in a static folder, but then I lose the support of the offline-plugin in webpack.
Also we decided to use a mono-repo in this case. This is making CI significantly harder, but managing shared code a lot easier. I'm kind of wondering if there are any seasoned developers that have faced this situation more often.
Basically, how would you structure 2 react apps that should share as much code as possible?

Answer 1

I needed a similar setup but for Angular. Here is the Webpack config that I have (I left only relevant parts):
const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const apps = [
{
name: 'app1',
baseUrl: '/app1'
},
{
name: 'app2',
baseUrl: '/app2'
}
];
module.exports = function (args = {}) {
const isDev = !args.PROD;
const distPath = 'dist';
var config = {};
config.entry = {};
apps.forEach(function (app) {
config.entry[getAppBundleName(app)] = './src/apps/' + app.name + '/main.ts';
});
config.output = {
path: root(distPath),
filename: '[name].js',
chunkFilename: '[name].[chunkhash].js',
publicPath: '/dist/'
};
config.resolve = {
extensions: ['.ts', '.js', '.json'],
modules: [root('src'), root('node_modules')]
};
config.module = {
rules: [
// Add your loaders here
]
};
config.plugins = [
// Add your plugins here
// This enables tree shaking of the vendor modules
new CommonsChunkPlugin({
name: 'vendor',
chunks: ['admin'].concat(apps.map(getAppBundleName)),
minChunks: module => /node_modules/.test(module.resource)
}),
new CommonsChunkPlugin({
name: 'shared',
chunks: ['admin'].concat(apps.map(getAppBundleName)),
minChunks: module => /src(\\|\/)shared/.test(module.resource)
})
];
apps.forEach(function (app) {
var otherApps = apps.slice();
var appItemIndex = otherApps.indexOf(app);
if (appItemIndex > -1) {
otherApps.splice(appItemIndex, 1);
}
config.plugins.push(new HtmlWebpackPlugin({
template: 'index_template.html',
title: app.name,
filename: getAppDevServerHtmlFileName(app),
excludeChunks: otherApps.map(getAppBundleName),
chunksSortMode: 'manual',
chunks: ['vendor', 'shared', getAppBundleName(app)],
inject: 'head',
metadata: {
baseUrl: app.baseUrl
}
}));
});
config.devServer = {
port: 4200,
stats: stats,
historyApiFallback: {
rewrites: apps.map(function (app) {
return {
from: new RegExp('^' + app.baseUrl),
to: '/dist/' + getAppDevServerHtmlFileName(app)
}
}),
},
};
return config;
}
function getAppBundleName(app) {
return app.name;
}
function getAppDevServerHtmlFileName(app) {
return app.name + '_index.html';
}
function root(args) {
args = Array.prototype.slice.call(arguments, 0);
return path.join.apply(path, [__dirname].concat(args));
}`
In my case, I have the following folder structure, which is similar to yours:
node_modules
src/
apps/
app1/
...
main.ts
app2/
...
main.ts
shared/
shared-module1/
...
shared-module2/
...
index.ts
...
webpack.config.js
And here is the output after compilation in the dist folder:
dist/
app1.js
app1_index.html
app2.js
app2_index.html
vender.js
shared.js
As you can see, vendor.js and shared.js contain the shared code between the apps.