Setting port in node.js with listen() method

Question

I am trying to deploy my first node.js to Heroku but I keep getting a H10-App Crashed Error.

I have done some Googling and I am pretty sure I have unwittingly set the port even though can't see where in my code I did it. I have tried to use listen() to set the port dynamically but am still getting the h10 error.

Here is my index.js file

import { createTable, tableData, createButton } from './ladderFuncs';
import thisYear from './yearFunc';

const container = document.createElement('div');
container.setAttribute('class', 'container');
document.body.appendChild(container);

const request = new XMLHttpRequest();
request.open('GET', 'https://api.squiggle.com.au/?q=standings', true);

request.onload = function apiData() {
  const data = JSON.parse(this.response).standings;

  if (request.status >= 200 && request.status < 400) {
    const title = document.createElement('h1');
    container.appendChild(title);
    title.innerHTML = `${thisYear()} AFL Premiership Season`;
    createButton();
    createTable();
    tableData(data);
  } else {
    const errorMessage = document.createElement('div');
    errorMessage.textContent = 'Out of bounds! On the full!';
    container.appendChild(errorMessage);
  }
};

const server = require('http');

server.listen(process.env.PORT || 5000);

request.send();

And here is my package.json

  "name": "aflapi",
  "version": "1.0.0",
  "description": "Using the AFL API from Squiggle to create a simple AFL ladder App",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development",
    "build": "webpack --config ./webpack.config.js --mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/benfanderson/aflApp.git"
  },
  "author": "Ben Anderson",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.7.7",
    "@babel/plugin-proposal-object-rest-spread": "^7.7.7",
    "@babel/preset-env": "^7.7.7",
    "babel-eslint": "^10.0.3",
    "babel-loader": "^8.0.6",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.4.1",
    "eslint": "^6.1.0",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-loader": "^3.0.3",
    "eslint-plugin-import": "^2.19.1",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.17.0",
    "eslint-plugin-react-hooks": "^1.7.0",
    "fibers": "^4.0.2",
    "file-loader": "^5.0.2",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.13.1",
    "sass": "^1.24.4",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.1.2",
    "url-loader": "^3.0.0",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1"
  },
  "babel": {
    "presets": [
      "@babel/preset-env"
    ],
    "plugins": [
      "@babel/plugin-proposal-object-rest-spread"
    ]
  }
}

Do I need to wrap the whole thing in a http.createServer() method?

Any help will be hugely appreciated.

The `index.js` appears to be frontend/browser code which doesn't have access to the node.js `http` package. The `webpack-dev-server` is the server process in your dev setup and a port would be configured there. You might want to look at [how to publish a webpack app to heroku](https://stackoverflow.com/q/36223070/1318694) — Matt, Jan 25 '20 at 09:46

score 0 · Accepted Answer · answered Jan 25 '20 at 09:39

You can create server like this

const http = require('http');
const server = http.createServer((req,res)=>{
//handle requests
});

server.listen(process.env.PORT || 5000);

request.send();

Hope this helps

Just make sure you can run the code locally without error, before deploying to heroku

Setting port in node.js with listen() method

1 Answers1