Change/add Create-react-app Entry Point Or Location Of Index.js

I am trying to use create-react-app to create a simple web-app. I have moved the pages and components into separate directories under src labeled pages and components. I would like

Solution 1:

I used react-rewired to achieve something like this: https://github.com/timarney/react-app-rewired/issues/189

in my config-overrides.js

console.log("@@@@@@@@@@@@@@@@@@@@@@@");
console.log("@ using react-rewired @");
console.log("@@@@@@@@@@@@@@@@@@@@@@@");

module.exports = {
  // The Webpack config to use when compiling your react app for development or production.
  webpack: function(config, env) {
    // ...add your webpack config
    console.log("@@@@@@@@@@@");
    console.log("@ webpack @");
    console.log("@@@@@@@@@@@");
    console.log({config, env});

    if (env === 'development') {
      config.entry = config.entry.replace(new RegExp("index.ts$"), 'runApp.tsx');
      console.log("entry point changed:", config.entry);
    }

    return config;
  },
}

I needed to run on a different file but only when running the development server the link above has the full solution

Solution 2:

Try using npm run eject.

this will take all script from node_module/react-script in the project folder. There you will be able to access webpack.config.js file in config folder. you can search for html-webpack-plugin and get the access point. I have added my access point to config/paths.js and used as default access point which worked for me.

NOTE: make sure you don't have any different configuration setting as it gets very difficult to manage, if environment setup changes or doesn't match.