CODEWITHSUNDEEP
reactjsnpmnpm-start
popcorn01
popcorn01

Reputation: 53

React page doesn't change live in browser when I run Npm Start

I'm not sure if I phrased this title correctly or how to word this. Normally when I run a React app, I run npm start in the terminal and can see my changes on the browser. But for this project, npm start alone brings errors and I have to run npm run build before starting, but then it doesn't give me live changes in the browser. I have to keep killing the server and restarting to see each individual change in my browser.

Have I forgotten to install something? I'm very new to React and none of my searches have yielded promising results.

Here is some code, if it helps:

// bin/www

var app = require('../app');
var debug = require('debug')('mean-app:server');
var http = require('http');
var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);

var server = http.createServer(app);

server.listen(port);
server.on('error', onError);
server.on('listening', onListening);

function normalizePort(val) {
  var port = parseInt(val, 10);

  if (isNaN(port)) {
    // named pipe
    return val;
  }

  if (port >= 0) {
    // port number
    return port;
  }

  return false;
}

function onError(error) {
  if (error.syscall !== 'listen') {
    throw error;
  }

  var bind = typeof port === 'string'
    ? 'Pipe ' + port
    : 'Port ' + port;

  switch (error.code) {
    case 'EACCES':
      console.error(bind + ' requires elevated privileges');
      process.exit(1);
      break;
    case 'EADDRINUSE':
      console.error(bind + ' is already in use');
      process.exit(1);
      break;
    default:
      throw error;
  }
}

function onListening() {
  var addr = server.address();
  var bind = typeof addr === 'string'
    ? 'pipe ' + addr
    : 'port ' + addr.port;
  debug('Listening on ' + bind);

.env:

// .env
PORT=5555

package.json:

"scripts": {
    "start": "node ./bin/www",
    "build": "react-scripts build",
    "dev": "DEBUG=project-management-server:* nodemon ./bin/www" ,
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },

Upvotes: 1

Views: 1461

Answers (1)

Richard Ding
Richard Ding

Reputation: 382

Change your packages.json to this

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "dev": "DEBUG=project-management-server:* nodemon ./bin/www" ,
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },

running "npm start" should hot reload whenever you make changes now

Upvotes: 2

Related Questions