tapio / live-server Goto Github PK

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

Hi.

I use gulp with babel,browserify and live-server.

1. I change a .js file.
2. Babel.js compiles the file from src/ to build/.
3. live-server reloads the browser for a file that is NOT used.
4. Browserify compiles all the client side JS to 1 file.
5. live-server reloads again for js/app.bundle.js which IS used.

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"
    }
]

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.

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.

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?

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 ?

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.

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

The following is a detailed error

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.

Hello guys,

When using live-server with html templates that contain only parts of a code (for example just a simple

{variable}

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!

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

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 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.

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)

@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 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?

Hello guys, How can I set the port from the command-line ?

something like: live-server 8081

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.

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.

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.

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.

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 =)

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.

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

• live-server auto-complies code from any /sass directory to a neighboring /css directory
• same with coffee, any /coffee directory to a neighboring /js directory

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.

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!

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.

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.

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.

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 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!

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'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 :)

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.

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 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 ?

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

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

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.

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.

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.

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?

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

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