Gulp with “NPM start” causes a blank page with the

Question

I've been following this tutorial Angular2, Bootstrap, Yeoman, Gulp, tutorial and I get up to the frontend task section, but then something happens when I try to test the code locally.

Whenever I use npm start I run the following code, but end up getting the blank webpage with Cannot GET/

Folder Structure:

> my-vzlr
> -build
> -node_modules
> -src
> --app
> ---app.js
> ---index.html
> ---main.js
> --electron
> --fonts
> --images
> --styles  
> -gulpfile.js
> -package.json

Package.json:

> {   "name": "my-vzlr",   "version": "0.0.0",   "private": true,  
> "scripts": {
>     "start": "gulp clean && gulp frontend && gulp dev",
>     "build": "gulp clean && gulp frontend"   },   "dependencies": {
>     "angular2": "2.0.0-beta.2",
>     "traceur": "0.0.102",
>     "es6-promise": "^3.0.2",
>     "es6-shim": "^0.33.3",
>     "rxjs": "5.0.0-beta.0",
>     "zone.js": "0.5.10",
>     "reflect-metadata": "0.1.2",
>     "systemjs": "0.19.6"   },   "devDependencies": {
>     "del": "^2.2.2",
>     "gulp": "3.9.0",
>     "gulp-rename": "1.2.2",
>     "gulp-symdest": "^1.0.0",
>     "gulp-traceur": "0.17.2",
>     "gulp-webserver": "0.9.1"   } }

Gulpfile.JS

var gulp = require('gulp'),
    del = require('del'),
    rename = require('gulp-rename'),
    traceur = require('gulp-traceur'),
    webserver = require('gulp-webserver'),
    symdest = require('gulp-symdest');

    var config = {
  sourceDir: 'src',
  buildDir: 'build',
  packagesDir: 'packages',
  npmDir: 'node_modules'
};

gulp.task('clean', function() {
  return del(config.buildDir + '/**/*', { force: true });
});


// run init tasks
//gulp.task('default', ['dependencies', 'js', 'html', 'css']);

// run development task
gulp.task('dev', ['dev:watch', 'dev:serve']);

// serve the build dir
gulp.task('dev:serve', function () {
  gulp.src(config.buildDir)
    .pipe(webserver({
      open: true
    }));
});

// watch for changes and run the relevant task
gulp.task('dev:watch', function() {
  gulp.watch(config.sourceDir + '/**/*.js', ['frontend:js']);
  gulp.watch(config.sourceDir + '/**/*.html', ['frontend:html']);
  gulp.watch(config.sourceDir + '/**/*.css', ['frontend:css']);
});

gulp.task('frontend', [
  'frontend:dependencies',
  'frontend:js',
  'frontend:html',
  'frontend:css'
]);

// move dependencies into build dir
gulp.task('frontend:dependencies', function() {
  return gulp.src([
     config.npmDir + '/traceur/bin/traceur-runtime.js',
     config.npmDir + '/systemjs/dist/system-csp-production.src.js',
     config.npmDir + '/systemjs/dist/system.js',
     config.npmDir + '/reflect-metadata/Reflect.js',
     config.npmDir + '/angular2/bundles/angular2.js',
     config.npmDir + '/angular2/bundles/angular2-polyfills.js',
     config.npmDir + '/rxjs/bundles/Rx.js',
     config.npmDir + '/angular2/bundles/router.js',
     config.npmDir + '/es6-shim/es6-shim.min.js',
     config.npmDir + '/es6-shim/es6-shim.map'
  ])
    .pipe(gulp.dest(config.buildDir + '/lib'));
});

// transpile & move js
gulp.task('frontend:js', function() {
  return gulp.src( config.sourceDir + '/**/*.js')
    .pipe(rename({
      extname: ''
    }))
    .pipe(traceur({
      modules: 'instantiate',
      moduleName: true,
      annotations: true,
      types: true,
      memberVariables: true
    }))
    .pipe(rename({
      extname: '.js'
    }))
    .pipe(gulp.dest(config.buildDir));
});

// move html
gulp.task('frontend:html', function() {
  return gulp.src(config.sourceDir + '/**/*.html')
    .pipe(gulp.dest(config.buildDir))
});

// move css
gulp.task('frontend:css', function() {
  return gulp.src(config.sourceDir + '/**/*.css')
    .pipe(gulp.dest(config.buildDir))
});

Answer 1

So the short of it is to make sure the app is structured so Gulp can move all the files it needs to