Unable to run react js project

Question

I have a project build using react js I want to execute it locally

What I have done so far :

1) installed node.js (windows 64 bit)

2) Followed till Step 3 from https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm

Now I have

1) c://program files /nodejs/node_modules

2) Desktop/reactApp/node_modules

I places my project folder inside reactApp/ . so package.json is at reactApp/package.json

now when i try to run npm start

C:\Users\xxx\Desktop\reactApp>npm start

> liquid@0.1.0 start C:\Users\jitendra\Desktop\reactApp
> PORT=8080 react-scripts start

'PORT' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! liquid@0.1.0 start: `PORT=8080 react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the liquid@0.1.0 start script 'PORT=8080 react-scripts start'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the liquid package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     PORT=8080 react-scripts start
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs liquid
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls liquid
npm ERR! There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\jitendra\AppData\Roaming\npm-cache\_logs\2017-05-03T08_13_40_048Z-debug.log

Here is my package.json file

{
  "name": "liquid",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {},
  "dependencies": {
    "bootstrap": "^4.0.0-alpha.6",
    "chart.js": "^2.5.0",
    "google-map-react": "^0.23.0",
    "lodash": "^4.17.2",
    "moment": "^2.18.1",
    "prop-types": "^15.5.8",
    "react": "^15.5.4",
    "react-chartjs-2": "^2.0.5",
    "react-dom": "^15.5.4",
    "react-redux": "^5.0.1",
    "react-router": "^2.8.1",
    "react-router-redux": "^4.0.5",
    "react-scripts": "^0.9.5",
    "react-sortable-tree": "^0.1.17",
    "react-table": "^5.5.3",
    "reactstrap": "^4.3.0",
    "redux": "^3.6.0",
    "redux-logger": "^2.7.4",
    "redux-thunk": "^2.1.0",
    "whatwg-fetch": "^2.0.1"
  },
  "scripts": {
    "start": "PORT=8080 react-scripts start",
    "build": "react-scripts build && aws s3 sync build/ s3://xxx.co/1micro",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "homepage": "http://xxx.co/1micro"
}

run an admin command prompt, go to the root of the project folder and run `npm install`, sometimes this fixes some issues with dependencies — Moe, May 03 '17 at 08:21
Possible duplicate of [How to specify a port to run a create-react-app based project?](http://stackoverflow.com/questions/40714583/how-to-specify-a-port-to-run-a-create-react-app-based-project) — Mayank Shukla, May 03 '17 at 08:22
@MayankShukla ,El Ruso 's answer is same as my json file . and error shows at the same line . May be it does not work on windows . — Nirali Joshi, May 03 '17 at 08:30
You have clearly used a package.json that is not of your project, if you really did follow the guide you are saying you woudln't be having those extra dependencies. Seems like you have mixed two projects. Please give the link to project you are trying to start — Zeus, May 03 '17 at 08:30
react-scripts is in correspondece with the project created using create-react-app, you if you are creating one yourself, you should be following the rest of the steps too from the link, i.e to configure webpack — Shubham Khatri, May 03 '17 at 08:32
@Zeus , I just installed all the things from given tutorial . then i replaced projects's package.json file with the one generated through the tutorial 's steps . Am i still missing any thing ? — Nirali Joshi, May 03 '17 at 08:35
@NiraliJoshi You cannot just replace package.json of a project with other one. Follow each step, do not copy paste the full package.json, as you will run `npm install` package.json will change it self. Just copy paste parts of package.json when the tutorial tells you to. Restart doing the project from the start following each step this time. — Zeus, May 03 '17 at 08:38

Keshan Nageswaran · Accepted Answer · 2017-05-03T09:17:28.577

7

Create a .env file at your project root and specify port number there PORT=3005 then in package json start script use like this "start": "react-scripts start"

Sample package json file below

{
  "name": "r",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.8.4"
  },
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

edited May 03 '17 at 09:17

answered May 03 '17 at 09:02

Keshan Nageswaran

8,060
3
28
45

It says , 'react-scripts' is not recognized as an internal or external command, – Nirali Joshi May 03 '17 at 09:06
Hope you executed `npm install` to get the dependencies to your machine first – Keshan Nageswaran May 03 '17 at 09:08
Yes, I have react and react-dom folder inside node_modules folder. when I try npm ls react-scripts , it says `-- UNMET DEPENDENCY react-scripts@^0.9.5 npm ERR! missing: react-scripts@^0.9.5, required by liquid@0.1.0 – Nirali Joshi May 03 '17 at 09:13
@NiraliJoshi can you put `react-scripts` into `dev dependencies` instead of in `dependencies` and try `npm install` again – Keshan Nageswaran May 03 '17 at 09:16
@NiraliJoshi I have added a sample packagejson which would help – Keshan Nageswaran May 03 '17 at 09:18
npm install again at my project folder ? are you sure ? npm install or npm start ? – Nirali Joshi May 03 '17 at 09:20
Once you move the `react-scripts` to `devdependencies` execute `npm install` because according to the error stack you mentioned it seems `react-scripts` dependencies is not yet installed, if `npm install` gets success do `npm start` – Keshan Nageswaran May 03 '17 at 09:23
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/143256/discussion-between-nirali-joshi-and-keshshan). – Nirali Joshi May 03 '17 at 09:47

Wayneio · Answer 2 · 2017-05-03T08:54:12.170

3

That PORT command will only work on Unix. Try opening a command window and setting the port variable in a windows way, I think it's (in powershell):

$env:PORT=3005

or, in a normal command window:

set PORT=3005

which you can then check works by running:

echo %PORT%

which should return 3005. Then, navigate to your reactApp directory and run:

react-scripts start

edited May 03 '17 at 08:54

answered May 03 '17 at 08:33

Wayneio

3,466
7
42
73

should i run $env:PORT=3005 at my project root directory ? – Nirali Joshi May 03 '17 at 08:37
it says , The filename, directory name, or volume label syntax is incorrect. – Nirali Joshi May 03 '17 at 08:38
@NiraliJoshi Run it on Windows Powershell $env:PORT=3005 – Keshan Nageswaran May 03 '17 at 08:45
Updated my answer. It doesn't matter where you are when you run the set environment params like PORT – Wayneio May 03 '17 at 08:56
@Wayneio before you didn't mention about set command which can be used in cmd, but u was mentioning `$env:PORT=3005` without exactly telling where to execute that was the problem so mentioned it – Keshan Nageswaran May 03 '17 at 09:01
@Wayneio PORT set. but react-scripts start says -- 'react - scripts' is not recognized as an internal or external command – Nirali Joshi May 03 '17 at 09:04
@NiraliJoshi Okay, so my answer solved that problem. What you mention is a new problem. I'm not sure what that's doing. I'd look at maybe a simpler React.js project if you're just starting out – Wayneio May 03 '17 at 09:21

score 1 · Answer 3 · answered Jul 04 '22 at 03:42

if above solutions does not fixed your problem, try the following this worked for me:

if you are not able to start react js project then do the following steps:

open package.json file
inside script replace the start command with below "start": "set PORT=3006 && react-scripts start"

Unable to run react js project

3 Answers3