search

statianzo / webpack-livereload-plugin

LiveReload during webpack --watch
ISC License
204 stars 51 forks source link

Running app behind proxy returns "tinylr": "welcome" message, not expected dist/index,html file #56

Closed laurencefass closed 4 years ago

laurencefass commented 4 years ago

im trying to live reload an app I have working behind an nginx reverse proxy which routes a public domain/path into a private ip:port used which Im using to configure this module in webpack.config.js file. I've created a template for my index file.

When run webpack --watch and I load the page all i see is:

{ "tinylr": "Welcome", "version": "1.1.1" }

I have added the livereload script into the template which is used to create my index.html file but I don't really understand how the plugin knows which file to use for its entry point.

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
var LiveReloadPlugin = require('webpack-livereload-plugin');

module.exports = {
    target: 'node',
    mode: 'development',
    devtool: 'inline-source-map',
    entry: {
        index: './src/index.js',
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    plugins: [
        new LiveReloadPlugin({
            hostname: '0.0.0.0',
            port: 3803,
            protocol: 'http'
        }),
        new HtmlWebpackPlugin({
            title: 'Development',
            template: 'src/index.template.html'
        }),
    ],

This is the file I need to load but Im not specifying it anywhere:

index.template.html (outputs to dist/index.html)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Development</title>
  </head>
  <body>
    <script src="http://socket.syntapse.co.uk/chat3/livereload.js"></script>      
    This file is generated by template file /src/index.template.html according to webpack.config.js 
  </body>
</html>

package.json

{
  "name": "webpack watch",
  "version": "0.0.1",
  "description": "super simple webpack watch example",
  "dependencies": {
    "express": "^4.15.2",
    "socket.io": "^1.7.3"
  },
  "scripts": {
    "build": "webpack",
    "watch": "webpack --watch"
  },
  "devDependencies": {
    "webpack-livereload-plugin": "^2.2.0",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.10.1"
  }
}

nginx.conf server block re routes to webpack.config.js values

server {
    listen 80;
    server_name socket.syntapse.co.uk;
    location ^~ /chat3/ {
        proxy_pass http://0.0.0.0:3803/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

any advice or support very much appreciated.

thanks

statianzo commented 4 years ago

You're proxying everything to the tinylr server, which only has the purpose of sending live reloads, not sending assets. You've got two options:

laurencefass commented 4 years ago

thanks for your advice i will give it a try.

laurencefass commented 4 years ago

Before i close may i ask a question: My aim is to live-reload an express app serving html serving html and js files. This module looks like a far simpler solution than wds for my use-case. I am be grateful for any advice or opinion you have on the most economical solution to live reload express serving html.

statianzo commented 4 years ago

If you already have an express app, webpack-dev-middleware and webpack-hot-middleware could work as well.

laurencefass commented 4 years ago

i'm running my server and a separate webpack instance with livereload plugin to reload on changes. not quite working as it doesnt appear to support proxied URL's. ive opened a new issue.