Using browser-sync with vue js and framework7

Question

I have created a PWA using vue js 2.0 and framework7 and also use Webpack for bundling. I want to use browser-sync to share my project.

I used this config in my webpack.confg file :

  new BrowserSyncPlugin({
    // browse to http://localhost:3000/ during development,
    // ./public directory is being served
    host: 'localhost,
    port: 3000,
    server: { baseDir: ['src'] }
  }),

In src/ I have my basic files like index.html , app.vue , app.js . After using npm run dev command I see this result :

[Browsersync] Access URLs:
 ----------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.118::3000
 ----------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 ----------------------------------
[Browsersync] Serving files from: src

After this, localhost:3000 open in my browser and say browsersync: connected but it have showed me a blank page. Also after I enter website path ( http://localhost:3000/en/#!/login ) in browser, it showed me Cannot Get /en Error. What is the problem?

Any help will greatly appreciated.

Answer 1

Based on your comment, looks like you are also using webpack-dev-server . In that case you can proxy to it:

const BrowserSyncPlugin = require('browser-sync-webpack-plugin')

module.exports = {
  // ...

  devServer: {
    port: 3100
  }

  // ...

  plugins: [
    new BrowserSyncPlugin(
      // BrowserSync options
      {
        // browse to http://localhost:3000/ during development
        host: 'localhost',
        port: 3000,
        // proxy the Webpack Dev Server endpoint
        // (which should be serving on http://localhost:3100/)
        // through BrowserSync
        proxy: 'http://localhost:3100/'
      },
      // plugin options
      {
        // prevent BrowserSync from reloading the page
        // and let Webpack Dev Server take care of this
        reload: false
      }
    )
  ]
}