22

I am building out a front-end web app with angular (mostly ui-router) and doing local development by serving the html files through node http-server. I have noticed that http-server isn't serving my static html files when I make updates, which is challenging to my local development.

I have http-server installed globally with npm install http-server -g and start it up by going to the root project folder and running http-server. It defaults to localhost:8080- the two ways that seem to work is changing the port number after each update or going through chrome incognito mode.

Is there a way to use http-server normally without having to change the port or using incognito mode?

If it is relevant, I am using MBP v. 10.11.3

Thank you!

wariofan1
  • 481
  • 2
  • 4
  • 17

2 Answers2

36

the two ways that seem to work is changing the port number after each update or going through chrome incognito mode.

Your problem is client-side caching. Incognito mode has its own data directory, independent from your normal browsing.

Fortunately, http-server provides a way for you to set the cache control headers.

-c Set cache time (in seconds) for cache-control max-age header, e.g. -c10 for 10 seconds (defaults to '3600'). To disable caching, use -c-1 (and possibly -p 8080 to force the server to clear the cache for that port; can be removed on subsequent runs).

It's listed in the documentation here: https://github.com/indexzero/http-server

You can read up on HTTP caching directives here: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching?hl=en

Axonn
  • 10,076
  • 6
  • 31
  • 43
Brad
  • 159,648
  • 54
  • 349
  • 530
  • 1
    It's not a client-side problem. Disabling cache or "factory restart" doesn't help. Only server restart. Also, HTML tags specify to cancel caching and it also does nothing. – Slaus May 31 '17 at 17:10
  • 1
    @Slav HTML tags of course will not cancel out caching... wrong layer. If using Incognito Mode resolves the issue, the problem is absolutely client-side, as my answer explains. You're probably having a different issue than the original question. Also note that cache control directives in response headers also affect server-side caches (for well-behaved proxies). You might also consider disabling `sendfile` on your HTTP proxy if you're using one. Nginx for example uses sendfile and it can cause a lot of issues on VMs. – Brad May 31 '17 at 17:18
  • 1
    probably different issues, yes. Seems like I also face the bug described here: https://github.com/indexzero/http-server/issues/149 Incognito mode doesn't help. – Slaus May 31 '17 at 17:21
  • Good find @Slav . To fix this, http-server should be started with `-c-1` **and** `-p X` where X is the port. This will ensure that the server wipes the cache for the associated port. The `-p` argument can be removed on subsequent starts of the server. – Axonn Aug 19 '20 at 06:24
  • 2
    -c-1 works BUT if you previously started the server without -c-1 then the change will NOT kick in until the previous cache expires (which by default is 3600 secs AKA 1 hour) ... so you have to wait 1 hour until the change takes effect!!! if you open the browser developer tools and then do a HARD RELOAD the change should take effect right away – danday74 Dec 31 '21 at 16:46
  • Seems like a combo of @danday74's comment, this answer itself and clearing the chrome cache did it for me! – sinewave440hz Jan 10 '22 at 16:25
18

Try opening developer tools and checking "disable cache" checkbock in Network tab in Chrome.

sielakos
  • 2,406
  • 11
  • 13
  • Works for me, but the option is reset when restarting the browser :( . Would have been nice if they would have remembered it per URL. – Axonn Aug 19 '20 at 06:08