I'm trying to get up and running with Parcel but I can't get a basic setup to work. I would like to serve a static HTML page that automatically reloads when it's changed.
When I go to http://localhost:1234, Parcel serves my page. If I change anything in the index.html, it does not reload... or it reloads with an empty response.
versions
parcel: 1.12.4
npm: 6.12.1
node: v13.3.0
index.html
<!doctype html>
<html>
<head>
<title>Tinsel town</title>
<script src="app.js"></script>
</head>
<body>
<h1>Tinsel…</h1>
</body>
</html>
app.js
// empty
Shell
matt$ parcel index.html --log-level 5
[13:20:42]: Server running at http://localhost:1234
[13:20:42]: Building...
[13:20:42]: Building index.html...
[13:20:43]: Building app.js...
[13:20:43]: Built app.js...
[13:20:43]: Built index.html...
[13:20:43]: Producing bundles...
[13:20:43]: Packaging...
[13:20:43]: Building hmr-runtime.js...
[13:20:43]: Built ../../../usr/lib/node_modules/parcel-bundler/src/builtins/hmr-runtime.js...
[13:20:43]: ✨ Built in 477ms.
[13:20:49]: Building...
[13:20:49]: Producing bundles...
[13:20:49]: Packaging...
[13:20:49]: ✨ Built in 2ms.
Vim and how it saves files was the the issue.
When you save in Vim it renames the file you're editing and saves the current buffer to the file location:
+------------+ +---------------------------------+
| index.html +------>+ ~/.cache/vim/backup/index.html~ |
+------------+ +---------------------------------+
index.html is now kaput!
(no `MODIFY` filesystem event fired, only `DELETE`)
+----------+ +------------+
| *buffer* +------>+ index.html |
+----------+ +------------+
(`CREATE` filesystem event fired)
This default behaviour can be changed by setting backupcopy to yes in your .vimrc:
set backupcopy=yes " Necessary for ParcelJS to work
This causes Vim to write directly to the file you're editing, which in turn causes a modification event to fire in the filesystem. Parcel see's this and does it's thing.