- New answer -
Since I first answered this question I've started using a different solution.
With the new solution you make requests directly to an nginx/apache web server. The web server works as a proxy and redirects requests to either webpack-dev-server or the php application. The php application exposes all it's endpoints under /api/<actual/endpoint>
(see untested example configurations below, where localhost:8080
refers to webpack-dev-server).
Apache config (http://php-application refers to a separate VirtualHost, not shown here)
<VirtualHost *:80>
ServerName my-website.dev
ProxyPass / http://localhost:8080/
ProxyPassReverse / http://localhost:8080/
ProxyPassMatch ^\/api\/.+$ http://php-application/
ProxyPassReverse / http://php-application/
</VirtualHost>
Nginx config (PHP7.1)
server {
listen 80;
server_name my-website.dev;
root /path/to/backend/public;
index index.php index.html;
location / {
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_pass http://localhost:8080;
}
location ~ ^/api/.+$ {
try_files /index.php =404;
fastcgi_split_path_info ^(.+\.php)(/.+)$;
fastcgi_pass unix:/run/php/php7.1-fpm.sock;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
}
}
- Old answer -
I know you made it work, but I came across this post when I had this problem myself and, after solving it, wanted to share my solution.
I'm not using Laravel, but have a PHP backend on an apache server. I only had to make two changes in webpack.config.js to make webpack dev server work:
Change this
publicPath: __dirname + '<path_to_bundle>'
To this (note: http://localhost:8080
is the url to the webpack-dev-server)
publicPath: "http://localhost:8080/<path_to_bundle>/"
And add some proxy settings to forward requests to the php backend
devServer: {
proxy: [
{
path: /./,
target: "http://<php_backend_url>"
}
]
}
Notice that the path property is a regex that matches everything. This will cause all requests to be forwarded to the php backend. You might have to change the regex if you want the frontend to handle some requests.
The webpack dev server documentation also says that you have to change your script tags src attribute to http://localhost:8080/<path_to_bundle>/<bundleFilename.js>
, but this is only necessary for me if I want to access the app from its old (apache) url in stead of localhost:8080 when using the --inline flag.
To make hot module replacement work with react:
Now all you have to do is run webpack-dev-server --inline --hot
and, hopefully, you are golden.