johnpapa / lite-server

Lightweight node server
MIT License
2.31k stars 267 forks source link

File changes don't trigger browser reload #99

Closed maciej-gurban closed 8 years ago

maciej-gurban commented 8 years ago

Description

The server recognizes changes to files in the root directory and reloads the browser when using default configuration (no bs-config.js) just fine. The problem appears when defining a custom project directory and reflecting that in the config file.

The config seems to get applied correctly since specifying additional options (like "https": true) does establish the server via https, and files from custom directory do get served correctly.

To reproduce

Directory structure:

dist
-- index.html
package.json
bs-config.json

File bs-config.json

{
    "files" : "./dist/**/*.{js, html, css}",
    "server" : { "baseDir" : "./dist" },
    "browser" : ["google-chrome"]
}

Running lite-server (via npm scripts) does conjure up a browser at port 3000, and serves the files, but changes to these files will not cause the browser to refresh nor load the changes.

Environment

maciej-gurban commented 8 years ago

Upon further investigation (and reading the source code), it looks like either Browserify pattern matching might be the culprit, or some simple mistake I'm making. I replaced bs-config.json with the following and everything works:

{
    "files" : [
      "./**/*.html",
      "./**/*.css",
      "./**/*.js"
    ],
    "server" : { "baseDir" : "./dist" },
    "browser" : ["google-chrome"]
}
ShashankaNataraj commented 8 years ago

@maciej-gurban I have this exact same issue, but without the bs-config.json. The readme says bs-config.json is optional, I don't have a bs-config file, and live reload doesn't work!

ShashankaNataraj commented 8 years ago

My bad, my html code skeleton wasnt in place and I was just trying to get this working, didnt realize browser sync depends on injecting scripts... Fixed the skeleton HTML code and browsersync works as expected! Thanks!

blachawk commented 6 years ago

@maciej-gurban Thanks for finding the fix! Your new bs-config.json layout has helped me in regards to the live reloading issue. I wonder what the main difference is between what you did and what original guides...In either case, I'm happy that the live reload is back!

I wish there was a way to set a custom home page (i.e. index.1.htm) within the bs-config file, but thats another story.

Thanks again

maciej-gurban commented 6 years ago

@blachawk I haven't tried myself, but browsing through browsersync reference it should be possible to do:

server: {
    baseDir: "app",
    index: "index.htm"
}

Either that, or even going with manually importing the fallback and configuring it, as the source code does it. You'd need to install connect-history-api-fallback to use it in server configuration and change bs-config to be a JS file.

Orodan commented 6 years ago

Hi,

I have a similar problem with lite-server, it does not detect my file changes. I've tried with and without an bs-config file, and I can't get it to work.

Here is some informations about my system :

I installed lite-server globally and did not have any problems. That's the first time I tried lite-server on this machine. I'll appreciate if someone can help, let me know if you need any more info :)

ashishepost commented 5 years ago

I think all above responses are OK but default configuration for lite-server will watch for all files & must work without even bs-config.json file.

The working solution for this issue is with root [index.html] file.

please make sure that your *.html file must have proper HTML Root tags for example:

For working index.html basic contents

check out this pen

andb0t commented 4 years ago

Your link to "pen" doesn't work anymore, but here's what fixed my "problem". Contenf of my index.html in the root directory:

<!DOCTYPE HTML>
<html>
  <head>
    <title>My test page</title>
  </head>
  <body>
    <h1>My test page</h1>
    <h2>It works now</h2>
    <p>with autoreload!</p>
  </body>
</html>