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
Post a Comment