Heroku process failed to Bind port - heroku

Question

I'm trying to deploy the following starter kit on Heroku. However, when I try to start it, it fails :(
Error:
Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
I did not find anywhere to configure or set the port. It's launching on 8080 however it still fails.
Browser-sync-server:
/**
* Start browserSync server
*/
'use strict';
const fs = require('fs');
module.exports = function(options) {
return () => {
// If index.html exist - open it, else show folder
let listDirectory = fs.existsSync(options.mainHtml) ? false : true;
options.browserSync.init({
notify: false,
server: {
baseDir: './',
directory: listDirectory
},
snippetOptions: {
// Provide a custom Regex for inserting the snippet
rule: {
match: /$/i,
fn: (snippet, match) => snippet + match
}
},
port: 8080
});
};
};
Package.json:
{
"name": "Demo-app",
"version": "2.3.2",
"description": "Demo Project",
"repository": {
"type": "git",
},
"keywords": [
"starte",
"markup",
"JustCoded",
"jc"
],
"author": "JustCoded",
"license": "MIT",
"bugs": {
},
"devDependencies": {
"#babel/core": "^7.5.5",
"#babel/preset-env": "^7.5.5",
"babelify": "^10.0.0",
"browser-sync": "^2.18.0",
"browserify": "^16.5.0",
"del": "^3.0.0",
"eslint-config-airbnb-base": "^14.0.0",
"eslint-plugin-import": "^2.14.0",
"files-exist": "^1.1.0",
"gulp": "^4.0.0",
"gulp-autoprefixer": "^4.0.0",
"gulp-concat": "^2.6.1",
"gulp-cssimport": "^5.0.0",
"gulp-cssnano": "^2.1.2",
"gulp-debug": "^3.1.0",
"gulp-eslint": "^5.0.0",
"gulp-file-include": "^2.0.1",
"gulp-group-css-media-queries": "^1.2.0",
"gulp-htmlhint": "^0.3.1",
"gulp-if": "^2.0.2",
"gulp-imagemin": "^4.1.0",
"gulp-newer": "^1.3.0",
"gulp-notify": "^3.0.0",
"gulp-rename": "^1.2.2",
"gulp-sass": "^4.0.2",
"gulp-sourcemaps": "^2.4.1",
"gulp-uglify": "^3.0.0",
"htmlhint-stylish": "^1.0.3",
"node-notifier": "^5.0.2",
"path": "^0.12.7",
"vinyl-source-stream": "^2.0.0"
},
"engines": {
"node": ">=6.0.0"
},
"scripts": {
"test": "gulp build",
"production": "gulp build",
"start": "gulp"
},
"dependencies": {
"include-media": "^1.4.9",
"jquery": "^3.3.1",
"normalize.css": "^5.0.0"
}
}
Gulpfile:
(() => {
'use strict';
const cfg = require('./gulp-config.js'),
gulp = require('gulp'),
del = require('del'),
path = require('path'),
notifier = require('node-notifier'),
gutil = require('gulp-util'),
browserSync = require('browser-sync').create();
/**
* Require gulp task from file
* #param {string} taskName Task name
* #param {String} path Path to task file
* #param {Object} options Options for task
* #param {Array} dependencies Task dependencies
*/
function requireTask(taskName, path, options, dependencies) {
let settings = options || {};
const taskFunction = function (callback) {
if (settings.checkProduction) {
settings.isProduction = process.argv[process.argv.length - 1] === 'build';
}
let task = require(path + taskName + '.js').call(this, settings);
return task(callback);
};
settings.taskName = taskName;
if (!Array.isArray(dependencies)) {
gulp.task(taskName, taskFunction);
} else if (dependencies.length === 1) {
gulp.task(taskName, gulp.series(dependencies[0], taskFunction));
} else {
gulp.task(taskName, gulp.series(dependencies, taskFunction));
}
}
/**
* Remove image(s) from build folder if corresponding
* images were deleted from source folder
* #param {Object} event Event object
* #param {String} src Name of the source folder
* #param {String} dest Name of the destination folder
*/
function deleteFile(file, src, dest) {
let fileName = file.path.toString().split('/').pop();
let fileEventWord = file.event == 'unlink' ? 'deleted' : file.event;
let filePathFromSrc = path.relative(path.resolve(src), file.path);
let destFilePath = path.resolve(dest, filePathFromSrc);
try {
del.sync(destFilePath);
console.log(` \u{1b}[32m${fileEventWord}: ${fileName}\u{1b}[0m`);
} catch (error) {
console.log(` \u{1b}[31mFile has already deleted\u{1b}[0m`);
}
}
/**
* Show error in console
* #param {String} prefix Title of the error
* #param {String} err Error message
*/
function showError(prefix, err) {
gutil.log(gutil.colors.white.bgRed(' ' + prefix + ' '), gutil.colors.white.bgBlue(' ' + err.message + ' '));
notifier.notify({
title: prefix,
message: err.message
});
this.emit('end');
}
/**
* template HTML
*/
requireTask(`${cfg.task.fileInclude}`, `./${cfg.folder.tasks}/`, {
templates: cfg.fileInclude.templates,
dest: cfg.fileInclude.dest
});
/**
* Hint HTML
*/
requireTask(`${cfg.task.htmlHint}`, `./${cfg.folder.tasks}/`);
/**
* Lint ES
*/
requireTask(`${cfg.task.esLint}`, `./${cfg.folder.tasks}/`, {
src: cfg.folder.src
});
/**
* Build custom js
*/
requireTask(`${cfg.task.buildCustomJs}`, `./${cfg.folder.tasks}/`, {
src: cfg.folder.src,
dest: cfg.folder.build,
mainJs: cfg.file.mainJs,
checkProduction: true,
showError: showError
});
/**
* Build js vendor (concatenate vendors array)
*/
requireTask(`${cfg.task.buildJsVendors}`, `./${cfg.folder.tasks}/`, {
src: cfg.folder.src,
dest: cfg.folder.build,
vendorJs: cfg.file.vendorJs,
vendorJsMin: cfg.file.vendorJsMin
});
/**
* Build styles for application from SASS
*/
requireTask(`${cfg.task.buildSass}`, `./${cfg.folder.tasks}/`, {
src: cfg.folder.src,
dest: cfg.folder.build,
mainScss: cfg.file.mainScss,
mainScssMin: cfg.file.mainScssMin,
versions: cfg.autoprefixer.versions,
checkProduction: true,
showError: showError
});
/**
* Compile scss files listed in the config
*/
requireTask(`${cfg.task.buildSassFiles}`, `./${cfg.folder.tasks}/`, {
sassFilesInfo: cfg.getPathesForSassCompiling(),
dest: cfg.folder.build,
versions: cfg.autoprefixer.versions,
showError: showError
});
/**
* Build styles for vendor from SASS
*/
requireTask(`${cfg.task.buildStylesVendors}`, `./${cfg.folder.tasks}/`, {
src: cfg.folder.src,
dest: cfg.folder.build,
vendorScss: cfg.file.vendorScss,
vendorScssMin: cfg.file.vendorScssMin,
showError: showError
});
/**
* Minify images
*/
requireTask(`${cfg.task.imageMin}`, `./${cfg.folder.tasks}/`, {
src: cfg.folder.src,
dest: cfg.folder.build
});
/**
* Clean build folder
*/
requireTask(`${cfg.task.cleanBuild}`, `./${cfg.folder.tasks}/`, {
src: cfg.folder.build
});
/**
* Clean production folder
*/
requireTask(`${cfg.task.cleanProd}`, `./${cfg.folder.tasks}/`, {
src: cfg.folder.prod
});
/**
* Copy folders to the build folder
*/
requireTask(`${cfg.task.copyFolders}`, `./${cfg.folder.tasks}/`, {
dest: cfg.folder.build,
foldersToCopy: cfg.getPathesToCopy()
});
/**
* Copy folders to the production folder
*/
requireTask(`${cfg.task.copyFoldersProduction}`, `./${cfg.folder.tasks}/`, {
dest: cfg.folder.prod,
foldersToCopy: cfg.getPathesToCopyForProduction()
});
/**
* Start browserSync server
*/
requireTask(`${cfg.task.browserSync}`, `./${cfg.folder.tasks}/`, {
mainHtml: cfg.file.mainHtml,
browserSync: browserSync
});
/**
* Watch for file changes
*/
requireTask(`${cfg.task.watch}`, `./${cfg.folder.tasks}/`, {
sassFilesInfo: cfg.getPathesForSassCompiling(),
src: cfg.folder.src,
templates: cfg.folder.templates,
dest: cfg.folder.build,
imageExtensions: cfg.imageExtensions,
browserSync: browserSync,
deleteFile: deleteFile,
tasks: {
buildSassFiles: cfg.task.buildSassFiles,
buildCustomJs: cfg.task.buildCustomJs,
buildSass: cfg.task.buildSass,
esLint: cfg.task.esLint,
fileInclude: cfg.task.fileInclude,
htmlHint: cfg.task.htmlHint,
imageMin: cfg.task.imageMin
}
}, false);
/**
* Default Gulp task
*/
gulp.task('default', gulp.series(
cfg.task.cleanBuild,
gulp.parallel(
cfg.task.buildCustomJs,
cfg.task.buildJsVendors,
cfg.task.buildSass,
cfg.task.buildSassFiles,
cfg.task.buildStylesVendors,
cfg.task.fileInclude,
cfg.task.htmlHint,
cfg.task.esLint,
cfg.task.imageMin
),
cfg.task.copyFolders,
gulp.parallel(
cfg.task.browserSync,
cfg.task.watch
)
));
/**
* Creating production folder without unnecessary files
*/
gulp.task('build', gulp.series(
gulp.parallel(
cfg.task.cleanProd,
cfg.task.cleanBuild
),
gulp.parallel(
cfg.task.buildCustomJs,
cfg.task.buildJsVendors,
cfg.task.buildSass,
cfg.task.buildSassFiles,
cfg.task.buildStylesVendors,
cfg.task.fileInclude,
cfg.task.htmlHint,
cfg.task.esLint,
cfg.task.imageMin
),
cfg.task.copyFolders,
cfg.task.copyFoldersProduction
), true);
})();
It's got some issue with Timeout with the binding of the port.
I've added "preinstall": "npm install -g gulp" and
My Procfile shows the following as well:
web: gulp
Can someone help me why it's failing? I really want to deploy this project on Heroku and would very much appreciate any help to solve!
There is no way on the project to bind the port.

Answer 1

Using process.env.PORT || 8080 instead of just 8080 solved my issue. Heroku likes it this way!