tapio / live-server Goto Github PK
View Code? Open in Web Editor NEWA simple development http server with live reload capability.
Home Page: http://tapiov.net/live-server/
A simple development http server with live reload capability.
Home Page: http://tapiov.net/live-server/
Can I create a Grunt task that starts live-server and then runs my protractor tests on it?
Please see my question on SO
http://stackoverflow.com/questions/33058650/run-protractor-on-live-server-via-grunt
Thanks @tapio , you have made a great library.
I have html like this:
<!DOCTYPE html>
<html>
<head>
<title>Belajar</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<strong>Helos</strong>
</body>
</html>
And style.css
, like this:
strong {
color: pink;
}
HTML is automatically reload when there is a change, but css is not automatically changed when there is a change is CSS. My terminal say CSS Change detected
. What should I do??
Update: on-the-fly css refresh is works when I hover over browser (I'm using Chrome 39.0.2171.95 (64-bit). If my cursor stay in my text editor (sublime), the change (CSS) won't show up in browser.
Here is my generated html:
<script>
// Code injected by live-server
(function() {
function refreshCSS() {
var sheets = document.getElementsByTagName("link");
for (var i = 0; i < sheets.length; ++i) {
var elem = sheets[i];
var rel = elem.rel;
if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
var url = elem.href.replace(/(&|\?)_cacheOverride=d+/, '');
elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
}
}
}
protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
address = protocol + window.location.host + window.location.pathname + '/ws';
socket = new WebSocket(address);
socket.onmessage = function(msg) {
if (msg.data == 'reload') window.location.reload()
else if (msg.data == 'refreshcss') refreshCSS();
};
console.log('Live reload enabled.');
})();
</script>
<!DOCTYPE html>
<html>
<head>
<title>Belajar</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<strong>Helos</strong>
</body>
</html>
Thanks.
Hello guys,
When using live-server with html templates that contain only parts of a code (for example just a simple
{variable}
tag), this warning gets shot on the server cause there is no body or svg candidate. And therefore a lot of non-critical warning messages comes out.Setting the quiet option parameter to live-server doesn't stop this.
Could it be covered by the quiet option? Or a new parameter? Or do you think this is an important message that shouldn't be stopped?
Cheers!
I am trying to get the json file and seems not working.
// js
$(function() {
var $orders = $('#orders');
$.ajax({
type: 'GET',
url: '/api/orders.json',
success: function(orders) {
$.each(orders, function(i, order) {
$orders.append('<li>name: '+ order.name + ', drink: '+ order.drink +'</li>');
});
},
error: function() {
console.log('Error!');
}
});
});
// json
"orders":[
{
"id": 1,
"name": "John",
"drink": "Honey Green Tea"
},
{
"id": 2,
"name": "Will",
"drink": "Taro Milk Tea"
}
]
Given that most people will come here because they use node, recommending something like http-server (installed like everything else with npm install -g http-server
) probably makes more sense than to tell people to use Python's http server (also, remembering and typing out the Python command is a pain, whereas http-server is easy to remember and is a 'single' word =)
Hi.
I have a problem with file watching.
If I create a simple script:
var fs = require('fs');
fs.watch('./src', function(event, filename) {
console.log(event, filename);
});
and e.g. change a file nothing really happens except the logs.
If I use live-server to serve builld/client
and write a file in it then my ram quickly jumps to 100% until I kill the process.
I have done some searching but I don't know what the appropriate level is to create a ticket so I'm starting at the top :)
I see that live-server is using https://github.com/bevry/watchr which in turn is using https://github.com/bevry/safefs which has a description that sounds like it very may well be involved in this problem.
Does anyone else experience this problem? Is there any way to turn this off to see if the problem persists?
Would be nice to have something like a --catch-all=PATH
option that renders the given PATH instead of a 404. This would make it super simple to write SPAs using pushState
.
I am getting the following error (using 0.7.0 with default settings with node 0.10.36) when trying to load an html file via ajax:
Error: Requested Range Not Satisfiable at SendStream.error (/Users/noahpatterson/.nvm/v0.10.36/lib/node_modules/live-server/node_modules/send/index.js:245:16) at SendStream.send (/Users/noahpatterson/.nvm/v0.10.36/lib/node_modules/live-server/node_modules/send/index.js:540:19) at onstat (/Users/noahpatterson/.nvm/v0.10.36/lib/node_modules/live-server/node_modules/send/index.js:600:10) at Object.oncomplete (fs.js:108:15)
This happens in Safari, Firefox, and Chrome.
If I use a simple ruby server instead, everything loads as expected: ruby -rwebrick -e'WEBrick::HTTPServer.new(:Port => 3000, :DocumentRoot => Dir.pwd).start'
Here is a simple example ajaxing a html file product.html
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<h1>hello</h1>
<span id="ajaxButton" style="cursor: pointer; text-decoration: underline">
Make a request
</span>
<script type="text/javascript">
(function() {
var httpRequest;
document.getElementById("ajaxButton").onclick = function() { makeRequest('product.html'); };
function makeRequest(url) {
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
try {
httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {}
}
}
if (!httpRequest) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
httpRequest.onreadystatechange = alertContents;
httpRequest.open('GET', url);
httpRequest.send();
}
function alertContents() {
if (httpRequest.readyState === 4) {
if (httpRequest.status === 200) {
alert(httpRequest.responseText);
} else {
alert('There was a problem with the request.');
}
}
}
})();
</script>
</body>
</html>
Thanks for your help!
Hi guys,
sorry for the newbie question. There's any way to tell to live-server to enable the gzip-compression.
I've create 2 build files one normal and one gzip and I would to load the second one.
thanks,
Daniele
When I develop I would preffer to avoid building more than necessary which means that my dist folder contains some resources and the src folder contains other. It would be nice if I could say to live-server to try to resolve the resource in the dist folder and, if that fails, in the src folder.
Hi,
the new version of live-server directs automatically to 0.0.0.0 instead of localhost (127.0.0.1)
npm install -g live-server
live-server
on windows10
502 Server dropped connection
The following error occurred while trying to access http://localhost/test.html:
502 Server dropped connection
Generated Sat, 09 Jan 2016 06:33:50 GMT by Polipo on DESKTOP-4TOPUNE:8123.
Injecting the script at the beginning may trigger browser to run in non-standards mode by breaking the rule of doctype being the first thing of the html document.
Getting this in the console:
WebSocket connection to 'ws://localhost:8080//ws' failed: Connection closed before receiving a handshake response
OS X Yosemite, Google Chrome (latest)
I'm working with a typescript project that compiles my ts files in-place. I'm using live-server to view all the html and generated js files. I would love to use --ignore=.ts or --ignore=__/.ts to not refresh the browser when a ts file is updated. The typescript compiler will update the js files then live-server will notice those changes and update accordingly. Right now the browser refreshes twice (once for the ts file change, again when tsc finishes compiling js files). I could try to set --wait to a long enough value but that will be hit or miss depending on compile time.
I would still like the file to be served to the browser. Typescript projects can generate .js.map files so debugger statements/breakpoints highlight the proper ts line when triggered. But I don't want the browser to refresh when my ts files are updated because soon more files are about to update. It would be an ongoing pain to list them all individually.
watchr has a property called ignoreCustomPatterns so I don't imagine this change to have a large impact. Maybe a --ignorePattern= flag that gets passed along to that parameter?
Invoking as live-server --port=8090
causes error:
/usr/local/lib/node_modules/live-server/live-server.js:5
process.chdir(process.argv[2]);
^
Error: ENOENT, no such file or directory
It seems like this is simply not implemented in the newest released version. I see that it is implemented in master, though... (But I at least was confused by the mismatch between the Readme and the latest npm release)
Hi.
I use gulp
with babel
,browserify
and live-server
.
Assuming, most likely use case for live-server is to spin off quick development server to serve the files during development. The default port 8080 is most likely used by many application servers (httpd for me). live-server should default to different port (5000, 3000, etc.). I understand --port=9000 will do the job, but I don't like to fire long command every time :)
I use server side includes (in the form: ) on a site and they are not loading when using live-server. Is this to be expected? All works fine otherwise.
Hey guys
I'm having some trouble with Live-Server, I'm using Compass to compile the Scss to regular CSS and the Live-Server is going nuts trying to reload when I save the SCSS file and when the Compass rewrite the CSS file, there's a way to make Live-Server don't look for SCSS files?
I know live-server works perfectly as a nodejs server via WebSocket.
But what if there is a web project with nodejs or java-ee as backend , I want to reload or refresh files just like how live-server works. Is that possible ?
Besides, are there any tools or plugins can achieve this ?
Hi,
I just can't seem to get live-server to open up a browser. It just seems to 'hang' at the command prompt.
I have the following setup:
Microsoft Windows: 10.0.10240
WebStorm: 11.0.1
Node: 4.2.1
NPM: 3.3.8.
I have tried installing globally and locally. I have tried using npm and the 'manual' installations. Everything else I install using these methods works ok.
Anyone have any ideas what if anything could be causing a conflict?
Many thanks for the effort put into this project.
I'm using Ubuntu 14.04 LTS and Google chrome Version 39.0.2171.99 (64-bit).
I'm using the editor and the navigator on the same screen, however when I change the CSS changes does not show up in the page until I hover the mouse over it.
It works fine in Firefox.
Do you have any idea why this is happening ?
Thanks.
Hello guys, How can I set the port from the command-line ?
something like: live-server 8081
Trying to load angular partials through the ng-include directive and the app hangs by saying that the resource could not be located (through the console) even though i am calling the partial the right way by using single quotes etc.
Hi
This is the first time I am using the program so perhaps it is an error on my side but I have noticed that if I do an ng-include on a partial, then I must wrap the partial in tags despite them existing in the main app before including the partial.
Is this intended or simply something I have done wrong?
Thanks in advance.
Hey, newb here.
So I installed everything like the guide told me to.
But I keep getting -bash: live-server: command not found.
I did googled about for a while and added a PATH to the .profile file.
That made it so that the command node does work, which it didn't at first either.
But still I can't get live-server to work.
I was hoping that anyone could help me with my problem.
Thank you in advance.
It would be nice (unless I missed something) to be able to serve files from a base url.
I'm working with a remote server and I'm targeting for example my-domain.com/base
(proxied to my live-server) but I'm (obviously) getting Cannot GET /base
.
Total newb here.
I keep getting -bash: live-server: command not found
I have re-installed node.js and live-server a few times.
Googled for awnsers for a while but can't seem to get it to work.
I installed everything via both youtube and the guide here in the hope that I would get an other result but nope.
Great app, Tapio.
I'm curious about one thing, on line 45 of the index.js
file I saw that the .php extension is included in the inject stream function:
if (x === "" || x == ".html" || x == ".htm" || x == ".xhtml" || x == ".php"
)
Is it possible to host simple PHP pages with Live Server? I haven't been able to do so but this has me wondering if I misconfigured something. If not, no big deal but I thought I'd ask.
Thanks for the great program.
-Jeff
live-server
will launch the browser and go to localhost:8080/
so we will see index.html
by default,
Can we parameterize live-server
so that it goes to localhost:8080/test.html
directly?
Thanks
Currently, the browser reloads on any file change in root
. It'd be nice to filter which files, or directories, were watched. This way when I can point the watcher to my dist
dir and only reload when that changes. Right now, I get a reload when I change a *.less
file and another after the build step builds the css.
I can do the PR if you like. Love the simplicity, thanks.
Edit
Why not set the root to dist
? Because it's a doc page on gh-pages
so the index.html
is in the root of the project.
I'd like to suggest that the codebase be made more consistent through the use of eslint. If you agree, I'd like to volunteer to do the cleaning, please suggest the ruleset you'd like to use and I can get to work.
I would suggest switching from tabs to spaces for better-looking diffs but it's completely up to you :)
I could see this utility having a great niche as the zero-config dev environment.
A very useful feature would be live-server --sass
or live-server --coffee
Running
npm install-g live-server
Results in a 404 error:
npm ERR! fetch failed https://registry.npmjs.org/live-server/-/live-server-0.6.0.tgz
npm ERR! Error: 404 Not Found
Is it possible to open the browser with localhost instead of 127.0.0.1?
I tried 'live-server --host=localhost' but this doesn't work.
I have been using live-server package for past few months without any trouble. When I try to invoke server with "live-server" today, received following error
live-server is not recognized as an internal or external command, operable program or batch file.
npm update -g live-server - no luck
npm uninstall -g live-server and npm install -g live-server - no luck
npm install live-server - no luck ( installing at local directory)
node c:\Users\xxxx\AppData\Roaming\npm\node_modules\live-server\live-server - works fine.
It seems that node path path is not automatically added to environment variable.
I'm on Windows 7 64 bit.
I've tried with live-reload map.svg
, live-reload ./map.svg
and live-reload --entry-file map.svg
both give me the same error:
Error: ENOENT: no such file or directory, uv_chdir
at Error (native)
at Object.<anonymous> (C:\Users\dotnet\AppData\Roaming\npm\node_modules\live-server\live-server.js:82:10)
at Module._compile (module.js:425:26)
at Object.Module._extensions..js (module.js:432:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:313:12)
at Function.Module.runMain (module.js:457:10)
at startup (node.js:138:18)
at node.js:974:3
I then made an index.html which redirects to map.svg but then there is no live reload.
<script>
location.replace("map.svg");
</script>
OS: Windows7
node: v5.1.0
npm: 3.5.0
On some projects, it's useful to have the static files served by live-server and rest api calls be directed to a real server. This enable us to work with the static files on their own. E.g. anything /api/ calls gets redirected to http://127.0.0.1:8181/ which will be technically a java ee server executed from Eclipse for example.
The reason this is useful because you don't want to work with the static files served by these as sometimes it takes 3 to 5x reload for you to get your updated javascript/css shown.
Would you be interested in a PR to accept the port to use on the command line? I use tomcat for other things (which uses 8080 by default) and setting an environment variable as generic as PORT isn't really an option for me either.
Love live server but when I try to debug in VS 2013 with this server on, I cannot.
My work around is to either turn off live server or debug in a different browser.
Hi,
Reading the usage in the Readme.md I understood that the "watch" option adds "paths to exclusively watch for changes". I think that mount paths are being added to watchPaths anyway, even if you set the watch option. Is this the right behavior?
Thanks!
this was kind of a wierd error, and I don't expect it to get fixed, but I am documenting it here in case any one else runs into it.
on windows 10 (ya, I know, get a real OS.. lol), I had added a new directory, and a new file inside that directory, which live server dutifly served up. But then I needed to do a git rebase, so git removed that folder, did some other things, then tried to add it back again. Unfortunately, it could not.
When I tried to manually delete the folder after (with live server still running), it looked like the folder had no owner. It was only when I finally shut down liver server that the directory was removed.
@tapio When I run live-server
I get the following:
To make it clear, they were opened in the same window but different tabs. I put it in different windows so that the URLs in each tab are clear.
I have Node v0.11.14 and live-server
v0.6.3. I am running Arch Linux as my OS. Oh, and my browser is Firefox.
What could be causing this? Thanks! :)
Hi,
I am using jade in my project, I don't have index.html. I have index.jade
The documentation said that I need to have index.html
can I use live server in my project ?
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 and it doesn't detect file changes anymore.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.