React: How to run "react-scripts start" with a different root?

Question

For special reasons I want to share the package.json file between two folders web (the react app) and mobile:

▸ mobile/
▸ node_modules/
▾ web/
  ▸ public/
  ▸ src/
    README.md
  package-lock.json
  package.json
  yarn.lock

In my package.json file I've added this: "web-start": "react-scripts start", under scripts. However, when I run it in the root folder (/Users/edmund/Documents/src/banana-client) I get this:

➜  banana-client git:(master) ✗ yarn web-start
yarn web-start v0.24.6
$ react-scripts start web
Could not find a required file.
  Name: index.html
  Searched in: /Users/edmund/Documents/src/banana-client/public
error Command failed with exit code 1.

Is there a way I can add a root directory?

Answer 1

For this particular use case, I would recommend you to go ahead with Yarn workspaces.

Using Yarn workspaces, you can have multiple projects inside a single repository with a main package.json file at root level that projects share and project level package.json that they don't share and use individually.

Running yarn install will install all your dependencies at the root level, which is configurable if you don't want some packages to install at root.

You can have scripts in root that can help you run internal projects in that workspace.

So your final project structure will look something like this:

- project_root
  - web
    - node_modules
    - package.json
  - mobile
    - node_modules
    - package.json

  - node_modules
  - package.json

Learn more about Yarn workspaces here: https://yarnpkg.com/lang/en/docs/workspaces/

Look at this example here to understand it's basic usage: https://github.com/pedronauck/yarn-workspaces-example

Answer 2

I'd agree that Yarn workspaces may help you accomplish what you are after. Otherwise, you will have to eject as the configuration for the appIndexJs (set to /src/index.js) is set in config/paths.js in the react-scripts package. Once ejected, you can modify the config/paths.js variable appIndexJs to accommodate a varying appIndex.