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

Question

I'd like to know if it's possible using react-script to rename src to something else like app folder

Answer 1

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;
    },
}

Answer 2

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.

Answer 3

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.js 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.

Answer 4

I know this is an old question but I'm still gonna post my solution since it might help someone.

I got it working by doing the following:

1. Run npm run eject. This exposes some internal configuration stuff from create-react-app
2. Open your package.json and edit the respective regexes under jest.collectCoverageFrom and jest.testMatch to match your test path
3. Alter the paths for appSrc, appIndexJs and testsSetup in the config/paths.js file

Answer 5

T0astBread's answer is nearly perfect, but there's an additional reference to "src" that he missed inside modules.js.

Specifically:

    return {
      src: paths.appSrc,
    };

needs to be changed to

    return {
      newSrcName: paths.appSrc,
    };

Answer 6

This is a great question and a valid scenario for changing this folder name is when migrating old react projects to CRA.

Here's another approach I found that breaks less things:

Create a symlink with:

ls -s ./app src

Then add this in config-overrides.js, to allow webpack to process the symlink:

module.exports = (config, ...rest) => {
    return { ...config, resolve: { ...config.resolve, symlinks: false } };
};

Then install react-app-rewired and add this to your package.json:

"start": "react-app-rewired start",

Answer 7

While Cong Dan Luong's answer is correct as far as renaming the folder goes, it will break testing with jest. You need to expand the config-overrides.js module.exports part with the following:

module.exports = {
  jest: function(config) {
    config.collectCoverageFrom = ['client/**/*.{js,jsx,ts,tsx}', '!client/**/*.d.ts'];
    config.testMatch = [
      '<rootDir>/client/**/__tests__/**/*.{js,jsx,ts,tsx}',
      '<rootDir>/client/**/*.{spec,test}.{js,jsx,ts,tsx}',
    ];
    config.roots = ['<rootDir>/client'];
    return config;
  },

  // The paths config
  paths: function(paths, env) {
    paths.appIndexJs = path.resolve(__dirname, 'client/index.js');
    paths.appSrc = path.resolve(__dirname, 'client');
    return paths;
  },
};

In my above example I am using 'client' instead of 'src'. npm test now works.

Answer 8

Perhaps a symbolic link might address your reasons for wanting to do this:

ln -s ./src/ ./app

The src folder will remain but you can work with it as if it was the app folder.

If, like me you're using vscode you can also do:

Cmd-shift-p search workspace settings, and add the following:

{
  "files.exclude": {
      "src/": true
  }
}

You could do similarly with other editors

Answer 9

Create file in root of your project, insert this code and run.

const fs = require('fs');
const path = './node_modules/react-scripts/config/paths.js';
const folder = 'app';

fs.readFile(path, 'utf8', (err, data) => {
 if (err) throw err;
 data = data.replace(/src/g, folder);
 fs.writeFile(path, data, 'utf8');
});