CODEWITHSUNDEEP
phpproxynpmwebpackwebpack-dev-server
Doc999tor
Doc999tor

Reputation: 300

Can't get webpack-dev-server proxy and watch work together

I'm trying to get work together webpack and PHP.

The proxying to PHP built-in webserver works but it loses the ability to watch for changes on index.php and the rest of PHP files. Watching js files works correct.

Package.json

"devDependencies": {
    "webpack": "^2.1.0-beta.21",
    "webpack-dev-server": "^1.15.0"
  },
"scripts": {
    "backend": "cd src && php -S localhost:9000",
    "server": "webpack-dev-server --inline --colors --progress --display-error-details --display-cached --port 3000 --content-base src",
    "start": "start npm run backend && start npm run server"
  }

webpack.config.js

devServer: {
    proxy: {
        '/': {
            target: {
                host: "localhost",
                port: 9000,
                protocol: "http"
            }
        }
    },
},
watch: true,

Without a proxy the watch and livereload work correct (on index.html file).

How can I tell the webpack-dev-server to watch php files explicitly?

Maybe the way I'm using for getting the PHP proxying is wrong or too complicated? I'd like to hear for other solutions.

Thanks

Upvotes: 4

Views: 2282

Answers (1)

Žarko Selak
Žarko Selak

Reputation: 1131

I had same problem, and it was painful :D

I would suggest you to use BrowserSync plugin. Install browsersync and then browser-sync-webpack-plugin, then all you have to do is require or import browser-sync-webpack-plugin in your webpack development config. Last step would be to add it in webpack config file as plugin ...

    new BrowserSyncPlugin({
      proxy: 'http://mylocalpage.loc/',
      tunnel: true,
      files: ['resources/', 'public/index.php']
    })

for more info visit BrowserSync and BrowserSyncWebpackPlugin.

Also I have webpack.config.js for development and webpack.config.prod.js for production, so webpack-dev-server uses default webpack.config. Also in my case /resources folder contains all my .js and .sass files.

Upvotes: 3

Related Questions