Using the Webpack dev server with a PHP application - node.js

Question

Has anybody had an experience with installation webpack dev server on Laravel 5+ (5.1 in my case)?
I'm going to use my laravel PHP backend with the ReactJS frontend and I would like to have webpack dev server on my dev env.
But I'm confused with a lot of configs in NodeJS (I'm specialized in PHP backend).
Is it generally possible to combine webpack dev server with PHP application?
I want my env to work both ways: on my apache server (for backend debugging/development) and on NodeJS server (for frontend debugging/development).
Do I need to have some middleware, resolving specific port for webpack? How in general NodeJS server will load my PHP scripts? ... or apache web server would load page than NodeJS would push notifications to frontend?

Answer 1

- 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:
Install react-hot-loader: npm install --save-dev react-hot-loader
Add the loader to your webpack.config.js along with your other loaders as react-hot
Now all you have to do is run webpack-dev-server --inline --hot and, hopefully, you are golden.

Answer 2

I had similar problem: On my desctop i have PHP server runing with Open Server and also Webpack Vue app. I wanted to have access to API with AJAX from my Vue app. So whis is my solution:
Create local domain (i don't like 'localhost', so i created loc-team.test) with Open Server (you can use XAMPP, or e.g.). Now i have access to http://loc-team.test/ajax.php from browser, but i don't have AJAX access to this URL from my Webpack dev server (http://loc-team.test:8081), because of Access-Control-Allow-Origin / CORS.
Add proxy to your devServer In webpack dev configuration include this props:
devServer: {
contentBase: 'dist_folder',
host: 'loc-team.test',
port: 8081,
overlay:{
warnings: true,
errors: true,
},
proxy: {
'/api': {
target: 'http://loc-team.test',
pathRewrite: {'^/api' : ''}
}
},
}
So in my Vue app i can make AJAX request to loc-team.test/api/ajax.php, and because of pathRewrite i will get answer from loc-team.test/ajax.php. Also i have no problem with sessions.
Read more about proxy at webpack.js.org