[Solved] Heroku can't wait my build scripts - Error R10 (Boot timeout)

1

Hi there. I made a boilerplate to use in my next projects of backend. https://github.com/lubien/koa-react-boilerplate
But, when I try to deploy to heroku I get timeout because of the time it takes to build webpack scripts
Anyone knows some way to bypass heroku’s timeout?
The message: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch

Edit:

In FCC’s chat we found out that we could use npm’s postinstall hook to build everything on each deploy.
Thanks to @jomcode

I’ll keep this topic to help other people with the same problem :wink:

2

Hi @lubien , I’m having the same issue. Would you mind sharing more details about your solution ? I’ve tried a few things, nothing worked so far.

You’re talking about building everything on each deploy with postinstall. I don’t understand the purpose of this. I manually build everything production ready before deploying.

3

As the log states, your server didn’t started after the defined time so heroku thinks it’s dead.

I solved my issue by teaching heroku about my postinstall hook. Heroku properly waits the hook before running the server.

If you build before deploy:

  • Does the built code is pushed via git to heroku?
    • If the answer is no: either you have to do it (bad pratice) or teach the server how to build with post-install too.
    • If the answer is yes: maybe your code someway fails to run the server. Check the logs see if something wasn’t right.
4

Jika Ingin Push di Heroku

If you want upload to heroku add this in your webpack.config.js

Because if not add you will have
error

Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch

//webpack.config.js add code like that

const HtmlWebPackPlugin = require(“html-webpack-plugin”);
const MiniCssExtractPlugin = require(“mini-css-extract-plugin”);
var server_port = process.env.YOUR_PORT || process.env.PORT || 5000;
var server_host = process.env.YOUR_HOST || ‘0.0.0.0’;

module.exports = {
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: “babel-loader”
}
},
{
test: /.css$/,
use: [MiniCssExtractPlugin.loader, “css-loader”]
}
]
},
devServer: {
disableHostCheck: true,
contentBase: ‘./dist’,
compress: true,
inline: true,
port:server_port,
host:server_host

},
plugins: [
new HtmlWebPackPlugin({
template: “./src/index.html”,
filename: “index.html”
}),
new MiniCssExtractPlugin({
filename: “[name].css”,
chunkFilename: “[id].css”
})
]
};