search

lwsjs / local-web-server

A lean, modular web server for rapid full-stack development.
MIT License
1.21k stars 85 forks source link

Implementing livereload #35

Closed web-padawan closed 7 years ago

web-padawan commented 8 years ago

Yet another feature I suggest to use is koa-livereload. I've tested it with gulp-livereload and it works, performing page reload when some of watched files changes.

It would be nice to pass into optionsnot only Boolean flag, but also config for custom livereload port (as it can be passed), although this is not commonly used, as we usually have only one livereload instance running at the same time.

And another option, excludes, is important too in order not to inject livereload script into some partials where it might be undesirable. I'm currently trying to find out a way to deal with such troubles.

75lb commented 8 years ago

hi, thanks again.. personally, i use Chrome Devtools as an IDE for web development - it's possible to edit html, css and JS live in Chrome..

but i respect that other might need a livereload feature so i will look at this soon..

deini commented 7 years ago

👍

75lb commented 7 years ago

This is resolved by local-web-server v2 and the lws-live-reload module.

Install the v2 preview

$ npm install -g local-web-server@next

Install the middleware module into your project

$ npm install lws-live-reload --save-dev

Launch ws with the desired middleware stack, for example:

$ ws --stack log live-reload spa static index
Serving at http://mbp.local:8000, http://127.0.0.1:8000, http://192.168.0.100:8000

I'm still working on the v2 documentation, you can see work in progress on the next branch.

Any feedback, please let me know.

davidclark87 commented 3 years ago

@75lb it looks like lws-live-reload is not compatible with the current local web server (v 4.2.1) - is that right? Are you aware of any alternative solutions? When I run npx ws --stack log live-reload spa static index (as shown above) I get this error:

TypeError: Cannot read property 'middleware' of undefined
    at /<redacted>/node_modules/.pnpm/lws@3.1.0/node_modules/lws/lib/middleware-stack.js:49:68
    at Array.map (<anonymous>)
    at Function.from (/<redacted>/node_modules/.pnpm/lws@3.1.0/node_modules/lws/lib/middleware-stack.js:42:39)
    at WsCli.getConfig (/<redacted>/node_modules/.pnpm/lws@3.1.0/node_modules/lws/lib/cli-app.js:130:35)
    at WsCli.start (/<redacted>/node_modules/.pnpm/lws@3.1.0/node_modules/lws/lib/cli-app.js:9:27)
    at Object.<anonymous> (/<redacted>/node_modules/.pnpm/local-web-server@4.2.1/node_modules/local-web-server/bin/cli.js:7:7)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
75lb commented 3 years ago

@davidclark87 hi.. the lws-live-reload module is not maintained anymore since adequate live-reloading functionality is built into Firefox and Chrome devtools, and has been for a number of years..

davidclark87 commented 3 years ago

@75lb thanks for getting back to me! I was basically looking to have the browser automatically reload when the directory being served by LWS changes (say, because tsc --watch just output an updated JS file to it). Does Chrome dev tools offer this, or something similar? I wasn't able to find the feature you were referring to by Googling.

75lb commented 3 years ago

@davidclark87 the lws-live-reload module wraps koa-live-reload, which has not been maintained since 2016.. i'm not sure live-reloading is a "thing" anymore.. do you want the browser to reload automatically? What if you had unsaved state or CSS edits?

Might not be what you need, but nodemon can restart ws automatically on changes to the underlying filesystem.. https://www.npmjs.com/package/nodemon

davidclark87 commented 3 years ago

@75lb thanks again. I've ended up using a different stack for my project so don't have any skin in the game here, but if it helps explain where I was coming from, live-reloading is provided by webpack/webpack-dev-server so it is indeed a thing for many web developers. I agree there are times where it's not desirable, but for me at least those feel like the exception. Most codebases I work in have build steps which run in watch mode during development (e.g. TypeScript compile, or Rollup bundle) so without live-reloading I have to manually track when those processes have written to disk before reloading the browser. With live reloading, I can simply wait for the browser to automatically reload for me. I suspect in a build-less dev environment it'd be less valuable as I know it's safe to immediately refresh after a code change.

75lb commented 3 years ago

ok, thanks -i'll look into it at some point.. i have a WIP tool that streams an event stream into the browser via SSE.. i use it in dashboard applications like performance monitoring (pipe the output of a command-line monitoring tool directly into a real-time browser dashboard).. it could be also used to stream filesystem change events into the browser for display and/or auto-reloading.. SSE is more rebust and lightweight than the websocket solution webpack uses (websockets require you to manually manage the connection, SSE does not).

75lb commented 3 years ago

moved into a new discussion thread