How do I change `src` folder to something else in create-react-app

react-app-rewired allows for this exact customization.

1

Install react-app-rewired as a dev dependency:

npm install --save-dev react-app-rewired

2

In package.json, change these lines

"scripts": {
    "react-start": "react-scripts start",
    "react-build": "react-scripts build",
    "react-test": "react-scripts test",
    ...
}

to

"scripts": {
    "react-start": "react-app-rewired start",
    "react-build": "react-app-rewired build",
    "react-test": "react-app-rewired test",
    ...
}

3

Create a config-overrides.json file in your project directory root with the following contents:

const paths = require('react-scripts/config/paths')
const path = require('path')

// Make the "app" folder be treated as the "src" folder
paths.appSrc = path.resolve(__dirname, 'app')
// Tell the app that "src/index.js" has moved to "app/index.js"
paths.appIndexJs = path.resolve(__dirname, 'app/index.js')

Now your app folder is the new src!

---

You can also customize many other things, such as the name of the "public" folder:

paths.appPublic = path.resolve(__dirname, 'subfolder/public')
paths.appHtml = path.resolve(__dirname, 'subfolder/public/index.html')

And you can also change the location of package.json and node_modules. See here for the full list.

You can use react-app-rewired to override react paths configuration. In my case, I can change the paths in config-overrides.js file

const path = require('path');

module.exports = {
    paths: function (paths, env) {        
        paths.appIndexJs = path.resolve(__dirname, 'mysrc/client.js');
        paths.appSrc = path.resolve(__dirname, 'mysrc');
        return paths;
    },
}

Not sure if this answers your question but I'll give it a shot. My directory structure looks like this:

/root
--/app
----/build
----/public
------index.html
----/src
------index.js
app.js
package.js

My /root/package.json has this in it:

  "scripts": {
    "build": "cd app && npm run build",
    "start": "node app.js",
    "serve": "cd app && npm run start"
  },
  "dependencies": {
    "express": "^4.8.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-scripts": "^1.0.17"
  },

and my /root/app/package.json looks like this:

  "scripts": {
    "build": "react-scripts build",
    "start": "set PORT=3000 && react-scripts start"
  },
  "dependencies": {
    "react-scripts": "^1.0.17"
  }

To run the development version of Reactjs, in the /root I can just npm run serve to serve up the dev version.

I am using node and express, so to run the production version of Reactjs, in the /root I can just npm run build to create the /root/app/build directory. I have a router that looks like this:

var options = {root : config.siteRoot + '/app/build'};

mainRte.all('/', function(req, res) {
    console.log('In mainRte.all Root');
    res.sendFile('index.html', options);
});

so when I run /root/app.js in node and surf to "/" it opens up /root/app/public/index.html and then /root/app/index.js.

Hopefully that helps.