React tutorial - how do I start the node server for a reactJs application?

Question

I'm just starting the react.js tutorial, I've downloaded the files and then it mentions:

"Follow your progress by opening http://localhost:3000 in your browser (after starting the server). "

I know this may sound stupid, (bear with me since I'm a beginner with React) but how do I start the server in this instance?

Thanks.

Marc

Depends on what language you are using: https://github.com/reactjs/react-tutorial/ — jmargolisvt, Mar 02 '16 at 22:02

Carl Vitullo · Answer 1 · 2017-11-21T05:18:05.793

23

Pretty solid chance it's npm start from the project root.

Properly packaged modules will have some node scripts configured in package.json. It's customary to use start as the script to run the dev environment, though some might use build, dev, or other names.

edited Nov 21 '17 at 05:18

answered Mar 02 '16 at 23:54

Carl Vitullo

853
6
15

Basically I come from a creative background, having branched into front end design and development 12 years ago so having comercial experience in HTML5 CSS3 some javascript and jquery. Over the past 3 years I've gained an interest in the more in-depth side of UX strategics as well as the creative, I like to keep up to date with new and emerging technologies so am in the process of learning about creating web apps with react.js and also the theory and future implementation of web components in this field. – Marc Mar 04 '16 at 11:08
1

So coming from the front-end design and development side of things, at the moment I'm trying to peice together how one would create folder structures, and basically build a website using react.js on a node.js server in conjunction with HTML and CSS, and technically how these languages work together on a development and production level to create the finished product, or at least a prototype for further development. – Marc Mar 04 '16 at 11:08
It would be great to see a tutorial outlining the whole process with an example project, teaching the transfer between the typical process of building a front end prototype to this one via the use of node and react. – Marc Mar 04 '16 at 11:08
Yeah there are a lot of idioms that don't get communicated well to beginners. I help moderate a react developer community that's pretty friendly if you have questions, http://join.reactiflux.com – Carl Vitullo Mar 04 '16 at 15:07
OK that's great, thanks Carl. Just joined. I'll carry on with the tutorials I'm working on and if I have any further questions pose them here or there. Thanks. – Marc Mar 07 '16 at 03:41
how would you run `npm start` forever in digital ocean even after closing the terminal – Johhan Santana Nov 17 '16 at 20:58
`Error: missing script: start` – 8bitjunkie Sep 06 '18 at 15:04

score 11 · Answer 2 · answered May 13 '19 at 23:34

Here's official installation process: link, and officially recommended tutorials

# install react cli
npm install -g create-react-app

# create app
create-react-app my-react-app-name

# go to project folder
cd my-react-app-name

# install dependencies
npm install

# start live server
npm start

output:

$ You can now view my-react-app-name in the browser.

$ Local:            http://localhost:3000/
$ On Your Network:  http://192.168.0.105:3000/

$ Note that the development build is not optimized.
$ To create a production build, use npm build.

RBT · Answer 3 · 2022-12-30T04:28:46.223

You can run any one of the below mentioned commands to start the node server for your ReactJS application:

npm run-script start
npm run start
npm start

All the above commands are equivalent but people prefer the third one as it is the shortest to type on keyboard.

The start parameter in these commands maps to the start key present under scripts configuration present in package.json file of any ReactJS application. Here is a sample package.json file of my hello-world application:

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

You can see that react-scripts start is written in front of start key. So react-scripts start command will get fired when we run any of the three commands which I had enlisted in the beginning e.g. npm start.

score 3 · Answer 4 · answered Mar 03 '16 at 20:54

I used Node to run the server. The steps I followed are:

I downloaded the zip package from the Running a server section here
I had the link open: http://localhost:3000/
I opened up Node.js Command Prompt and navigated to the downloaded zip project. From Node example here:

Just type the commands in the example: First npm install and then node server.js.

See the screen shot below:

When I refresh the localhost web page I see the following:

score 1 · Answer 5 · answered Mar 03 '16 at 14:14

1

Sounds like you're following the official React tutorial, in which case the instructions to start the various included server implementations are here.

answered Mar 03 '16 at 14:14

Rick Runyon

4,204
1
17
15

React tutorial - how do I start the node server for a reactJs application?

5 Answers5

Linked