Webpack-dev-server: serve file other then index.html

[ruben5jami]

i have a index.html file and app.html and i want the http://localhost:3000 to serve the app.html instead of index.html
i am using the cli command node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --port 3000 --host 0.0.0.0 and i couldnt find the configuration to do so.
i cannot change the name of index.html and when i go to http://localhost:3000 it is go to index.html
when i am going to http://localhost:3000/app.html it is going to app.html but my react-router not recognizing the route and logs the message "Location "/app.html" did not match any routes"

[SpaceK33z]

With the historyApiFallback config option you can force that it falls back to a certain html file. See docs.

[ruben5jami]

thank you SpaceK33z.
how can i use it using the command line?

[SpaceK33z]

With --history-api-fallback (also in the docs btw).

[RyoIkarashi]

@SpaceK33z

When I set index: 'index.php' as an option of historyApiFallback, Chrome tries to download HTML contents instead of showing it.

How can I fix this problem?

My webpack.config.js is below.

webpack.config.js

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const fs = require('fs');

const entries = [
  './src/index.js',
];

module.exports = {

  stats: {
    assets: false,
    colors: true,
    version: false,
    hash: true,
    timings: true,
    chunks: true,
    chunkModules: true,
  },

  entry: entries,

  output: {
    path: path.resolve(__dirname, 'dist', 'assets'),
    filename: '[name].js',
  },

  devtool: 'source-map',

  devServer: {
    port: 8000,
    host: 'foobar.example.dev',
    historyApiFallback: {
      index: 'index.php',
    },
    noInfo: false,
    stats: 'minimal',
    contentBase: 'src',
    hot: true,
    inline: true,
    https: true,
    open: false,
    cert: fs.readFileSync(path.resolve(__dirname, '..', 'shared', 'certs', 'foobar.example.dev.crt')),
    key:  fs.readFileSync(path.resolve(__dirname, '..', 'shared', 'certs', 'foobar.example.dev.key')),
    proxy: {
      '/wp-json/*': {
        target: 'https://foobar.example.dev/wp-json',
        port: 443,
        secure: false,
        changeOrigin: true,
      },
    },
  },

  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.js?$/,
        loader: 'eslint-loader',
        options: {
          configFile: '.eslintrc',
        },
        exclude: /(node_modules)/,
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            'css-loader',
            'postcss-loader',
            'sass-loader',
          ],
        }),
      },
      {
        test: /\.(js|jsx)$/,
        loaders: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'stage-1', 'react', 'react-hmre'],
        },
      },
      // Images
      // First use Base64 Encoded images if it is smaller than 10kb
      // Otherwise use hashed images and optimize the image
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: [
          'url-loader?limit=10000&name=images/[name].[hash].[ext]',
        ],
      },
      // Fonts
      {
        test: /\.(eot|ttf|woff|woff2)$/,
        loader: 'file-loader?name=fonts/[name].[ext]',
      },
    ],
  },

  resolve: {
    extensions: ['.js', '.scss', '.css'],
  },

  plugins: [

    new webpack.HotModuleReplacementPlugin(),

    new webpack.NamedModulesPlugin(),

    new StyleLintPlugin({
      configFile: '.stylelintrc',
      context: './src/styles',
      files: '**/*.scss',
    }),

    new webpack.ProvidePlugin({
      "React": "react",
    }),

    new ExtractTextPlugin({
      filename: '/assets/main.css',
      disable: process.env.NODE_ENV !== 'production',
      allChunks: true,
    }),

  ],
};

Here is the result of curl command

curl -I https://foobar.example.dev --insecure

HTTP/2 200
x-powered-by: Express
content-type: text/html; charset=utf-8
content-length: 9577

[chaddjohnson]

I am noticing the same: if I use index.ejs for historyApiFallback.index, Chrome forces a download rather than serving the content as a normal web page. Definitely a bug, or documentation of additionally necessary configuration is missing.

UPDATE: Seems this was caused by the existence of build/index.ejs, so nevermind!

[Awpatterson217]

@chaddjohnson I am having the same problem, could you elaborate on "Seems this was caused by the existence of build/index.ejs"?

Was the problem just having a directory before the entry file?

[chaddjohnson]

@Awpatterson217 It's been a while, so I don't recall well. I think I was trying to send an index.ejs file to a static build directory and have webpack serve that file (and interpolate variables), but that wasn't working. I ended up using index.html instead.

[Awpatterson217]

@chaddjohnson I see, thanks anyway. Do you think it is the .ejs extension that is the problem?

[chaddjohnson]

@Awpatterson217 Something like that. The details are very fuzzy at this point.

[jasonsirota]

I don't think webpack-dev-server will process php or ejs files just by mapping them, you have to compile them first into a static file and then map that using historyApiFallback

This solution worked great when we changed our wrapping single-page-application to a different file name

[ErikEklund]

Same issue here. Trying to serve a file named index.php as the index (contains only html, so no processing needed). But because of the filename, it is just downloaded to disk instead of displayed. Would be good to force content-type or similar to make the browser show something other than .html files.

[rbrisita]

webpack-dev-server won't know how to process files other than HTML. To process with which ever backend you are using, run that backend on another port and proxy all requests to webpack-dev-server to the backend first. To do that, add this to the webpack.config.js file:

devServer: {
    proxy: {
        '*': 'http://localhost:8000'
    }
}

More information here.