I am trying to deploy an Ionic2 app on heroku, and am running into an issue where I’m getting 404 errors when the browser tries to load my various .js files in my build directory. Any suggestions on what to improve? Is there something else I need to add to ensure those files are built within Heroku?
Thanks!
To deploy my app, I did:
heroku create
git push heroku master
heroku open
browser 404 messages
MyApp.herokuapp.com/:26 GET https://MyApp.herokuapp.com/build/js/Reflect.js
MyApp.herokuapp.com/:27 GET https://MyApp.herokuapp.com/build/js/zone.js
MyApp.herokuapp.com/:22 GET https://MyApp.herokuapp.com/cordova.js
MyApp.herokuapp.com/:29 GET https://MyApp.herokuapp.com/build/js/app.bundle.js
MyApp.herokuapp.com/:22 GET https://MyApp.herokuapp.com/cordova.js
MyApp.herokuapp.com/:24 GET https://MyApp.herokuapp.com/build/js/es6-shim.min.js
MyApp.herokuapp.com/:26 GET https://MyApp.herokuapp.com/build/js/Reflect.js
MyApp.herokuapp.com/:27 GET https://MyApp.herokuapp.com/build/js/zone.js
MyApp.herokuapp.com/:29 GET https://MyApp.herokuapp.com/build/js/app.bundle.js 404 (Not Found)
package.json
{
"dependencies": {
"@angular/common": "2.0.0-rc.2",
"@angular/compiler": "2.0.0-rc.2",
"@angular/core": "2.0.0-rc.2",
"@angular/http": "2.0.0-rc.2",
"@angular/platform-browser": "2.0.0-rc.2",
"@angular/platform-browser-dynamic": "2.0.0-rc.2",
"@angular/router": "2.0.0-rc.2",
"angular2-google-maps": "^0.12.0",
"angular2-jwt": "0.1.16",
"es6-shim": "^0.35.0",
"express": "^4.14.0",
"ionic-angular": "2.0.0-beta.9",
"ionic-native": "1.2.4",
"ionicons": "3.0.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12"
},
"devDependencies": {
"del": "2.2.0",
"gulp": "3.9.1",
"gulp-watch": "4.3.5",
"ionic-gulp-browserify-typescript": "^1.1.0",
"ionic-gulp-fonts-copy": "^1.0.0",
"ionic-gulp-html-copy": "^1.0.0",
"ionic-gulp-sass-build": "^1.0.0",
"ionic-gulp-scripts-copy": "^2.0.0",
"run-sequence": "1.1.5"
},
"cordovaPlugins": [
"cordova-plugin-whitelist",
"cordova-plugin-console",
"cordova-plugin-statusbar",
"cordova-plugin-device",
"cordova-plugin-splashscreen",
"ionic-plugin-keyboard"
],
"cordovaPlatforms": [
"ios",
{
"platform": "ios",
"version": "",
"locator": "ios"
}
],
"engines": {
"node": "5.0.0"
},
"scripts": {
"start": "node server.js"
},
"name": "mob",
"description": "mob: An Ionic project"
}
server.js
var express = require('express'),
app = express();
app.use(express.static('www'));
app.set('port', process.env.PORT || 5000);
app.listen(app.get('port'), function () {
console.log('Express server listening on port ' + app.get('port'));
});
gulpfile.js
var gulp = require('gulp'),
gulpWatch = require('gulp-watch'),
del = require('del'),
runSequence = require('run-sequence'),
argv = process.argv;
/**
* Ionic hooks
* Add ':before' or ':after' to any Ionic project command name to run the specified
* tasks before or after the command.
*/
gulp.task('serve:before', ['watch']);
gulp.task('emulate:before', ['build']);
gulp.task('deploy:before', ['build']);
gulp.task('build:before', ['build']);
// we want to 'watch' when livereloading
var shouldWatch = argv.indexOf('-l') > -1 || argv.indexOf('--livereload') > -1;
gulp.task('run:before', [shouldWatch ? 'watch' : 'build']);
/**
* Ionic Gulp tasks, for more information on each see
* https://github.com/driftyco/ionic-gulp-tasks
*
* Using these will allow you to stay up to date if the default Ionic 2 build
* changes, but you are of course welcome (and encouraged) to customize your
* build however you see fit.
*/
var buildBrowserify = require('ionic-gulp-browserify-typescript');
var buildSass = require('ionic-gulp-sass-build');
var copyHTML = require('ionic-gulp-html-copy');
var copyFonts = require('ionic-gulp-fonts-copy');
var copyScripts = require('ionic-gulp-scripts-copy');
var isRelease = argv.indexOf('--release') > -1;
gulp.task('watch', ['clean'], function(done){
runSequence(
['sass', 'html', 'fonts', 'scripts'],
function(){
gulpWatch('app/**/*.scss', function(){ gulp.start('sass'); });
gulpWatch('app/**/*.html', function(){ gulp.start('html'); });
buildBrowserify({ watch: true }).on('end', done);
}
);
});
gulp.task('build', ['clean'], function(done){
runSequence(
['sass', 'html', 'fonts', 'scripts'],
function(){
buildBrowserify({
minify: isRelease,
browserifyOptions: {
debug: !isRelease
},
uglifyOptions: {
mangle: false
}
}).on('end', done);
}
);
});
gulp.task('sass', buildSass);
gulp.task('html', copyHTML);
gulp.task('fonts', copyFonts);
gulp.task('scripts', copyScripts);
gulp.task('clean', function(){
return del('www/build');
});