Using the Webpack dev server with a PHP application

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?

Solution 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.

Solution 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

Comments

[Denis]

did you managed to combine webpack dev server + PHP?

[Black Akula]

With a lot of headache, but yes. You just need to load your assets from NodeJS server (not from PHP application). Then, the rest of Webpack Dev Server documentation is applicable.

[BugHunterUK]

How did you get this to work, I am getting CORS errors when trying to load fonts. This seems like a huge pain in the ass to get it to work with PHP.

[supersan]

This method is great but it does not work with Ajax requests (browser blocks all requests because of cors errors)

[hansn]

@supersan Just give the dev server and the backend server the same domain name. Since this answer though I've moved on to a new solution, using Apache/Nginx as a proxy between my php backend and the dev server.

[supersan]

@hansn thanks. I did find a link for nginx but not sure about apache. can i use mod_proxy for that? does it support socket protocol reqd for hmr?

[Imnotapotato]

I have apache2 and this didn't work.. I set these new variables under my-website.conf and my-websitessl.conf and tried restarting apache2 and it failed!