Integrate angular2-webpack-starter with NodeJS API REST

Question

I would like to learn angular2 webpack materlias2 node...etc... I started using and modifying this boilerplate: angular2-webpack-starter

Now I want to learn also nodejs as web server (with express framework, or whatever you suggest, an mysql ORM, etc...).

My question is: Now that I've my example project (coming from angular2-webpack-starter) where I've created a dummies ajax calls, how can I integrate my project with a API REST written in NodeJS? Can you provide as simple example code? And also, starting from the angular2-webpack-starter boilerplate, where is the best place where to put all the API rest server code?

Any other suggestion will be appreciated

Thank you very much

Answer 1

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'
       }
      }
    },