React BrowserRouter with BrowserSync HistoryApiFallback Middleware?

[derdrdirk]

I have a question concerning the configuration of the BrowserSync middleware. I want to use <BrowserRouter>, but while refreshing different routes than the Root path I get the error: Cannot GET /faq. To fix this I tried to configure the BrowserSync middleware with the connect-history-api-fallback package like so:

\\ task-config.js
historyApiFallback = require('connect-history-api-fallback')
...
browserSync: {
    server: {
      baseDir: "public",
      middleware: [ historyApiFallback() ],
    },
  },

I am still getting the errors what am I missing?

[maoueh]

@Knowledge91 Update to latest version of blendid. Make sure it's version 4.4.1 that being pulled down.

Then, change you snippet above to:

  browserSync: {
    server: {
      baseDir: 'public',
      extraMiddlewares: [historyApiFallback()],
    },
  },

Don't forget to update all you assets so they are relative to the root url and not relative to the current url. For example, using /app.css instead of app.css in the main index.html file:

<link rel="stylesheet" href="app.css">

vs

<link rel="stylesheet" href="/app.css">

Same thing should be done with all static assets served. I have this exact setup on my project and we are using BrowserRouter no problem.

[maoueh]

@Knowledge91 Were you able to make it work? Can we close the issue?