title: Join existing angular app to express backend
body: <p>I have a fairly basic angular app and a basic express api set up for user authorization at the moment. Each work independently one express starts with npm start and the angular stuff is started with gulp. (the angular came from a yeoman gulp-material-angular generator. How do I connect them efficiently without mangling the code structure? </p>
  
  <p>As I write this I am thinking it is likely I need to inject the express stuff into the angular part and not the other way around. I am just a bit lost in the files. </p>
  
  <p>I tried using my <strong>src/</strong> folder instead of <strong>public</strong> in express with no success.</p>
  
  <pre><code>// express &gt;&gt; app.js
  var express = require('express');
  var path = require('path');
  var favicon = require('serve-favicon');
  var logger = require('morgan');
  var cookieParser = require('cookie-parser');
  var bodyParser = require('body-parser');
  var session = require('express-session');
  var passport = require('passport');
  //init mongoose scheemas
  require("./models/users");
  require("./models/markers");
  var index = require('./routes/index');
  var api = require('./routes/api');
  var auth = require('./routes/auth')(passport);
  var mongoose = require('mongoose');
  // connect to db
  mongoose.connect("mongodb://localhost/comdb");
  
  
  var app = express();
  
  // view engine setup
  app.set('views', path.join(__dirname, '../.tmp'));
  app.set('view engine', 'ejs');
  // uncomment after placing your favicon in /public
  //app.use(favicon(__dirname + '/public/favicon.ico'));
  app.use(logger('dev'));
  app.use(session({
    secret: 'keyboard cat'
  }));
  app.use(bodyParser.json());
  app.use(bodyParser.urlencoded({ extended: false }));
  app.use(cookieParser());
  app.use(express.static(path.join(__dirname, '../dist')));
  
  // Passport
  app.use(passport.initialize());
  app.use(passport.session());
  
  app.use('/', index);
  app.use('/auth', auth);
  app.use('/api', api);
  
  // catch 404 and forward to error handler
  app.use(function(req, res, next) {
      var err = new Error('Not Found');
      err.status = 404;
      next(err);
  });
  
  //// Initialize Passport
  var initPassport = require('./passportInit');
  initPassport(passport);
  
  // error handlers
  
  // development error handler
  // will print stacktrace
  if (app.get('env') === 'development') {
      app.use(function(err, req, res, next) {
          res.status(err.status || 500);
          res.render('error', {
              message: err.message,
              error: err
          });
      });
  }
  
  // production error handler
  // no stacktraces leaked to user
  app.use(function(err, req, res, next) {
      res.status(err.status || 500);
      res.render('error', {
          message: err.message,
          error: {}
      });
  });
  
  
  module.exports = app;
  </code></pre>
  
  <p>As a side note it would be nice to be able to run them with one gulp command.</p>
  
  <p>My app structure follows. If you need to see any code please let me know and I will post it. I left it out for the sake of clenlyness. </p>
  
  <pre><code>.
  ├── README.md
  ├── bower.json
  ├── bower_components
         //removed to save space
  ├── dist
  │   ├── app
  │   ├── assets
  │   ├── favicon.ico
  │   ├── index.html
  │   ├── scripts
  │   └── styles
  ├── e2e
  │   ├── main.po.js
  │   └── main.spec.js
  ├── gulp
          //removed to save space
  ├── gulpfile.js
  ├── karma.conf.js
  ├── node_modules
          //removed to save space
  ├── package.json
  ├── protractor.conf.js
  ├── server
  │   ├── app.js
  │   ├── bin
  │   ├── models
  │   ├── node_modules
  │   ├── npm-debug.log
  │   ├── package.json
  │   ├── passportInit.js
  │   ├── public
  │   ├── routes
  │   └── views
  └── src
      ├── app
      ├── assets
      ├── favicon.ico
      └── index.html
  </code></pre>