Use webpack dev server with nginx

Question

I am trying to enable HMR on my react front end which also uses nginx/php-fpm as backend. I read a few articles and questions on stackoverflow but I still cannot get it to work.

So first of all, If I understand It correctly It should work like this:

1.I have my docker nginx container(80) mapped to port 8080

I make request to localhost:8080 which then passes It into docker container to nginx which listens on port 80.
After that I should have two options, If I want to make a request to backend, which is just API, then everything with /api in URI will be redirected to php-fpm, otherwise everything else will be redirected to webpack-dev-server.

Currently I have my nginx configured like this:

upstream backend {
        server app:9000;
}
server {
        root /var/www/emailApp/public;
        location / {
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "upgrade";
                proxy_pass http://localhost:8080;
        }

        location ~ ^\/api\/.+$ {
                fastcgi_pass backend;
                fastcgi_split_path_info ^(.+\.php)(/.*)$;
                include fastcgi_params;
                fastcgi_param SCRIPT_FILENAME $request_filename;
                fastcgi_param DOCUMENT_ROOT $realpath_root;
        }
}

I am not sure this works correctly, but If it matches something with '/' it should try to pass it into port 8080, If it matches something with /api/ then it should pass it to php backend.

Here is my webpack config

    entry: './assets/index.jsx',
    output: {
        filename: 'main.js',
        publicPath: "http://localhost:8080/public/"
    },

    devServer: {
        contentBase: path.join(__dirname, 'public'),
        host: '0.0.0.0',
        compress: true,
        port: 8080
    },

I mainly did this from tutorials, but I don't think that I understand It. because right now I call index.php which calls controller that returns template which contains reference to main.js that is in public folder. But event after reading documentations I quite don't understand It. The devServer part maybe, It specifies server that will listen on 0.0.0.0:8080, but If I am not mistaken I would need to change the structure of my project so I have index.html file that will include my js file in public folder, right ?

Use webpack dev server with nginx

0 Answers