Heroku build completed but received Application error

Question

I received the same old Application Error in Heroku but I couldn't find any related issues. If someone has encountered this, could you throw me a hint, please?

I'd like to thank you all in advance for helping me to check this!

Below are the files setup

server.js

const PORT = process.env.PORT || 8000;

app.use(express.json());
app.use(cors({ origin: true, credentials: true }));
app.use(express.urlencoded({ extended: true }));

app.use("/api", apiRoutes);

const __dirname = dirname(fileURLToPath(import.meta.url));



const root = path.join(__dirname, "../client", "build");
app.use(express.static(root));
app.get("*", (req, res) => {
  res.sendFile("index.html", { root });
});


// Serve static assets in production
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"));
  });
}

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept, Authorization"
  );
  if (req.method === "OPTIONS") {
    res.header("Access-Control-Allow-Methods", "PUT, POST, PATCH, DELETE, GET");
    return res.status(200).json({});
  }
  next();
});

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

Procfile

web: npm start -p $PORT

package.json

  "scripts": {
    "start": "npm start --prefix server",
    "dev": "concurrently \"npm run server\" \"npm run client\"",
    "client": "npm start --prefix client",
    "build": "npm run build --prefix client",
    "client-install": "cd client && npm install ",
    "server-install": "cd server && npm install",
    "postinstall": "npm run client-install && npm run server-install",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
  }

server/package.json

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.24.0",
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "graphql": "^15.7.2",
    "graphql-request": "^3.6.1"
  },
  "devDependencies": {
    "@babel/plugin-proposal-optional-chaining": "^7.16.0",
    "dotenv": "^16.0.3",
    "nodemon": "^2.0.14"
  }
}

Building files process

remote: Building source:
remote: 
remote: -----> Building on the Heroku-20 stack
remote: -----> Using buildpack: heroku/nodejs
remote: -----> Node.js app detected
remote:        
remote: -----> Creating runtime environment
remote:        
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        NODE_VERBOSE=false
remote:        NODE_ENV=production
remote:        NODE_MODULES_CACHE=true
remote:        
remote: -----> Installing binaries
remote:        engines.node (package.json):  >=12
remote:        engines.npm (package.json):   >=6
remote:        engines.yarn (package.json):  >=1
remote:        
remote:        Resolving node version >=12...
remote:        Downloading and installing node 19.1.0...
remote:        Bootstrapping npm >=6 (replacing 8.19.3)...
remote:        npm 9.1.2 installed
remote:        Resolving yarn version >=1...
remote:        Downloading and installing yarn (1.22.19)
remote:        Installed yarn 1.22.19
remote:        
remote: -----> Restoring cache
remote:        - npm cache
remote:        
remote: -----> Installing dependencies
remote:        Installing node modules
remote:        
remote:        > timetable@1.0.0 postinstall
remote:        > npm run client-install && npm run server-install
remote:        
remote:        
remote:        > timetable@1.0.0 client-install
remote:        > cd client && npm install
remote:        
remote:        
remote:        added 1466 packages, and audited 1467 packages in 18s
remote:        
remote:        225 packages are looking for funding
remote:          run `npm fund` for details
remote:        
remote:        6 high severity vulnerabilities
remote:        
remote:        To address all issues (including breaking changes), run:
remote:          npm audit fix --force
remote:        
remote:        Run `npm audit` for details.
remote:        
remote:        > timetable@1.0.0 server-install
remote:        > cd server && npm install
remote:        
remote:        
remote:        added 92 packages, and audited 93 packages in 876ms
remote:        
remote:        10 packages are looking for funding
remote:          run `npm fund` for details
remote:        
remote:        found 0 vulnerabilities
remote:        
remote:        added 27 packages, and audited 28 packages in 28s
remote:        
remote:        5 packages are looking for funding
remote:          run `npm fund` for details
remote:        
remote:        found 0 vulnerabilities
remote:        
remote: -----> Build
remote:        Detected both "build" and "heroku-postbuild" scripts
remote:        Running heroku-postbuild
remote:        
remote:        > timetable@1.0.0 heroku-postbuild
remote:        > NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client
remote:        
remote:        
remote:        up to date, audited 1467 packages in 3s
remote:        
remote:        225 packages are looking for funding
remote:          run `npm fund` for details
remote:        
remote:        6 high severity vulnerabilities
remote:        
remote:        To address all issues (including breaking changes), run:
remote:          npm audit fix --force
remote:        
remote:        Run `npm audit` for details.
remote:        
remote:        > timetable@0.1.0 build
remote:        > react-scripts build
remote:        
remote:        Creating an optimized production build...
remote:        Compiled with warnings.
remote:        
remote:        Search for the keywords to learn more about each warning.
remote:        To ignore, add // eslint-disable-next-line to the line before.
remote:        
remote:        File sizes after gzip:
remote:        
remote:          198.75 kB (-40.54 kB)  build/static/js/main.bedb53b8.js
remote:          1.78 kB                build/static/css/main.a7188803.css
remote:        
remote:        The project was built assuming it is hosted at /.
remote:        You can control this with the homepage field in your package.json.
remote:        
remote:        The build folder is ready to be deployed.
remote:        You may serve it with a static server:
remote:        
remote:          npm install -g serve
remote:          serve -s build
remote:        
remote:        Find out more about deployment here:
remote:        
remote:          https://cra.link/deployment
remote:        
remote:        
remote: -----> Caching build
remote:        - npm cache
remote:        
remote: -----> Pruning devDependencies
remote:        
remote:        up to date, audited 28 packages in 287ms
remote:        
remote:        5 packages are looking for funding
remote:          run `npm fund` for details
remote:        
remote:        found 0 vulnerabilities
remote:        
remote: -----> Build succeeded!
remote: -----> Discovering process types
remote:        Procfile declares types -> web
remote: 
remote: -----> Compressing...
remote:        Done: 106.6M
remote: -----> Launching...
remote:        Released v9
remote:        https://myapp.herokuapp.com/ deployed to Heroku
remote: 
remote: This app is using the Heroku-20 stack, however a newer stack is available.
remote: To upgrade to Heroku-22, see:
remote: https://devcenter.heroku.com/articles/upgrading-to-the-latest-stack
remote: 
remote: Starting November 28th, 2022, free Heroku Dynos, free Heroku Postgres, and free Heroku Data for Redis® will no longer be available.
remote: 
remote: If you have apps using any of these resources, you must upgrade to paid plans by this date to ensure your apps continue to run and to retain your data. For students, we will announce a new program by the end of September. Learn more at https://blog.heroku.com/next-chapter

Error logs I noticed the dyno= connect= service= and not sure if it's because of the Dynos plan change during November

2022-11-27T08:49:52.822400+00:00 heroku[router]: at=error code=H20 desc="App boot timeout" method=GET path="/" host=myapp.herokuapp.com request_id=94037b77-d107-483e-a81f-918fb667204f fwd="91.152.206.9" dyno= connect= service= status=503 bytes= protocol=https
2022-11-27T08:50:04.258542+00:00 heroku[router]: at=error code=H20 desc="App boot timeout" method=GET path="/" host=myapp.herokuapp.com request_id=536abd47-32ff-466c-a8a3-1c56c8b40240 fwd="91.152.206.9" dyno= connect= service= status=503 bytes= protocol=https
q2022-11-27T08:50:44.094340+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
2022-11-27T08:50:44.159931+00:00 heroku[web.1]: Stopping process with SIGKILL
2022-11-27T08:50:44.849060+00:00 heroku[web.1]: State changed from starting to crashed
2022-11-27T08:50:44.560184+00:00 heroku[web.1]: Process exited with status 137
2022-11-27T08:50:46.928203+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=myapp.herokuapp.com request_id=31e19ba5-2d7c-4a6b-b275-53bef913f37d fwd="91.152.206.9" dyno= connect= service= status=503 bytes= protocol=https

I've also set the NODE_ENV=production in Heroku setting.

Answer 1

I suspect your server isn't binding to the port given by the PORT environment variable quickly enough. This must happen within 60 seconds of startup.

Your Procfile tells Heroku to run npm start -p $PORT as a web process, which (aside from the -p $PORT argument) is what it does by default for Node.js projects. Your main start script doesn't seem to make use of -p $PORT, so you can likely get rid of your Procfile entirely.

Your main start script tells Heroku to run

npm run client-build && npm start --prefix server

If client-build takes more than 60 seconds to run, it will cause your application to time out. You shouldn't need to build anything at runtime, as this should be taken care of at build time. Your main build script already runs client-build.

Update the start script in your main (root-level) package.json to just run the application:

"scripts": {
    "start": "npm start --prefix server",
}

Then commit and redeploy.