Netlify dev --live is not hot reloading when I change code

answered
#1

Hi! I’m just trying netlify dev and I think it is great!
I’m running a gatsby website. It is a pretty much default install, except that I’m using styled-components and styled-system. I’m also using Sanity studio to edit content.
When I change content, it hot reloads perfectly. I can edit anything in Sanity studio and the changes show up instantly. But when I change code, or styles, it doesn’t hot-reload. I have to reload the whole to see the changes.

Of course I know that this is a Beta feature, so I just wanted to let you know in case this helps you in any way. It is not an issue for me, I’m just playing around, so I don’t really need support. But if you want, I’d be happy to share the repo with you guys so you can reproduce the issue.

Netlify dev doesn't reload
#2

I’m seeing the same results. I’m also using Gatsby (no sanity.io though). When I change a Markdown file (via text editor, so no CMS although I do have Netlify CMS enabled on this site) the changes are hot reloaded, but any changes to other files aren’t.

#3

I have a similar issue with Jekyll, live reloading isn’t working but it appears the livereload js is not being served over https. Does anyone else here have the same error in their console?

1 Like
#4

I’m not seeing those errors with Gatsby. I get two warnings (for mitt.es.js.map and netlify-identity.js.map) but I don’t think they’re related to this issue:

#5

Ah ok, interesting. That error leads me to think that you’re using the Identity feature, is that right?

#6

hi folks!

yea hot reloading is… hard. all i can say is our CTO handles it and will figure it out over time - thanks for your patience

2 Likes
#7

Yeah, we currently have a few known bugs in the live tunnel around eventsource streams and websockets that we’re working on fixes for. Will update you all here once they go live.

2 Likes
#8

Yeah I am, for Netlify CMS. I don’t actually use Netlify CMS in my dev environment so I’m not too bothered with this warning. It’s working fine when deployed and as far as Netlify CMS goes that’s all that matters for me.

#9

is there an example of dev --live for functions? my function is being served as text instead of executing the code.

i created a functions folder with a hello.js function and added a netlify.toml file as follows:

[build]
  publish = "site"
  functions = "functions"

and accessing my function via my given dev-live-host/.netlify/functions/hello and get back the content of hello.js instead of the result of executing the function.

#10

have you tried netlify functions:create? bunch of demos for you.

#11

the issue in my case was that i added the netlify.toml file after running dev --live; I killed and restarted the dev deployment and expected behavior was realized.

#12

@guayom @simon the problems updating code in Gatsby projects should be solved now. We just released a new tunnel version that addresses the issue. You’d need to restart netlify dev --live.

2 Likes
#13

As mentioned by @calavera the fix for HMR is live now.

1 Like
#14

@calavera @biilmann Thanks, that was quick! It’s working better, but not completely I think. If I open the netlify.live link on the same machine in Chrome it’s updating when I make changes to components, css, whatever. But I just shared the link with a collegae and he’s still not seeing those changes, only after refreshing. There are no console errors. When I open the same link on my iPhone or another laptop I’m also not seeing hot reloading. Also, content updates to markdown files used to work pretty reliable but right now it doesn’t work most of the time (on my own machine, using the netlify.live link).

I’ve updated to the latest version of the netlify-cli.

#15

Hi! I tried it. But something weird is going on now. When I use just netlify dev everything works just fine. But when I try netlify dev --live and visit the generated address, the tunnel doesn’t show the directory I’m working on, but a completely different one.
I made sure I have all the right settings on my netlify.toml and .netlify/state.json
Do you have any clues? Maybe it’s something in my config, but I don’t know where to start looking.

#16

When I run “netlify dev --live” I get the message “No dev server detected, using simple static server” … and no live-reloading on editing content or templates. I’m using the Hugo + Netlify CMS starter project aka “victor-hugo” package https://github.com/netlify-templates/one-click-hugo-cms … I’m not really invested in this particular project yet, though I would like to stick to Hugo and Netlify CMS if possible. Are there other starter projects or tutorials that might be better suited to getting things working with Netlify Dev? Any help would be greatly appreciated.

#17

@mischkl that is our Hugo detector not working, not related to the issue in this thread (i.e. you have the same problem without --live as well)

the source is here: https://github.com/netlify/netlify-dev-plugin/blob/master/src/detectors/hugo.js and it is looking for config files that dont exist in that template. add a config.yaml or config.toml for it to work.

#18

Aha, I see. There actually is a config.toml file already present, it’s just that the complete Hugo project is under the ./site folder - is there any way to configure netlify dev to treat a subfolder as the root?

As it happens it’s not such a problem for me at the moment; I can use the built-in “npm start” task, which includes Browser-Sync - good enough for me for the time being. I guess that netlify dev will be the better choice when I start using advanced features like functions, though.

EDIT: I got it working with help from the netlify-dev-plugin README, I just needed to add the lines to my netlify.toml file:

[dev]
  command = "yarn start"
  port = 3000
  publish = "dist"

Now things are working when I run “netlify dev”, which is all I need atm tbh. Somewhat oddly, though, “netlify dev --live” results in the following error:

Error: invalid argument "undefined" for "-l, --local" flag: strconv.ParseInt: parsing "undefined": invalid syntax
Usage:
   connect [flags]

Flags:
  -e, --endpoint string      (default "api.netlify.com")
  -h, --help                help for connect
  -l, --local int            (default 8080)
  -s, --session-id string   
  -t, --token string        
  -v, --verbose

FATA[0000] invalid argument "undefined" for "-l, --local" flag: strconv.ParseInt: parsing "undefined": invalid syntax
#21

@mischkl, this is a long shot (and you are using the correct syntax from the documentation) but I think that error is because the port number isn’t quoted. Yes, the README does show it unquoted.

Would you please try changing this line:

  port = 3000

to this instead?

  port = "3000"

It is my hope this will resolve the error with netlify dev --live.

#22

as far as i can tell unquoted doesnt matter