This is very good question.
There is no one simple answer, however I have a node js application and inside i have a client folder which I cloned into the Angular-webpack-starter and it works perfectly.
my starcture is:
/client
/models
/node_module
/routes
/views
server.js
packages.json
inside the routes you should put all your api endpoint.
server.js contains:
var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');
var cookieParser = require('cookie-parser');
var index = require('./routes/index');
var api = require('./routes/api');
var test = require('./routes/api');
var users = require('./routes/users');
var expressValidator = require('express-validator');
var app = express();
var port = process.env.PORT || 3003;
var proto = process.env.PROTO || "http";
var host = process.env.HOST || "localhost";
//view engine
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);
//static
app.use(express.static(path.join(__dirname, 'client')));
//body parser and validator
app.use(bodyParser.json({limit: '50mb'}));
app.use(bodyParser.urlencoded({limit: '50mb', extended: true}));
app.use(expressValidator());
app.use(cookieParser());
app.use('/', index);
app.use('/api', api);
app.use('/users', users);
app.use('/test', test);
var server = app.listen(port, host, function(){
console.log('app listening at port:' + port);
});
and api.js is:
var express = require('express');
var router = express.Router();
var fs = require('fs');
var path = require('path');
router.get('/analytics', function(req, res) {
res.json({
'response':'1',
'body':'I just remember something, something important..."
});
});
module.exports = router;
a few important notes:
1. for test env you need to run the server(nodejs) and the client(angular - using the webpack), so in order to do this you need to run npm start in your root dir and npm start in your client dir. after that 2 servers are running one in port 3000 and one in port 3003. so all you need to do is go to the client server in 3000 (that webpack configured for you) and see your app.
2. if you ask yourself so how can you send http to your server if they are not in the same port (which is a good question) - all you need to do is using the webpack to proxy your request to the right place, add this to webpack.dev.js:
devServer: {
port: METADATA.port,
host: METADATA.host,
historyApiFallback: true,
watchOptions: {
aggregateTimeout: 300,
poll: 1000
},
proxy: {
'/users/login': {
target: 'http://localhost:3003'
},
'/users/register': {
target: 'http://localhost:3003'
},
'/users/forgot-password': {
target: 'http://localhost:3003'
},
'/users/reset': {
target: 'http://localhost:3003'
},
'/users/confirm': {
target: 'http://localhost:3003'
},
'/api/getUserProfile': {
target: 'http://localhost:3003'
},
'/api/postEditableUserProfile': {
target: 'http://localhost:3003'
},
'/api/upload-avatar': {
target: 'http://localhost:3003'
},
'/api/analytics': {
target: 'http://localhost:3003'
},
'/api/contact': {
target: 'http://localhost:3003'
}
}
},