What is causing my deployed Heroku app to not open?

So, I’m deploying my chat app to Heroku, and I want to test if my Socket.io sockets are working. Anyway, I can’t get heroku open to work. I installed the serve-favicon middleware to help, but that doesn’t seem to do the trick. Any ideas?

server.js

var app = require('express')();
var http = require('http').createServer(app);
var io = require('socket.io')(http);
var path = require('path');

const favicon = require('serve-favicon');
app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));

let port = process.env.PORT;
if (port == null || port == "") {
    port = 8000;
}
app.listen(port);

app.get('/', (req, res) => {
   res.sendFile(__dirname + '/public/index.html');
});

io.on('connection', (socket) => {
    socket.on('userJoin', (user) => {
        console.log('User connected to room');
    })
    console.log('a user connected');
  });



http.listen(3001, () => {
  console.log('listening on port 3001');
});

Procfile

web: node server.js
web: npm start

socket

import io from 'socket.io-client'

let socket;

export const initSocket = () => {
    socket = io('http://localhost:3001')
    console.log('initializing socket')
}

Errors

2020-10-22T00:12:31.056919+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=thawing-everglades-25591.herokuapp.com request_id=6647c4af-3d55-4923-a2a1-27426e589146 fwd="184.167.78.55" dyno= connect= service= status=503 bytes= protocol=https
2020-10-22T00:12:31.317690+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=thawing-everglades-25591.herokuapp.com request_id=570c5025-8b0e-4789-b191-3783e37fac2d fwd="184.167.78.55" dyno= connect= service= status=503 bytes= protocol=https

Logs on Heroku

2020-10-22T00:04:39.557182+00:00 app[web.1]: [34mℹ[39m [90m「wds」[39m: 404s will fallback to /
2020-10-22T00:04:39.557588+00:00 app[web.1]: Starting the development server...
2020-10-22T00:04:39.557590+00:00 app[web.1]: 
2020-10-22T00:04:39.698176+00:00 heroku[web.1]: Process exited with status 0
2020-10-22T00:04:39.745109+00:00 heroku[web.1]: State changed from starting to crashed
2020-10-22T00:12:31.056919+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=thawing-everglades-25591.herokuapp.com request_id=6647c4af-3d55-4923-a2a1-27426e589146 fwd="184.167.78.55" dyno= connect= service= status=503 bytes= protocol=https
2020-10-22T00:12:31.317690+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=thawing-everglades-25591.herokuapp.com request_id=570c5025-8b0e-4789-b191-3783e37fac2d fwd="184.167.78.55" dyno= connect= service= status=503 bytes= protocol=https
2020-10-22T00:18:58.529683+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=thawing-everglades-25591.herokuapp.com request_id=c349aa37-bb68-4bcc-b065-899220a3fbe8 fwd="54.83.117.30" dyno= connect= service= status=503 bytes= protocol=http
2020-10-22T00:27:34.585166+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=thawing-everglades-25591.herokuapp.com request_id=0bee0800-8f3d-4e3a-b3fe-c85e5271d1b2 fwd="184.167.78.55" dyno= connect= service= status=503 bytes= protocol=https
2020-10-22T00:27:34.856060+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=thawing-everglades-25591.herokuapp.com request_id=4ac98349-5d06-4c0d-af86-94e08a1e1193 fwd="184.167.78.55" dyno= connect= service= status=503 bytes= protocol=https

Answer

Heroku/Netflify should be able to build your app with “npm start” on build your app should check if it’s in production, set ports, and your server (for react) should serve the build folder which will have its own index.html and all the relative files such as your favicon react should handle on build.

Check your setup usually services like Heroku/Netlify pass in an environmental for production. Here’s a snippet from an old project. I haven’t hosted anything recently on Heroku but hopefully that helps.

// Serve static assests in production (serve react)
if (process.env.NODE_ENV === 'production') {
  // Set static folder
  app.use(express.static('client/build'));

  app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
  });
}

Leave a Reply

Your email address will not be published. Required fields are marked *