App crashed after deployed on Heroku. But it's working in my local
  • 07-May-2023
Lightrun Team
Author Lightrun Team
Share
App crashed after deployed on Heroku. But it's working in my local

App crashed after deployed on Heroku. But it’s working in my local.

Lightrun Team
Lightrun Team
07-May-2023

Explanation of the problem

The issue reported indicates that the application works correctly on the local machine, but it fails to run on the Heroku platform. The error message “Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch” suggests that the problem could be related to the port binding configuration. By default, Heroku assigns a port to the application process through the PORT environment variable. Therefore, it’s important to ensure that the application is configured to listen on the port specified by the PORT environment variable.

The error message “State changed from starting to crashed” indicates that the Heroku platform stopped the application process due to an error. The subsequent error messages “App crashed” and “status=503” suggest that the application failed to respond to requests from clients. To resolve this issue, it’s important to investigate the cause of the error and implement appropriate fixes.

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

  • Instantly add logs to, set metrics in, and take snapshots of live applications
  • Insights delivered straight to your IDE or CLI
  • Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for App crashed after deployed on Heroku. But it’s working in my local.

If you encounter the “Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch” error message on Heroku, one solution is to modify the last line of the server.js file to listen to the environment variable PORT or the designated port number. This allows Heroku to decide the port number in runtime. For example:

server.listen(process.env.PORT || port)

Another solution is to use the os.Getenv("PORT") function to retrieve the runtime port number assigned by Heroku, and pass it to the http.ListenAndServe() function. This allows your web service to listen on the assigned port number. For example:

log.Fatal(http.ListenAndServe(":" + os.Getenv("PORT"), router))

It’s important to note that the specific solution may depend on the programming language and framework used for the application. However, the general idea is to allow Heroku to assign the port number dynamically at runtime, instead of specifying a fixed port number that may not be available on the Heroku platform.

Other popular problems with vuepack

Problem: “Cannot find module ‘vue'” error

The “Cannot find module ‘vue'” error is a common issue that VuePack users encounter when trying to run the application. This error occurs when the required module ‘vue’ is missing or not installed properly.

Solution:

To solve this problem, you need to install the ‘vue’ module using NPM. You can do this by running the following command in your terminal:

npm install vue

Problem: “Module build failed: Error: No PostCSS Config found” error:

The “Module build failed: Error: No PostCSS Config found” error is another common problem that VuePack users encounter. This error occurs when PostCSS is not configured properly, which prevents it from being able to process your CSS files.

Solution:

To solve this problem, you need to create a ‘postcss.config.js’ file in the root of your project directory and configure it properly. Here’s an example configuration that you can use:

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

Problem: “Module not found: Error: Can’t resolve ‘babel-loader'” error

The “Module not found: Error: Can’t resolve ‘babel-loader'” error is a common issue that VuePack users encounter when trying to run the application. This error occurs when the required module ‘babel-loader’ is missing or not installed properly.

Solution:

To solve this problem, you need to install the ‘babel-loader’ module using NPM. You can do this by running the following command in your terminal:

npm install babel-loader

Once the module is installed, try running your VuePack application again, and the error should be resolved. Additionally, make sure that you have the correct version of ‘babel-loader’ installed that matches the version of ‘babel-core’ that you’re using in your project.

A brief introduction to vuepack

Vuepack is a build tool that simplifies the development process for Vue.js applications. It comes with various pre-configured modules that can be used to optimize the project, including a webpack configuration that includes loaders and plugins to handle JavaScript, HTML, CSS, and image files. The tool also includes live-reload functionality, which makes it easier to develop and debug code in real-time.

Vuepack also offers an efficient, modular architecture for developing Vue.js applications. The tool allows developers to create components and views using a single-file format, which simplifies the application’s structure and allows for better organization of the codebase. Vuepack also provides support for Vue.js-specific features, such as template syntax highlighting and linting, which can help ensure code quality and prevent errors. Overall, Vuepack provides a streamlined and efficient development environment for Vue.js applications, making it an ideal choice for developers looking to build scalable and high-performing web applications.

  1. Vuepack can be used as a build tool for developing Vue.js applications. It offers a variety of features such as hot module replacement, code splitting, and static file generation that help developers to streamline their workflow and increase productivity. With Vuepack, developers can easily bundle and optimize their code for production environments, ensuring that their applications run smoothly and efficiently
  2. Vuepack can be used for creating reusable components and libraries in Vue.js. It provides a simple and intuitive way to define and package components, making it easy to share and reuse them across different projects. With Vuepack, developers can create high-quality, modular components that can be easily imported and integrated into other applications, reducing development time and improving code quality
  3. Vuepack can be used for server-side rendering of Vue.js applications. This is especially useful for applications that require fast initial load times and better SEO performance. Vuepack provides an easy-to-use API for rendering Vue.js components on the server, allowing developers to build high-performance, SEO-friendly applications. The following code block is an example of how to use Vuepack for server-side rendering:
const express = require('express')
const Vue = require('vue')
const renderer = require('vue-server-renderer').createRenderer()

const app = express()

app.get('*', (req, res) => {
  const vm = new Vue({
    data: {
      message: 'Hello, World!'
    },
    template: '<div>{{ message }}</div>'
  })

  renderer.renderToString(vm, (err, html) => {
    if (err) {
      res.status(500).send('Internal Server Error')
    } else {
      res.send(`
        <!DOCTYPE html>
        <html>
          <head>
            <title>Vuepack Server-Side Rendering Example</title>
          </head>
          <body>
            ${html}
          </body>
        </html>
      `)
    }
  })
})

app.listen(3000, () => {
  console.log('Server started on port 3000')
})
Share

It’s Really not that Complicated.

You can actually understand what’s going on inside your live applications.

Try Lightrun’s Playground

Lets Talk!

Looking for more information about Lightrun and debugging?
We’d love to hear from you!
Drop us a line and we’ll get back to you shortly.

By submitting this form, I agree to Lightrun’s Privacy Policy and Terms of Use.