node.js - Running a node express server using webpack-dev-server -


i'm using webpack run react frontend using following config:

{     name: 'client',     entry: './scripts/main.js',     output: {         path: __dirname,         filename: 'bundle.js'       },     module: {         loaders: [             {                 test: /.jsx?$/,                 loader: 'babel-loader',                 exclude: /node_modules/,                 query:{                     presets: ['es2015', 'react', 'stage-2']                 }             }         ]     } } 

i'm trying put node.js express backend well, , run through webpack well, have single server running both backend , frontend, , because want use babel transpile javascript.

i made quick testserver looking this:

var express = require('express'); console.log('test');  var app = express();  app.get('/', function(req, res){     res.send("hello world express!!"); });  app.listen(3000, function(){     console.log('example app listening on port 3000'); }); 

if run node index.js , open browser on localhost:3000 prints "hello world express!!". far good. tried creating web-pack config it:

var fs = require('fs'); var nodemodules = {}; fs.readdirsync('node_modules')     .filter(function(x) {         return ['.bin'].indexof(x) === -1;     })     .foreach(function(mod) {         nodemodules[mod] = 'commonjs ' + mod;     });  module.exports = [ {     name: 'server',     target: 'node',     entry: './index.js',     output: {         path: __dirname,         filename: 'bundle.js'     },     externals: nodemodules,     module: {         loaders: [             {                  test: /\.js$/,                 loaders: [                     'babel-loader'                 ]             },             {                 test:  /\.json$/,                  loader: 'json-loader'             }         ]     } }    

when run command webpack-dev-server starts (it seems). however, if go browser on localhost:3000 now, says webpage not available, when server not running @ all.

i'm new both node , webpack, either have made small mistake somewhere, or i'm way off ;)

webpack-dev-server great client side development not deploy express api's or middleware. in development recommend running 2 separate servers: 1 client , 1 server side api's.

nodemon npm install --save-dev nodemon backend development server give hot-redeploy of api's, or can use express , restart when make changes. in production client , api still served same express server.

set lifecycle event both nodemon , webpack-dev-server in package.json make starting them easy (example: npm run dev-server).

"scripts": {    "start": "webpack --progress --colors",    "dev-server": "nodemon ./server.js localhost 8080",    "dev-client": "webpack-dev-server --port 3000", } 

or, run express directly node:

"scripts": {    "start": "webpack --progress --colors",    "dev-server": "node dev-server.js",    "dev-client": "webpack-dev-server --port 3000", } 
// dev-server.js const express = require('express'); const app = express(); // import routes require('./_routes')(app);   // <-- or whatever include api endpoints , middleware app.set('port', 8080); app.listen(app.get('port'), function() {     console.log('node app started'); }); 

note: api server must use different port webpack-dev-server.

and in webpack-dev-config need use proxy redirect calls api new port:

devserver: {   historyapifallback: true,   hot: true,   inline: true,    host: 'localhost', // defaults `localhost`   port: 3000, // defaults 8080   proxy: {     '^/api/*': {       target: 'http://localhost:8080/api/',       secure: false     }   } }, // , separately, in plugins section plugins: [   new webpack.hotmodulereplacementplugin({     multistep: true   }) ] 

**bonus points having single script start , kill both


Comments

Popular posts from this blog

sublimetext3 - what keyboard shortcut is to comment/uncomment for this script tag in sublime -

java - No use of nillable="0" in SOAP Webservice -

ubuntu - Laravel 5.2 quickstart guide gives Not Found Error -