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

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

In create-react-app, the source code is typically located in the src folder by default. If you want to change the name of the src folder to something else, you'll need to configure your project accordingly. However, this process might involve manual configuration changes, and it's not officially supported by create-react-app.

Here are general steps you can follow:

  1. Eject from Create React App (Optional): If your project is not ejected yet (you have not run npm run eject), you need to eject to have full control over the configuration.

    npm run eject

    Ejecting is a one-way operation, so make sure to commit any changes before proceeding.

  2. Modify Configuration Files: After ejecting, you'll have access to the configuration files in the config folder. You'll need to update several files:

    • config/paths.js: Change appSrc to your new folder name.
    • config/webpack.config.js: Update the paths related to the src folder.

  3. Update Scripts in package.json: Update the scripts in your package.json file to reflect the new folder structure. For example:

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

    Change the scripts to include the new folder name if necessary.

  4. Update Imports in Your Code: You'll need to update import statements in your code to reflect the new folder structure. For example, change:

    import App from './src/App';

    to:

    import App from './yourNewFolderName/App';

    Do this for all the import statements in your project.

  5. Restart the Development Server: After making these changes, restart your development server:

    npm start

Keep in mind that ejecting from create-react-app is a significant step, and you'll be responsible for maintaining and configuring your project's build setup. Before making such changes, consider whether it's necessary for your specific use case, and be aware of the implications. If the default project structure meets your needs, it's generally recommended to stick with it.

Examples

  1. Change src Folder Name in create-react-app:

    • React create-react-app change src folder name
    • Code:
      • Rename the src folder to newSrc.
      • Update package.json:
        "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] },
      • Update jsconfig.json:
        { "compilerOptions": { "baseUrl": "src", "paths": { "*": ["newSrc/*"] } } }
    • Description: This code renames the src folder to newSrc and updates necessary configurations in package.json and jsconfig.json.

  2. Update tsconfig.json for TypeScript:

    • React create-react-app change src folder TypeScript
    • Code:
      • Rename the src folder to newSrc.
      • Update package.json:
        "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] },
      • Update tsconfig.json:
        { "compilerOptions": { "baseUrl": "src", "paths": { "*": ["newSrc/*"] } } }
    • Description: For TypeScript projects, update tsconfig.json in addition to jsconfig.json and package.json.

  3. Change Folder Name and Import Paths:

    • React create-react-app change src folder import paths
    • Code:
      • Rename the src folder to newSrc.
      • Update package.json:
        "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] },
      • Update jsconfig.json:
        { "compilerOptions": { "baseUrl": "src", "paths": { "*": ["newSrc/*"] } } }
      • Update import paths in your components and files.
    • Description: This code changes both the folder name and import paths in the project.

  4. Change src Folder and Public URL:

    • React create-react-app change src folder public URL
    • Code:
      • Rename the src folder to newSrc.
      • Update package.json:
        "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "homepage": "/newSrc",
      • Update jsconfig.json:
        { "compilerOptions": { "baseUrl": "src", "paths": { "*": ["newSrc/*"] } } }
    • Description: This code changes the src folder and updates the public URL in package.json.

  5. Change Folder Name with ESLint Configuration:

    • React create-react-app change src folder ESLint
    • Code:
      • Rename the src folder to newSrc.
      • Update package.json:
        "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ], "settings": { "import/resolver": { "node": { "paths": ["newSrc"] } } } },
    • Description: This code changes the src folder and updates ESLint configuration for import paths.

  6. Update jsconfig.json for CRA without ejecting:

    • React create-react-app change src folder jsconfig without eject
    • Code:
      • Rename the src folder to newSrc.
      • Create a jsconfig.override.json file:
        { "compilerOptions": { "baseUrl": ".", "paths": { "*": ["newSrc/*"] } } }
      • Update package.json:
        "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] },
      • Update jsconfig.json:
        { "extends": "./jsconfig.override.json" }
    • Description: This code updates jsconfig.json without ejecting by using a separate jsconfig.override.json file.

  7. Use Custom Paths in jsconfig.json:

    • React create-react-app custom paths jsconfig
    • Code:
      • Rename the src folder to newSrc.
      • Update package.json:
        "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] },
      • Update jsconfig.json:
        { "compilerOptions": { "baseUrl": "./", "paths": { "@components/*": ["newSrc/components/*"], "@utils/*": ["newSrc/utils/*"] } } }
    • Description: This code sets up custom paths in jsconfig.json for organized imports.

  8. Change src Folder with Custom Babel Configuration:

    • React create-react-app change src folder Babel
    • Code:
      • Rename the src folder to newSrc.
      • Create a .babelrc file:
        { "plugins": [ [ "module-resolver", { "root": ["./"], "alias": { "@": "./newSrc" } } ] ] }
      • Update package.json:
        "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] },
    • Description: This code changes the src folder with a custom Babel configuration for aliases.

  9. Update Jest Config for Changed Folder Name:

    • React create-react-app change src folder Jest
    • Code:
      • Rename the src folder to newSrc.
      • Update package.json:
        "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "jest": { "roots": ["<rootDir>/newSrc"] }
    • Description: This code updates Jest configuration for the changed folder name.

  10. Change Folder Name with Custom Webpack Configuration:

    • React create-react-app change src folder Webpack
    • Code:
      • Rename the src folder to newSrc.
      • Create a config-overrides.js file:
        const path = require('path'); module.exports = function override(config, env) { config.resolve = { ...config.resolve, alias: { '@': path.resolve(__dirname, 'newSrc'), }, }; return config; };
      • Update package.json:
        "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] },
      • Install react-app-rewired:
        npm install react-app-rewired --save-dev
    • Description: This code changes the src folder with custom Webpack configuration using react-app-rewired.

More Tags

flutter-appbar brackets windows-shell registry cgi url-rewriting image-segmentation right-align certutil statefulwidget

More Programming Questions

More Electrochemistry Calculators

More Tax and Salary Calculators

More Organic chemistry Calculators

More Bio laboratory Calculators