Join existing angular app to express backend

Question

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?

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.

I tried using my src/ folder instead of public in express with no success.

// express >> 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;

As a side note it would be nice to be able to run them with one gulp command.

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.

.
├── 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

Answer 1

This may not be exactly what you are looking for (I am not really familiar with gulp) but this has worked for me and perhaps will point you in the right direction.

Production Version:

My express server was set up about the same as yours, and I pointed the static path directly to my dist folder. Then I added a single app.get pointing to the index.html file in that folder. That allows your Angular app to run the entire front end.

// Point static path to dist
    app.use(express.static(path.join(__dirname, '../dist')));    

// Home route to serve the index file
    app.get('/', (req, res) => {
      res.sendFile(path.join(__dirname, '../dist/index.html'));
    });

Then, I went into my angular app package.json and edited my start command to run "ng build" (I think you could sub in "gulp" to run it instead of the ng build command) and node. Now "npm start" will build the app and start the server. It gives me a working version of my production app.

"scripts": {
    "ng": "ng",
    "start": "ng build && node server.js",
    ....
}

Dev Version:

I haven't tried this yet (I'll do it today and let you know), but if you wanted to have this all run in an active dev environment that updates with changes to either files you should be able to reference your "src/index.html" and use ng serve and nodemon in your start command.

Express server/app.js:

// Point static path to dist
    app.use(express.static(path.join(__dirname, 'src')));    

// Home route to serve the index file
    app.get('/', (req, res) => {
      res.sendFile(path.join(__dirname, 'src/index.html'));
    });

Angular package.json:

"scripts": {
    "ng": "ng",
    "start": "ng serve && nodemon server.js",
    ....
}