Express, webpack-dev-sever findet nicht React Index

Question

Ich bin sehr neu von Express und Server-Seite im Allgemeinen, für meine kleine Reaktion Messaging App verwende ich Express für das Back-End (eine JSON-Datei) und Webpack Dev-Server für das Frontend. Wenn ich nur den Webpack-Server starte, wird die App korrekt angezeigt, wenn ich probiere, dass die beiden zusammen funktionieren und ich denke, das Problem ist die Proxy-Konfiguration von webpack-dev-server.

Hier ist mein Express-Server, json-api-server.js:

var express = require('express'); 
var serveStatic = require('serve-static'); 
var fs = require('fs'); 
var path = require('path'); 
var bodyParser = require('body-parser'); 


module.exports = (PORT) => { 

    const MESSAGES_FILE = path.join(__dirname, 'src/app/data/messages.json'); 
    const app = express(); 

    app.use(serveStatic(__dirname + '/build')); 
    app.use(bodyParser.json()); 
    app.use(bodyParser.urlencoded({extended: true})); 

    // Additional middleware which will set headers that we need on each request. 
    app.use(function(req, res, next) { 
     // Set permissive CORS header - this allows this server to be used only as 
     // an API server in conjunction with something like webpack-dev-server. 
     res.setHeader('Access-Control-Allow-Origin', '*'); 

     // Disable caching so we'll always get the latest comments. 
     res.setHeader('Cache-Control', 'no-cache'); 
     next(); 
    }); 

    app.get('/messages', function(req, res) { 
    fs.readFile(MESSAGES_FILE, function(err, data) { 
     if (err) { 
     console.error(err); 
     process.exit(1); 
     } 
     res.json(JSON.parse(data)); 
    }); 
    }); 

    app.post('/messages', function(req, res) { 
    fs.readFile(MESSAGES_FILE, function(err, data) { 
     if (err) { 
     console.error(err); 
     process.exit(1); 
     } 
     var messages = JSON.parse(data); 

     var newMessage = { 
     id: Date.now(), 
     body: req.body.body, 
     date: req.body.date, 
     from: req.body.from, 
     to: req.body.to 
     }; 
     messages.push(newMessage); 
     fs.writeFile(MESSAGES_FILE, JSON.stringify(messages, null, 4), function(err) { 
     if (err) { 
      console.error(err); 
      process.exit(1); 
     } 
     res.json(messages); 
     }); 
    }); 
    }); 

    app.listen(PORT, function (err) { 
    if (err) { 
     return console.log(err); 
    } 
    console.log('Listening at' + PORT); 
    }); 
} 

Dies ist webpack-server.js:

var webpack = require('webpack'); 
var WebpackDevServer = require('webpack-dev-server'); 
var config = require('./webpack.config'); 


module.exports = (PORT) => { 
    const backendPort = PORT - 1; 
    const server = new WebpackDevServer(webpack(config), { 
    publicPath: config.output.publicPath, 
    hot: true, 
    historyApiFallback: true, 
    proxy: { 
     '*' : { 
     target: 'http://localhost:' + backendPort 
     } 
    } 
    }); 
    server.listen(PORT, 'localhost', function (err) { 
    if (err) { 
     return console.log(err); 
    } 
    console.log('Listening at ' + PORT); 
    }); 
} 

Und hier ist server.js:

var apiServer = require('./json-api-server'); 
var webpackServer = require('./webpack-server'); 

const PORT = process.env.PORT || 4001; 
const PROD = process.env.NODE_ENV === 'production'; 

if (PROD) { 
    apiServer(PORT); 
} else { 
    apiServer(PORT - 1); 
    webpackServer(PORT); 
} 

Mein Dateibaum sieht wie folgt aus:

---/
----- server.js 
----- webpack-server.js 
----- json-api-server.js 
----- src/ 
------- app/index.js 
------- app/data/ 
-------------- messages.json 

Beide Server starten korrekt und sie geben keine Fehler im Terminal Ich kann localhost erreichen: 4000/Nachrichten Ich kann localhost nicht erreichen: 4001. Ich habe: "Kann nicht bekommen /"

Irgendwelche hilft? :)

Answer 1

Got it! Das Symbol * bedeutet hier: Verwenden Sie "*", um alle Pfade zum angegebenen Server zu übernehmen.

proxy: { 
     '*' : { 
     target: 'http://localhost:' + backendPort 
     } 
    } 

Das bringt meinen Index zu undefiniert.

Also muss ich den Schlüssel an den Ort zeigen, wo meine json (oder api) lebt:

proxy: { 
      '/messages' : { 
      target: 'http://localhost:' + backendPort 
      } 
     } 

Als Referenz ist dies auch eine gültige Lösung:

proxy: { 
'/messages': 'http://localhost:' + backendPort 
}