Testing API's With React Bundled With Webpack - node.js

Question

I'm having trouble trying to run my API's when running my frontend react code. I am using webpack and webpack dev server but the problem seems to be that they run their own server while my apis are run by another. I think I can either make my application run entirely in my express backend but having trouble how or somehow use webpack dev server to run both. my backend express node looks like this
const express = require('express');
const bodyparser = require('body-parser');
const app = express();
require('./api/findMedia.js')(app)
var PORT = process.env.PORT || 8080;
const server = app.listen(PORT, () => {
console.log('server is working : ')
})
my webpack config looks like this. You can ignore my proxy key. I was testing webpack dev server to simultaneously run my express server.
var webpack = require("webpack");
var path = require('path');
module.exports = {
entry: {
app: "./src/app.js"
},
output: {
filename: "build/bundle.js",
sourceMapFilename: "build/bundle.map"
},
devtool: '#source-map',
devServer : {
historyApiFallback : true,
hot : true,
inline: true,
host: 'localhost',
port: 3000,
stats: 'errors-only',
proxy : {
'/api': {
host: 'localhost',
protocol: 'http',
port: 8080
}
}
},
plugins : [new webpack.HotModuleReplacementPlugin({multiStep: true})],
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
},
{
test: /\.css$/,
loader: 'style!css'
}
]
}
}
and finally I call it in the front end with a simple post request using axios and inside my componentdidmount
componentDidMount(){
axios({
method: 'post',
url: '/find/media'
}).then((response)=>{
console.log('post request to mongo data from front end a success: ' + response)
console.log(response.data.findArticles)
}).catch((error)=>{
console.log('error'+error)
})
}

Answer 1

webpack-dev-server creates it's own server, like you said. If you want to run both webpack-dev-server and express, then you will need the proxy key in the devServer configuration object.
proxy : {
'/api': 'http://localhost:8080'
}
With your setup, what that would do is proxy any request beginning with /api to http://localhost:8080/api. So from your React code, you would do:
axios({
method: 'post',
url: '/api/find/media'
...
})
which webpack-dev-server would proxy to http://localhost:8080/api/find/media.
If your express router is listening for just '/find/media' the devServer.proxy config object has a rewritePath key.
proxy : {
'/api': {
target: 'http://localhost:8080',
rewritePath: {'^/api' : ''}
}
}
If you want express to handle everything, then I think you can use webpack-dev-middleware.