CODEWITHSUNDEEP
reactjsnpm
bigpotato
bigpotato

Reputation: 27537

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

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?

Upvotes: 21

Views: 13252

Answers (4)

Anandraj Manickam
Anandraj Manickam

Reputation: 11

Building on above answer just do:

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

Upvotes: 0

MarkusL
MarkusL

Reputation: 157

Adding this workaround solved the same problem for me:

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

Upvotes: 0

user2372736
user2372736

Reputation: 21

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.

Upvotes: 1

Dangling Cruze
Dangling Cruze

Reputation: 3443

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

Upvotes: 2

Related Questions