404 Cannot GET /

[BerndWessels]

Hi I can't get it to work - and I actually don't see how it possible since webpack serves from memory and not the file system. Webpack serves well on localhost:8080 but BrowserSyncPlugin on localhost:3000 returns 404.

This is the config I use with BUILD = false and TEST = false:

// Modules
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var BrowserSyncPlugin = require('browser-sync-webpack-plugin');

module.exports = function makeWebpackConfig (options) {
  /**
  * Environment type
  * BUILD is for generating minified builds
  * TEST is for generating test builds
  */
  var BUILD = !!options.BUILD;
  var TEST = !!options.TEST;

  /**
  * Config
  * Reference: http://webpack.github.io/docs/configuration.html
  * This is the object where all configuration gets set
  */
  var config = {};

  /**
  * Entry
  * Reference: http://webpack.github.io/docs/configuration.html#entry
  * Should be an empty object if it's generating a test build
  * Karma will set this when it's a test build
  */
  if (TEST) {
    config.entry = {}
  } else {
    config.entry = {
      app: './src/app.js'
    }
  }

  /**
  * Output
  * Reference: http://webpack.github.io/docs/configuration.html#output
  * Should be an empty object if it's generating a test build
  * Karma will handle setting it up for you when it's a test build
  */
  if (TEST) {
    config.output = {}
  } else {
    config.output = {
      // Absolute output directory
      path: __dirname + '/public',

      // Output path from the view of the page
      // Uses webpack-dev-server in development
      publicPath: BUILD ? '/' : 'http://localhost:8080/',

      // Filename for entry points
      // Only adds hash in build mode
      filename: BUILD ? '[name].[hash].js' : '[name].bundle.js',

      // Filename for non-entry points
      // Only adds hash in build mode
      chunkFilename: BUILD ? '[name].[hash].js' : '[name].bundle.js'
    }
  }

  /**
  * Devtool
  * Reference: http://webpack.github.io/docs/configuration.html#devtool
  * Type of sourcemap to use per build type
  */
  if (TEST) {
    config.devtool = 'inline-source-map';
  } else if (BUILD) {
    config.devtool = 'source-map';
  } else {
    config.devtool = 'source-map'; //'eval';
  }

  /**
  * Loaders
  * Reference: http://webpack.github.io/docs/configuration.html#module-loaders
  * List: http://webpack.github.io/docs/list-of-loaders.html
  * This handles most of the magic responsible for converting modules
  */

  // Initialize module
  config.module = {
    preLoaders: [],
    loaders: [{
      // JS LOADER
      // Reference: https://github.com/babel/babel-loader
      // Transpile .js files using babel-loader
      // Compiles ES6 and ES7 into ES5 code
      test: /\.js$/,
      loader: 'babel',
      exclude: /(node_modules|bower_components)/
    }, {
      // ASSET LOADER
      // Reference: https://github.com/webpack/file-loader
      // Copy png, jpg, jpeg, gif, svg, woff, woff2, ttf, eot files to output
      // Rename the file using the asset hash
      // Pass along the updated reference to your code
      // You can add here any file extension you want to get copied to your output
      test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
      loader: 'file'
    }, {
      // HTML LOADER
      // Reference: https://github.com/webpack/raw-loader
      // Allow loading html through js
      test: /\.html$/,
      loader: 'raw'
    }]
  };

  // ISPARTA LOADER
  // Reference: https://github.com/ColCh/isparta-instrumenter-loader
  // Instrument JS files with Isparta for subsequent code coverage reporting
  // Skips node_modules and files that end with .test.js
  if (TEST) {
    config.module.preLoaders.push({
      test: /\.js$/,
      exclude: [
        /(node_modules|bower_components)/,
        /\.test\.js$/
      ],
      loader: 'isparta-instrumenter'
    })
  }

  // CSS LOADER
  // Reference: https://github.com/webpack/css-loader
  // Allow loading css through js
  //
  // Reference: https://github.com/postcss/postcss-loader
  // Postprocess your css with PostCSS plugins
  var cssLoader = {
    test: /\.css$/,
    // Reference: https://github.com/webpack/extract-text-webpack-plugin
    // Extract css files in production builds
    //
    // Reference: https://github.com/webpack/style-loader
    // Use style-loader in development for hot-loading
    loader: ExtractTextPlugin.extract('style', 'css?sourceMap!postcss')
  };

  // Skip loading css in test mode
  if (TEST) {
    // Reference: https://github.com/webpack/null-loader
    // Return an empty module
    cssLoader.loader = 'null'
  }

  // Add cssLoader to the loader list
  config.module.loaders.push(cssLoader);

  /**
  * PostCSS
  * Reference: https://github.com/postcss/autoprefixer-core
  * Add vendor prefixes to your css
  */
  config.postcss = [
    autoprefixer({
      browsers: ['last 2 version']
    })
  ];

  /**
  * Plugins
  * Reference: http://webpack.github.io/docs/configuration.html#plugins
  * List: http://webpack.github.io/docs/list-of-plugins.html
  */
  config.plugins = [
    // Reference: https://github.com/webpack/extract-text-webpack-plugin
    // Extract css files
    // Disabled when in test mode or not in build mode
    new ExtractTextPlugin('[name].[hash].css', {
      disable: !BUILD || TEST
    })
  ];

  // Skip rendering index.html in test mode
  if (!TEST) {
    // Reference: https://github.com/ampedandwired/html-webpack-plugin
    // Render index.html
    config.plugins.push(
      new HtmlWebpackPlugin({
        template: './src/index.html',
        inject: 'body'
      })
    )
  }

  // Add build specific plugins
  if (BUILD) {
    config.plugins.push(
      // Reference: http://webpack.github.io/docs/list-of-plugins.html#noerrorsplugin
      // Only emit files when there are no errors
      new webpack.NoErrorsPlugin(),

      // Reference: http://webpack.github.io/docs/list-of-plugins.html#dedupeplugin
      // Dedupe modules in the output
      new webpack.optimize.DedupePlugin(),

      // Reference: http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
      // Minify all javascript, switch loaders to minimizing mode
      new webpack.optimize.UglifyJsPlugin()
    )
  }

  // Add dev specific plugins
  if (!TEST && !BUILD) {
    config.plugins.push(
      // Reference: http://webpack.github.io/docs/list-of-plugins.html#noerrorsplugin
      // Only emit files when there are no errors
      new BrowserSyncPlugin({
          host: 'localhost',
          port: 3000,
          server: { baseDir: ['public'] }
        })
    )
  }

  /**
  * Dev server configuration
  * Reference: http://webpack.github.io/docs/configuration.html#devserver
  * Reference: http://webpack.github.io/docs/webpack-dev-server.html
  */
  config.devServer = {
    contentBase: './public',
    stats: {
      modules: false,
      cached: false,
      colors: true,
      chunk: false
    }
  };

  return config;
};

[Va1]

Hey @BerndWessels !

As you can read out in #4 (latest comments in particular), webpack should be serving and browser-sync should be proxying. But, personally, I did not try to set up the stuff this way.

Or I may have misunderstood your needs, let me know if this helps you.

[BerndWessels]

@Va1 Hi, yes thank you. It took a while to get it right. I think this is worth putting into the Git Readme - since this is a complicated but very common configuration. And finding the proxying information somewhere berried in a closed Git Issue is not really a good starting point.

Thank you

[Va1]

@BerndWessels Indeed sounds like a good idea. So, as you did set it up and working, can't you provide a pull request with proper code snippets/comments related to this issue for readme, please? If you want, of course!

Cheers

[BerndWessels]

@Va1 I made a pull request to extend the readme with more information. Cheers Bernd

[Va1]

@BerndWessels Looks cool! I did some corrections in order to make it less verbose and more structured, hope you'll like it. Thank you!