How to add multiple entry points to CRA

user_10795348 0
Viewed 3394

I have a normal CRA not ejected. I want to add a way that when I hit a certain URL it loads a different public/index.html page and then reactdom renders a "different" Main component to start the app

Is this possible without ejecting and how would I do it?

or

If I do eject, what is the most simple way to do this?

Google doesn't seem to render much helpful stuff

create-react-app reactjs
1 Answers

Inorder to have multiple entry points you need to change the webpack configuration of create-react-app

You can use react-app-rewired to override the existing webpack configuration of create-react-app, If not you need to eject from create-react-app and change the configuration

Here is a link for discussion regarding the same

Four steps to add multiple entry points to create-react-app (say we add an admin.html):

  1. Eject the project

    npm run eject

  2. Add multiple entry to webpack.config.dev.js

    entry: {
 index: [
  require.resolve('react-dev-utils/webpackHotDevClient'),
  require.resolve('./polyfills'),
  require.resolve('react-error-overlay'),
  paths.appIndexJs,
 ],
 admin:[
   require.resolve('react-dev-utils/webpackHotDevClient'),
   require.resolve('./polyfills'),
   require.resolve('react-error-overlay'),
   paths.appSrc + "/admin.js",
 ]
},
output: {
  path: paths.appBuild,
  pathinfo: true,
  filename: 'static/js/[name].bundle.js',
  chunkFilename: 'static/js/[name].chunk.js',
  publicPath: publicPath,
  devtoolModuleFilenameTemplate: info =>
  path.resolve(info.absoluteResourcePath),
 },

  3. Modify HtmlWebpackPlugin add a new plugin node:

        new HtmlWebpackPlugin({
      inject: true,
      chunks: ["index"],
      template: paths.appHtml,
    }),
    new HtmlWebpackPlugin({
      inject: true,
      chunks: ["admin"],
      template: paths.appHtml,
      filename: 'admin.html',
    }),

    4.webpack Dev Server rewrite urls /config/webpackDevServer.config.js:

     historyApiFallback: {
  disableDotRule: true,
  rewrites: [
    { from: /^\/admin.html/, to: '/build/admin.html' },
  ]
 }
user_98972230
Related