How to use connect-history-api-fallback - 10 common examples

colors: true,
    chunks: false
  }
})
const hotMiddleware = webpackHotMiddleware(compiler)

// force page reload when html-webpack-plugin template changes
compiler.plugin('compilation', function (compilation) {
  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
    hotMiddleware.publish({ action: 'reload' })
    cb()
  })
})

// handle fallback for HTML5 history API
app.use(history())

app.use(webpackMiddleware)
app.use(hotMiddleware)

app.listen(WEBPACK_SERVER_PORT, '0.0.0.0', function () {
  console.log(chalk.yellow('Webpack dev-server listening at:'))
  console.log(chalk.green(`  http://localhost:${WEBPACK_SERVER_PORT}`))
  console.log(chalk.green(`  http://${CURRENT_IP}:${WEBPACK_SERVER_PORT} \n`))
})

import cors from 'koa-cors'
import config from './config'
// import clientConfig from '../config'
import router from './router'
import koaBody from 'koa-body'
import logger from 'koa-logger'
import compress  from 'koa-compress'
import c2k from 'koa2-connect'
import history from 'connect-history-api-fallback'
import http from 'http'
import serve from 'koa-static'
import path from 'path'

const app = new Koa()

app.use(c2k(history({
  verbose: true
})));

app.use(compress({
  // filter: function (content_type) {
  //   return /text/i.test(content_type)
  // },
  threshold: 2048,
  flush: require('zlib').Z_SYNC_FLUSH
}))
/**
 * body解析
 */
app.use(convert(koaBody({
  formidable: {
    uploadDir: config.uploadDir

import * as NUClearNetProxyParser from '../shared/nuclearnet/nuclearnet_proxy_parser'
import { VirtualRobots } from '../virtual_robots/virtual_robots'

import { WebSocketProxyNUClearNetServer } from './nuclearnet/web_socket_proxy_nuclearnet_server'
import { WebSocketServer } from './nuclearnet/web_socket_server'

const args = minimist(process.argv.slice(2))
const withVirtualRobots = args['virtual-robots'] || false
const nuclearnetAddress = args.address || '10.1.255.255'

const app = express()
const server = http.createServer(app)
const sioNetwork = sio(server, { parser: NUClearNetProxyParser } as any)

const root = `${__dirname}/../../dist`
app.use(history({
  rewrites: [
    // Allows user to navigate to /storybook/ without needing to type /index.html
    { from: /\/storybook\/$/, to: 'storybook/index.html' },
  ],
}))
app.use(compression())
app.use(express.static(root))
app.use(favicon(`${__dirname}/../assets/favicon.ico`))

const port = process.env.PORT || 9090
server.listen(port, () => {
  // tslint:disable-next-line no-console
  console.log(`NUsight server started at http://localhost:${port}`)
})

if (withVirtualRobots) {

compilation.plugin('html-webpack-plugin-after-emit', (data, cb) => {
        if (cb) {
            cb();
        }
    });
});

Object.keys(proxyTable).forEach((context) => {
    let options = proxyTable[context];
    if (typeof options === 'string') {
        options = { target: options };
    }
    app.use(proxyMiddleware(options.filter || context, options));
});

app.use(connectionHistoryApiFallback());

app.use(devMiddleware);

app.use(hotMiddleware);

const staticPath = path.posix.join('/');
app.use(staticPath, express.static('./static'));
app.use(staticPath, express.static('./public'));

const uri = `http://${host}:${port}`;

devMiddleware.waitUntilValid(() => {
    console.log(`> Listening at ${uri}\n`);
});

// @ts-ignore

'/graphql': `http://localhost:${config.graphql.port}`
    },
    stats: {
      colors: true
    },
    hot: true,
    historyApiFallback: true
  });

  // Serve static resources
  relayServer.use('/', express.static(path.join(__dirname, '../build')));
  relayServer.listen(config.port, () => console.log(chalk.green(`Relay is listening on port ${config.port}`)));
} else if (config.env === 'production') {
  // Launch Relay by creating a normal express server
  const relayServer = express();
  relayServer.use(historyApiFallback());
  relayServer.use('/', express.static(path.join(__dirname, '../build')));
  relayServer.use('/graphql', graphQLHTTP({schema}));
  relayServer.listen(config.port, () => console.log(chalk.green(`Relay is listening on port ${config.port}`)));
}

import path from 'path'
import browserSync from 'browser-sync'
import webpack from 'webpack'
import httpProxyMiddleware from 'http-proxy-middleware'
import webpackDevMiddleware from 'webpack-dev-middleware'
import webpackHotMiddleware from 'webpack-hot-middleware'
import historyApiFallbackMiddleware from 'connect-history-api-fallback'
import config from './webpack.config'
import { sassImport } from './utilities'
import { srcPath, sassImportPath } from './paths'

const bundler = webpack(config)
const middlewares = []

middlewares.push(historyApiFallbackMiddleware())

// add webpack stuff
middlewares.push(webpackDevMiddleware(bundler, {
  publicPath: config.output.publicPath,
  stats: {
    colors: true,
    chunks: false,
  },
}))

// add hot reloading
middlewares.push(webpackHotMiddleware(bundler))

// start browsersync
const url = 'http://localhost'
const bs = browserSync.create()

export async function serve(bundlePath: string) {
  const config = readConfig();
  /* 
    Note that if people want to customize this 
    they can just use build-openapi-platform-frontend
  */
  const app = express()
    .use(history())
    .use('/', express.static(bundlePath));

  const port = config.get('ui.port');
  return await new Promise((resolve, reject) => {
    try {
      // TODO: Consider resolving the app itself instead.
      app.listen(port, () => {
        resolve(port);
      });
    } catch (err) {
      reject(err);
    }
  });
}

function serve(): Promise {
  const compiler = webpack(webpackDevConfig);
  const bs = browserSync.create();

  bs.init({
    open: false,
    server: {
      baseDir: `./${config.buildDir}`,
      middleware: [
        historyApiFallback(),
        webpackDevMiddleware(compiler, {
          publicPath: webpackDevConfig.output.publicPath,
          stats: { chunks: false, colors: true }
        }),
        webpackHotMiddleware(compiler)
      ]
    },
    files: [
      './src/index.ejs'
    ]
  });

  return Promise.resolve({ skip: true });
}

add: (app: any) => {
        app.use(
          convert(
            history({
              verbose: false,
              htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'],
              index: '/index.html',
            }),
          ),
        );
      },
      content: path.resolve(__dirname, '..', 'root'),

add: (app, middleware, finalOptions) => {
          app.use(
            webpackServeWaitpage(finalOptions, {
              title: 'Ignite Dev Server',
              theme: 'material'
            })
          );

          app.use(
            convert(
              history({
                ...webpackConfig.devServer.historyApiFallback
              })
            )
          );
        },
        on: {