CODEWITHSUNDEEP
node.jsreactjsexpressdockerwebpack
Ritish Gumber
Ritish Gumber

Reputation: 21

Running webpack-dev server through express

I am currently running my project by executing webpack-dev-server , but now I want to run my project through express app. What are the steps to do the same.

Package.json:

    {
  "name": "react-redux-template",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "webpack",
    "start": "webpack-dev-server"
  },
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.10.4",
    "babel-loader": "^6.2.4",
    "babel-plugin-react-html-attrs": "^2.0.0",
    "babel-plugin-transform-class-properties": "^6.19.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-polyfill": "^6.9.1",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.16.0",
    "babel-register": "^6.9.0",
    "cross-env": "^1.0.8",
    "css-loader": "^0.23.1",
    "expect": "^1.20.1",
    "express": "^4.14.0",
    "node-libs-browser": "^1.0.0",
    "node-sass": "^3.8.0",
    "path": "^0.12.7",
    "react": "^15.1.0",
    "react-addons-test-utils": "^15.1.0",
    "react-bootstrap": "^0.30.7",
    "react-dom": "^15.1.0",
    "react-dropzone": "^3.8.0",
    "react-hot-loader": "^1.3.1",
    "react-redux": "^4.4.5",
    "react-router": "^3.0.0",
    "redux": "^3.5.2",
    "redux-logger": "^2.6.1",
    "redux-promise": "^0.5.3",
    "redux-thunk": "^2.1.0",
    "sass-loader": "^4.0.0",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.1",
    "webpack-dev-middleware": "^1.6.1",
    "webpack-dev-server": "^1.14.1",
    "webpack-hot-middleware": "^2.11.0"
  },
  "devDependencies": {
    "babel-plugin-react-transform": "^2.0.2"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/ritishgumber/file-ui.git"
  },
  "author": "",
  "bugs": {
    "url": "https://github.com/ritishgumber/file-ui/issues"
  },
  "homepage": "https://github.com/ritishgumber/file-ui#readme"
}

webpack.config.js

    var path = require('path');
var webpack = require('webpack');

module.exports = {
  devServer: {
    inline: true,
    contentBase: './src',
    port: 3000
  },
  entry: './dev/js/index.js',
  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: ['babel'],
        exclude: /node_modules/
      }, {
        test: /\.scss/,
        loader: 'style-loader!css-loader!sass-loader'
      }, {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: [
            'react', 'es2015', 'stage-0'
          ],
          plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties']
        }
      }
    ]
  },
  output: {
    path: 'src',
    filename: 'js/bundle.min.js'
  },
  plugins: [new webpack.optimize.OccurrenceOrderPlugin()]
};

Upvotes: 1

Views: 1271

Answers (1)

Jacob
Jacob

Reputation: 78850

You'll want to use the webpack dev middleware. Sample code from their site:

var webpackDevMiddleware = require("webpack-dev-middleware");
var webpack = require("webpack");

var compiler = webpack({
    // configuration
    output: { path: '/' }
});

app.use(webpackDevMiddleware(compiler, {
    // options
}));

Upvotes: 2

Related Questions