Grunt App auf Heroku bereitgestellt ... und was kommt als nächstes? ... meine App startet nicht

Question

Ich habe eine grundlegende Knoten App mit Gruntfile und ich hatte ein paar Schmerzen, um die Bereitstellung zu machen. Also habe ich eine neue Grunt-Aufgabe gemacht, ein paar Änderungen vorgenommen. Die Bereitstellung ist dann in Ordnung.

Aber jetzt, wenn ich zu meiner App gehe. Ich habe eine leere Seite. Das AppConfig.app-Verzeichnis wird nicht geladen.

Ich vermisse wahrscheinlich etwas Großes, das ich nicht herausfinden konnte. Ich dachte, grunt connect würde den Draht tun, aber es scheint server.js wartet etwas.

NB: Ich denke, ich brauche Express hier nicht.

Im Folgenden sind verschiedene Dateien:

• gruntfile.js
• server.js
• package.js

Gruntfile.js

'use strict'; 

module.exports = function (grunt) { 

require('load-grunt-tasks')(grunt); 
require('time-grunt')(grunt); 
var modRewrite = require('connect-modrewrite'); 

// Configurable paths for the application 
var appConfig = { 
    app: require('./bower.json').appPath || 'app', 
    dist: 'dist' 
}; 

//Environment vars 
var envConfig = { 
    dev: { 
     //baseUrl: 'http://localhost:3000', 
     loginUrl: 'http://demo.lvh.me:9000', 
     uploadUrl: 'anuploadurl/upload' 
    }, 
    prod: { 
     baseUrl: 'http://aprodurl', 
     loginUrl: 'an herokuapp url' 
    } 
}; 


// Define the configuration for all the tasks 
grunt.initConfig({ 

    appConf: appConfig, 

    // Empties folders to start fresh 
    clean: { 
     dist: { 
      files: [{ 
       dot: true, 
       src: [ 
        '.tmp', 
        '<%= appConf.dist %>/{,*/}*', 
        '!<%= appConf.dist %>/.git*' 
       ] 
      }], 
      options: { 
       force: true //since dist directory is outside, we must use force flag. 
      } 
     }, 
     server: '.tmp' 
    }, 

    //server settings 
    ngconstant: { 
     // Options for all targets 
     options: { 
      space: ' ', 
      wrap: '\'use strict\';\n\n {%= __ngModule %}', 
      name: 'config' 
     }, 
     // Environment targets 
     development: { 
      options: { 
       dest: 'app/config.js' 
      }, 
      constants: envConfig.dev 
     }, 
     production: { 
      options: { 
       dest: '<%= appConf.app %>/config.js' 
      }, 
      constants: envConfig.prod 
     } 
    }, 

    // Automatically inject Bower components into the app 
    wiredep: { 
     app: { 
      src: ['<%= appConf.app %>/index.html'], 
      ignorePath: /\.\.\//, 
      'options': { 
       'overrides': { 
        'semantic-ui': { 
         'main': ['dist/semantic.css', 'dist/semantic.js'] 
        } 
       } 
      } 
     } 
    }, 

    // Copies remaining files to places other tasks can use 
    copy: { 
     dist: { 
      files: [{ 
       expand: true, 
       dot: true, 
       cwd: '<%= appConf.app %>/*', 
       dest: '<%= appConf.dist %>', 
       src: [ 
        '*.{ico,png,txt}', 
        '{,*/}*.html', 
        'images/{,*/}*.{webp}', 
        'fonts/*' 
       ] 
      }, { 
       expand: true, 
       cwd: '<%= appConf.app %>/images', 
       dest: '<%= appConf.dist %>/images', 
       src: ['generated/*'] 
      }, { // not in use 
       expand: true, 
       cwd: 'bower_components/font-awesome', 
       src: 'fonts/*', 
       dest: '<%= appConf.dist %>' 
      }] 
     }, 
     styles: { 
      files: [ 
       { 
        expand: true, 
        cwd: '<%= appConf.app %>/*', 
        dest: '<%= appConf.dist %>/styles', 
        src: '{,*/}*.css' 
       } 
      ] 
     } 
    }, 

    // Run some tasks in parallel to speed up the build process 
    concurrent: { 
     server: [ 
      'copy:styles' 
     ], 
     test: [ 
      'copy:styles' 
     ], 
     dist: [ 
      'copy:styles', 
      'svgmin' 
     ] 
    }, 

    // Add vendor prefixed styles 
    autoprefixer: { 
     options: { 
      browsers: ['last 1 version'] 
     }, 
     dist: { 
      files: [{ 
       expand: true, 
       cwd: '<%= appConf.app %>/*', 
       src: '{,*/}*.css', 
       dest: '<%= appConf.dist %>/styles/' 
      }] 
     } 
    }, 

    // The actual grunt server settings 
    connect: { 
     options: { 
      port: 9000, 
      // Change this to '0.0.0.0' to access the server from outside. 
      hostname: '0.0.0.0', 
      livereload: 35729 
     }, 
     livereload: { 
      options: { 
       open: true, 
       middleware: function (connect) { 
        return [ 
         modRewrite(['^[^\\.]*$ /index.html [L]']), 
         connect.static('.tmp'), 
         connect().use(
          '/bower_components', 
          connect.static('./bower_components') 
         ), 
         connect.static(appConfig.app) 
        ]; 
       } 
      } 
     }, 
     test: { 
      options: { 
       port: 9001, 
       middleware: function (connect) { 
        return [ 
         rewriteRulesSnippet, 
         connect.static('.tmp'), 
         connect.static('test'), 
         connect().use(
          '/bower_components', 
          connect.static('./bower_components') 
         ), 
         connect.static(appConfig.app) 
        ]; 
       } 
      } 
     }, 
     dist: { 
      options: { 
       port:process.env.PORT, 
       open: true, 
       base: '<%= appConf.app %>' 
      } 
     } 
    }, 

    // Make sure code styles are up to par and there are no obvious mistakes 
    jshint: { 
     options: { 
      jshintrc: '.jshintrc', 
      reporter: require('jshint-stylish') 
     }, 
     all: { 
      src: [ 
       'Gruntfile.js', 
       'server.js', 
       '<%= appConf.app %>/{,*/}*.js' 
      ] 
     } 
    }, 

    // Watches files for changes and runs tasks based on the changed files 
    watch: { 
     bower: { 
      files: ['bower.json'], 
      tasks: ['wiredep'] 
     }, 
     js: { 
      files: ['<%= appConf.app %>/{,**/}*.js'], 
      tasks: ['newer:jshint:all'], 
      options: { 
       livereload: '<%= connect.options.livereload %>' 
      } 
     }, 
     css: { 
      files: ['<%= appConf.app %>/styles/{,**/}*.scss'], 
      tasks: ['sass'], 
      options: { 
       livereload: true, 
      }, 
     }, 
     styles: { 
      files: [ 
       '<%= appConf.app %>/styles/{,**/}*.css', 
       '<%= appConf.app %>/../templating/css/style.css' 
      ], 
      tasks: ['newer:copy:styles', 'autoprefixer'] 
     }, 
     gruntfile: { 
      files: ['Gruntfile.js'] 
     }, 
     livereload: { 
      options: { 
       livereload: '<%= connect.options.livereload %>' 
      }, 
      files: [ 
       '<%= appConf.app %>/{,**/}*.html', 
       '.tmp/styles/{,**/}*.css', 
       '<%= appConf.app %>/images/{,**/}*.{png,jpg,jpeg,gif,webp,svg}' 
      ] 
     } 
    }, 

    sass: { 
     dev: { 
      options: { 
       style: 'expanded' 
      }, 
      files: [ 
       { 
        expand: true, 
        cwd: '<%= appConf.app %>/styles', 
        src: ['*.scss'], 
        ext: '.css', 
        dest: '<%= appConf.dist %>/styles' 
       } 
      ] 
     } 
    } 

}); 

grunt.loadNpmTasks('grunt-sass'); 

// Build the development application 
grunt.registerTask('serve', 'Compile then start a connect web server', function() { 

    grunt.task.run([ 
     'clean:server', 
     'ngconstant:development', 
     'wiredep', 
     'sass', 
     'concurrent:server', 
     'autoprefixer', 
     'connect:livereload', 
     'watch' 
    ]); 
}); 

// Build the production application 
grunt.registerTask('build', 'Compile app on production settings', function() { 

    grunt.task.run([ 
     'clean:server', 
     'ngconstant:production', 
     'wiredep', 
     'sass', 
     'concurrent:server', 
     'autoprefixer', 
     'connect:dist' 
    ]); 
}); 

}; 

server.js

var http = require('http'); 
var port = process.env.PORT || 80; 

http.createServer(function (req, res) { 

    res.writeHead(200, { 
     'Content-Type': 'text/html', 
     'Access-Control-Allow-Origin' : '*' 
    }); 
    //res.end('app/index.html'); 

}).listen(port); 
console.log('Server running at port '+port); 

package.json

{ 
"private": true, 
"engines": { 
    "node": "4.2.2" 
}, 
"scripts": { 
    "postinstall": "bower install && grunt build", 
    "start": "node server.js" 
}, 
"dependencies": { all the dependancies .... } 
} 

Answer 1

Es war ein großer und harter Debugging, aber ich fand schließlich heraus.

Es wurde von mehreren Fehlern und Bugs kommen ich hatte:

1. der Knoten server.js nutzlos ist
2. ich auf dem Grunzen Connect-Methode invstigated und eine Produktions Setup erstellt

3. ich die gespaltet Grunzen dienen in einem Grunzen Build-Task und einer WebConnect Aufgabe

4. Dann aktualisiert package.json Datei

Sehr wichtig für Heroku: in Gruntfile.js auf dem Verbindungsobjekt:

dist: { 
     options: { 
      port:process.env.PORT, #<=== need to have a dynamic port env for Heroku deployment 
      open: true, 
      base: '<%= appConf.dist %>' 
     } 
    } 

hier sind die Grunzen Aufgaben hinzugefügt:

// Build the production application 
grunt.registerTask('build', 'Compile on dist folder', function() { 

    grunt.task.run([ 
     'clean:dist', 
     'ngconstant:production', 
     'wiredep', 
     'sass', 
     'concurrent:dist', 
     'autoprefixer:dist' 
    ]); 
}); 

// Build the production application 
grunt.registerTask('webconnect', 'connect web server', function() { 

    grunt.task.run([ 
     'connect:dist' 
    ]); 
}); 

dann auf package.json:

"scripts": { 
    "postinstall": "bower install && grunt build", 
    "start": "grunt webconnect" 
}