Integrieren angular2-webpack-Starter mit NodeJS API REST

Question

Ich möchte lernen angular2 webpack materlias2 Knoten ... etc ... Ich habe diese vorformulierten Verwendung und Änderung: angular2-webpack-starter

Jetzt möchte ich auch lernen NodeJS als Web-Server (mit Express-Framework, oder was auch immer Sie vorschlagen, ein Mysql ORM, etc ...).

Meine Frage ist: Nun, da ich mein Beispielprojekt (aus angular2-webpack-starter) habe, wo ich Dummies Ajax-Aufrufe erstellt habe, wie kann ich mein Projekt mit einer API REST in NodeJS integriert integrieren? Können Sie als einfachen Beispielcode bereitstellen? Und, ausgehend von der eckigen2-webpack-Starter-Tabelle, wo ist der beste Platz, wo Sie den API-Rest-Server-Code platzieren können?

Jeder möglicher anderer Vorschlag

Vielen Dank

Answer 1

Das ist sehr gute Frage geschätzt. Es gibt keine einfache Antwort, aber ich habe einen Knoten js Anwendung und innerhalb ich habe einen Client-Ordner, die ich in den Angular-Webpack-Starter geklont und es funktioniert perfekt. meine starcture ist:

/client 
/models 
/node_module 
/routes 
/views 
server.js 
packages.json 

innerhalb der Routen sollten Sie alle Ihre api Endpunkt setzen.

server.js enthält:

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); 
}); 

und api.js ist:

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; 

ein paar wichtige Hinweise:
1. für Test env Sie den Server ausgeführt werden müssen (nodejs) und den Client (eckig - mit dem Webpack), um dies zu tun, müssen Sie npm start in Ihrem root dir und npm start in Ihrem Client-Verzeichnis ausführen. Danach laufen 2 Server in Port 3000 und einer in Port 3003. Also müssen Sie nur auf den Client-Server in 3000 (das für Sie konfigurierte Webpack) gehen und Ihre App sehen.
2. Wenn Sie sich fragen, wie Sie http an Ihren Server senden können, wenn sie nicht im selben Port sind (was eine gute Frage ist), müssen Sie nur das Webpack verwenden, um Ihre Anfrage an den richtigen Ort zu übertragen , fügen Sie diese zu webpack.dev.js hinzu:

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