How do i Change Create react app folder structure

Question

I have come across a situation where I need to change the folder structure of a react project which has been created using npx create-react-app. the reason to do this is I need to pull a part of the project (src folder and public folder) from a different GitHub repo. To do so I'm going to use the GitHub submodule. As far as I know, we can't use multiple folders pull from one repo with the GitHub submodule. So I need to put src and public folder into a new folder and make it a submodule. what changes do I need to do in the react app in order to achieve this or is there any other option to get this done. Thanks in advance!

You'll just need to change the imports inside the components. If your App.jsx component for example uses a <Navigation> Component, you'd need to change the paths of that import — Tim Gerhard

Chuck Chuck · Accepted Answer · 2020-08-15T00:33:49

react-app-rewired enables changing some of Create React App's webpack config with a config-overrides.js file in your root directory. I imagine it'd be something like this for your case:

const path = require('path');

module.exports = {
    paths: function (paths, env) {        
        paths.appIndexJs = path.resolve(__dirname, 'submodule/src/index.js');
        paths.appSrc = path.resolve(__dirname, 'submodule/src');
        paths.appPublic = path.resolve(__dirname, 'submodule/public'),
        paths.appHtml = path.resolve(__dirname, 'submodule/public/index.html'),
        return paths;
    },
}

There are additional paths used by CRA, such as testsSetup, that may be relevant.

How do i Change Create react app folder structure

1 Answers