What would cause npm live-server to stop detecting file changes? - javascript

This was working on my system and now is not. I have live-server version 0.8.1 installed globally.
npm install live-server -g
But when I start it I don't get the "Live reload enabled." message in the browser console.
I've uninstalled it completely and re-installed it to no avail.
The http server is working. It will serve up my index.html and all related content. It just won't detect file changes.
Starting live-server:
live-server --open=src
I'm using typescript outputting js to src/dist/... I've verified that the file is changing. I can modify the js directly as well. In no case does live-server detect any changes.
File system permissions?
Cached configuration?
What's causing this?

I had been having this issue as well, and stumbled across one exchange between Ritwick Dey (author of live-server), and a dev having the same issues.
As it turns out, it's as simple as not using a self-closing tag.
In my case, I was using React, and the line in question (in my HTML file) was
<script src="/scripts/app.js" />
Changing it to the following immediately fixed my issue, and got the "Live reload enabled" message in my Console, and hot reloading to work again.
<script src="/scripts/app.js"></script>
Hope this helps.
(here's a link to the conversation: https://github.com/ritwickdey/vscode-live-server/issues/82)

This may have been a Chrome caching issue.
I opened Safari and voila, everything started working. Closed Safari and now Chrome is working again.
I'm going to call this a bizarre environmental fluke.

Related

How to run npm start without opening browser for react development on linux

I am learning react and find myself running npm start on the terminal a couple of times but its annoying how it opens a new browser window everytime. I'm trying to stop this from happening on linux.
I found a solution for how to do this on Windows, but how can I do it on Linux?
Adding BROWSER=none to the .env file should get it solved.
If the folder /etc/profile.d doesn't exist create it. Then run touch /etc/profile.d/[any descriptive name here].sh and open it in the text editor of your choice. Then add export BROWSER=none there.
Then logout and login again. If it didn't work then try putting export BROWSER="none" in the file.
This is setting an environment variable.
Hope this helps.
fixed
create a .env file next to your package.json and put BROWSER=none inside
I don't think you need to run npm start so often. I've created my project via create-react-app which comes with Hot Module Reloading or HMR(restarts the server on any saved edit) in-built.
Starting a new React server multiple times can also be problematic as every time it will run on a different port. If you're integrating an API that has CORS set up for a particular port, it won't work on other instances.
What to do?
Create your application using create-react-app(cra) or add HMR using some library if you don't want to use cra. Here is a tutorial for that (haven't tested it).
Always keep a single dev server running. It will automatically reload on code change.
Stop the server by Ctrl + C when you don't want to use it.

VueJs Deployment Problem: Chrome caches old version and not updating app

I'm having a problem with deploying my project.
It's VueJs project, a web app, build on Metronic template with Vuetify components.
When I publish, I use visual studio code with npm run build and upload the dist folder to my server.
I have a version-check problem.
Some of my clients cannot get the latest version, without hard reloading. ctrl-shift-r they are using chrome and when incognito mode is on everything is perfect. But normal mode brings a very old version of the app.
I need a solution on the code or server-side, thank you for your help
I solved my problem and I forgot to post my answer. My problem was because of the PWA package I installed and implemented in the beginning of the project.
When I try to remove PWA from my project, what I did was commenting the code blocks but not removing dependency from my packacge.json.(mistake) So, I was thinkin, *"Since I'm not calling any of the PWA functions or initialize it, it should've been removed."
yeah, not.
It was still there, caching stuff.
So I removed (uninstalled) the dependency from my packacge.json, and even after that, people who did installed PWA before and "not uninstalled properly" was still using cache! (yeah, you have to click uninstall and also check remove files option)
so I had to, manually uninstalled my PWA app from their chrome (thankfully it was only few) and problem solved.

angular2 texfield value sync up in all browser

I take a little surprise today working with angular 2, i'm developing a single page form to capture some data, and i discover that the value enter in my texfield using google chrome is sync up with my other browser mozilla firefox.
Anybody have some idea why happen this. this not look like angular function.
i'm running in developer mode
here my package.json file
reading more about lite-server with npm i suspect that it could be the reason but i'm not sure.
thanks in advance!!!
this is because of lite-server browsersync
to remove this you can use http-server(npm install -g http-server)

Cloud9 IDE serves old version of html page

I started a simple project with an HTML and a Java Script file. I ran the html file and everything was fine. I continued with the workspace on another machine and found that I could not see any changes I made to the html or js files when I refresh the browser panel in c9 IDE. It seems to keep serving a previous (cached?) version of the files. Restarting the run configuration (apache) did not make any difference.
How can I get the c9 IDE to run the latest files again?
Are you using Chrome? I had the same issue, I looked up and it was Chrome's fault. Started using the extension Cache Killer and that solved my problem.

Phantom.js doesn't run from the OSX console

I'm developing an ExtJS app and I'd like to render the view as pdf using Phantom.js. I've downloaded binary package for OSX, after unpacking added a symlink to it as well as added it to the PATH. After running 'phantomjs' in the console I get :
phantomjs script.js
And that's all. When I try running any of the example scripts it crashes saying that require is undefined, I can't check the version and basically it's unusable. I can run the bat file though, and it gives me phantomjs shell. After removing all I've downloaded previously I can still run 'phantomjs' command with the same outcome. Probably because Sencha's SDK have it but it's not visible in the PATH so I'm not sure. Any ideas ?
as always found the problem seconds after submitting question. Sencha's SDK had some custom or broken version of phantomjs.bat, and the whole folder was added to the PATH.

Categories