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?

Do you use ejected create-react-app? react-scripts is a part of CRA... — Andy Theos
– Andy Theos, Commented Aug 21, 2018 at 13:18

Dangling Cruze · Accepted Answer · 2018-08-22 18:04:30Z

2

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

answered Aug 22, 2018 at 18:04

Dangling Cruze

3,4533 gold badges37 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mahmoud Mousa Hamad Over a year ago

The question is about making react-scripts start search for index.js in a different directory not about using Yarn workspaces.

user2372736 · Accepted Answer · 2019-02-20 18:34:28Z

1

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.

answered Feb 20, 2019 at 18:34

user2372736

212 bronze badges

Comments

MarkusL · Accepted Answer · 2020-09-25 09:23:46Z

0

Adding this workaround solved the same problem for me:

 "web-start": "cd web && react-scripts start"

answered Sep 25, 2020 at 9:23

MarkusL

1571 silver badge6 bronze badges

1 Comment

Siva Tumma Over a year ago

I don't think this deserves a downvote except that it wont work that way because CRA tightly "PRESUMES" base directory. which means its config presumes node_modules is present in base directory. @MarkusL guessed right but it is wrong due to CRA style.

treckstar · Accepted Answer · 2022-06-12 13:44:51Z

0

Building on above answer just do:

"web-start": "cd web && npm start"

edited Jun 12, 2022 at 13:44

treckstar

2,1126 gold badges22 silver badges32 bronze badges

answered Jun 10, 2022 at 17:52

Anandraj Manickam

11

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related