Sunday, 9 April 2017

How to setup a dev react environment with a nodejs server on heroku

I built this simple shopping list app using reactjs. I used the create-react-app command to setup the project and the npm start command to run the dev server which updates automatically when I make changes to the react code.

Is it possible to keep the auto update feature for the reactjs code when I add a node.js server to my project? I know I can use npm build to create a build and add that to the node.js project, but I don't want to run a build after every change I make.

I've tried adding a simple node.js server to the project using a Procfile, but this causes an application error. Looks like it fails getting the fav icon.

Here is the error in the log.

2017-04-09T20:51:51.374065+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=frozen-scrubland-60753.herokuapp.com request_id=289fc123-dd7b-4c26-a2ce-10fbffef3aa6 fwd="207.118.86.163" dyno= connect= service= status=503 bytes= protocol=http

Procfile has this line web: node index.js

index.js looks like this.

const http = require('http');

const hostname = '127.0.0.1';
const port = 80; // i've tried using different ports

const server = http.createServer((req, res) => {
    res.statusCode = 200;
    res.setHeader('Content-Type', 'text/plain');
    res.end('Hello World\n');
});

server.listen(port, hostname, () => {
    console.log(`Server running at http://${hostname}:${port}/`);
});

package.json has these scripts

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject"
}



via sissonb

No comments:

Post a Comment