Create React App V2 - Multiple entry points

Question

I\'m trying to build a React app with 2 entry points, one for the App and one for the Admin panel.

I\'m starting with Create React App V2 and following this gitHub issue

Answer 1

I realised that setting filename in HTMLWebpackPlugin to appPublic or adminPublic was incorrect and it should be app/index.html admin/index.html.

However where I would like 2 separate folders in the build folder, one for the app and the other for the admin app, using this method requires more complexity because there is no entry variable in webpack that you can use to set the destination path. For example I would need to be able to do something like [entry]/static/js/[name].[contenthash:8].chunk.js. I think one way to do this would be to use Webpack MultiCompiler.

However rather than doing this this I've passed the entry point as an environment variable in package.json, adding REACT_APP_ENTRY= like so:

  "scripts": {
    "start-app": "REACT_APP_ENTRY=app node scripts/start.js",
    "build-app": "REACT_APP_ENTRY=app node scripts/build.js",
    "start-admin": "REACT_APP_ENTRY=admin node scripts/start.js",
    "build-admin": "REACT_APP_ENTRY=admin node scripts/build.js",
    "test": "node scripts/test.js"
  },

In start.js I added const isApp = process.env.REACT_APP_ENTRY === 'app'; at the top:

'use strict';

process.env.BABEL_ENV = 'development';
process.env.NODE_ENV = 'development';

const isApp = process.env.REACT_APP_ENTRY === 'app';

And updated where the port is being set, this is so I can run both development servers at the same time without a clash:

const DEFAULT_PORT = parseInt(process.env.PORT, 10) || (isApp ? 3000 : 3001);
const HOST = process.env.HOST || '0.0.0.0';

Then at the top of paths.js add const isApp = process.env.REACT_APP_ENTRY === 'app';:

const envPublicUrl = process.env.PUBLIC_URL;
const isApp = process.env.REACT_APP_ENTRY === 'app';

And finally update the paths depending on the env variable set:

module.exports = {
  dotenv: resolveApp('.env'),
  appPath: resolveApp('.'),
  appBuild: isApp ? resolveApp('build/app') : resolveApp('build/admin'),
  appPublic: isApp ? resolveApp('public/app') : resolveApp('public/admin'),
  appHtml: isApp ? resolveApp('public/app/index.html') : resolveApp('public/admin/index.html'),
  appIndexJs: isApp ? resolveModule(resolveApp, 'src/app') : resolveModule(resolveApp, 'src/admin'),
  appPackageJson: resolveApp('package.json'),
  appSrc: resolveApp('src'),
  appTsConfig: resolveApp('tsconfig.json'),
  yarnLockFile: resolveApp('yarn.lock'),
  testsSetup: resolveModule(resolveApp, 'src/setupTests'),
  proxySetup: resolveApp('src/setupProxy.js'),
  appNodeModules: resolveApp('node_modules'),
  publicUrl: getPublicUrl(resolveApp('package.json')),
  servedPath: getServedPath(resolveApp('package.json')),
};

I think this method as well as being far simpler is superior for this use case as it allows the flexibility to compile only the app or only the admin rather than forcing you to compile both when only one has been changed. I can run both yarn start-app and yarn start-admin at the same time with the separate apps running on different ports.