How to hot reload a simple one page (static) website with no frameworks?

I’ve been using Netlify CLI/ Dev for some time in a project without any framework (html,js,css) and using the default static server from Netlify dev (local, not live).
Since the beginning I couldn’t hot reload any of the changes made to my code, so, every time a refresh is needed to update the page.
Is there some configuration that is missing or this is not a behavior expected in this situation?

Ps: Thanks for your time for reading this :slight_smile: .

I guess, you can try the command netlify dev --live.

I test my code using both options, local and live, and they have the same results: Hot reload doesn’t happen.
Searching for any topic regarding this feature is really difficult to pinpoint a clear answer to what is the intended behavior here.
Most of the time related posts only refer to frameworks.

My bad, seems like --live is not useful for the feature I mentioned. Maybe Netlify Dev doesn’t have hot reloading as it probably relies on the hot reloading offered by most frameworks. Here’s what you can do:

  1. Install a Node Module like this one: live-server - npm. Make sure it supports live reloading.
  2. In your netlify.toml file, set your build command to the command used by the module to start the server.
  3. Add this netlify.toml to your .gitignore.
  4. Run netlify dev.

Since both the module and netlify dev initiate a live-server, wouldn’t this create some sort of concurrency problem between then?
Anyway, thanks for taking you time helping me. If this behavior is really not supported natively by the CLI should I maybe suggest this feature to the team?

No. All frameworks create a live server anyways and Netlify Dev then creates one of its own.

If I’m right and there’s no other way to do this, maybe you could do that.

Neat, since this will change a bit of my current workflow any extra information helps preventing breakage.

Since the topic is still in a grey area, maybe I could ask this on the respective project repository? Or maybe quote/refer any of the support team here? I don’t know what is the best approach.

There’s not going to be much of breakage. You just need one global Node Module and a netlify.toml file.

The best one would be to see the repo for any existing feature requests/issues similar to yours and comment in that thread. If there’s none, I think it’s safe to assume that you can create a new thread there.

In any case, I guess someone from the official support team might comment in some time (hours or days), to confirm this.

Ok, I’ll have a look in their repo and maybe post links here for future reference, but having someone from the support team clarifying this would really make things easier.
Thanks @hrishikesh , this helped me a lot :smiley:

Hey @Douglas_William :wave:t2:

And welcome to The Forums, btw! :netliheart:

I’m going to assume you mean “hot reloading” in the sense that Webpack popularized — where saving your source file automatically injects and reloads-in-place the page you’re viewing in the browser so that you don’t have to refresh the page.

For starters, Netlify Dev doesn’t do anything of the sort. It doesn’t have any plumbing for hot reloading and doesn’t even know it’s happening, actually. Netlify Dev proxies the web server to port 8888 (where your browser points to) but the hot module reloading (HMR) that webpack does (for projects that use it) actually connects over port 3035. So, in a sense, the front end and the back end are talking behind Netlify Dev’s back and when HMR kicks in to hot reload the javascript, Netlify Dev has no clue. It actually doesn’t think / know any new page has been loaded… because it hasn’t :stuck_out_tongue: just reloaded-in-place. If you hit Cmd+R or the Refresh button, that would trigger an actual page reload and Netlify Dev would proxy / be aware of that.

Anyway, all that to say that Netlify Dev doesn’t have any built-in plumbing for hot reloading. That functionality comes (typically) from the framework you use to build your site. Gatsby, CRA, Nuxt, etc. and operates behind Netlify Dev without Netlify Dev’s awareness.

So what about getting similar functionality for purely-static sites? Well that’s tricky. I don’t know if anything exists out there for that. Webpack isn’t really made to just reload plain HTML. And even if you got it working, it’d take a ton of configuration and be WAY more powerful than it needs to be. What you’re looking for is some kind of simple runtime for building a purely static site during development only that does hot reloading for you behind the scenes (same as described above). I haven’t really heard of such a specific tool — Hot-HTML-Reloading for static sites :stuck_out_tongue:

I don’t want to leave you without anything though! This may also be slight overkill but in the past I’ve built purely static sites and used Jekyll to accomplish some better DX. The nice part about Jekyll is that you don’t have to setup basically any extra files to “use Jekyll” to serve static files. I’m pretty sure that just activating Jekyll in your directory will make it work more like a plain web server. Jekyll has a --watch flag though, which isn’t pure hot-reloading, but instead when it sees one of your files update, it forces the browser to reload for you. So it’s not seamless, but you don’t have to worry about refreshing so the point is mostly the same. Let me know if you’d like more info on this setup and I’d be happy to give more context :+1:t2:

Hope that helps!


Jon

I noticed this right away with waiting to see updates to my static site. I thought there might be a way to command things to be instant but I am so nontechnical I have not tried to find that solution. Instead I go with the pencils in space approach…

When NASA needed a pen to work in zero gravity they deployed a team of engineers to develop it. I wonder how much time and money that cost? The Russians around the same time decided to use pencils.

For my needs, I have an old school free hosting account set up with FTP elsewhere. I edit locally and sync the files to see the changes no problem in a series of tweaks. When the site looks like I want it I deploy from the same folder to Github for the new update to go live on Netlify and walk away, work done.

Welcome to The Forums, @babel!

I totally understand your sentiment, but there are pros and cons on both sides for sure. I believe the original poster was referencing hot-reloading of fully static pages when developing locally — not a remote sync setup like you described. OP just didn’t want to manually hit Cmd+R in the browser after making a code change to see it changed in the browser :stuck_out_tongue:

I would definitely encourage you to setup some kind of local development web server so you don’t have to route all your files over FTP to a remote web server (and access over the public web) just so you can see what the files contain. If you’re using VS Code you can easily install a simple HTTP server plugin that would allow you to just hit “start the web server” and see your pages in VS Code… many options :stuck_out_tongue: Link to plugin here


Using pencils in space opened up risks to fire and electrical hazards from having small shards or grains of graphite flying around — the Space Pen was expensive to develop but had real safety implications. The Russians ended up using them too :stuck_out_tongue:

Not always, but in most cases extensive engineering is worth it. :slight_smile:

Cheers!


Jon

1 Like

Thanks Jon. Wow, who would have thought that the pen vs pencil saga had some myth entwined within…

Hey I hear you on the local server use. I don’t really understand that one though. From within my file manager I click on the index.html file and -boom- the default web browser launches the page no problem. Almost instant to save the code edits in the text editor and hit F5 on the browser and see the changes with css and javascript fully functional. So, what is this local server of which you speak? I have never set one up.

(Hack with out-dated html skills here. I don’t write my own code I ‘find’ code and bend it to fit my pages.)

In reply to your suggestions, thanks for reminding me about VS Code. Glad to get that back in my toolbox. It took me a while to remember what it was the kept me using an online server to preview my site when projects were starting to get serious. Now I remember! All this page editing happens on the desktop computer. Fine and dandy but in reality, the majority of site visitors will be using a mobile device or tablet. So I must always double check how things look on the other devices before calling the job done. To access my edits and numerous little tweaks with those I have the site staged on a host with the easiest access to file uploads possible and instant rendering on the server.

(I used to have an SSH connection with my actual file manager on the desktop. Copy/Paste in a folder window that almost looked local, that was the easiest I have seen.)

So from my limited perspective, I am impressed with Netlify’s offering as a solid host for my site, but for my way of fiddling code together I need something to be able to nudge along with numerous small edits that I can quickly see on the smaller devices.

I’m always glad to hear about better practices though, thank you for your comments.

Brandon