CODEWITHSUNDEEP
javascriptvimparceljs
Matt
Matt

Reputation: 10312

Parcel does not reload changes to HTML page

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.

Upvotes: 3

Views: 4332

Answers (3)

Yogesh
Yogesh

Reputation: 43

Move script tag from head to body tag and add type="module" attribute.

like this:

<!doctype html>
<html>
    <head>
        <title>Tinsel town</title>
    </head>

    <body>
        <h1>Tinsel…</h1>

        <script type="module" src="./app.js"></script>
    </body>
</html>

This should solve you problem.

Upvotes: 1

Jackie Santana
Jackie Santana

Reputation: 1458

parcel watch allows you to hot reload both javascript & html but it will not create a running dev server so you will need to combine two npm commands to run the parcel dev server along with hot reloading.

Yo can create a script combining the two npm commands instead of running 2 separate terminal tabs

package.json script setup below as an example

   "scripts": {
    "dev": "(parcel ./src/index.html) & parcel watch ./src/index.html",
    "build": "parcel build ./src/index.html"
  },

in your terminal run: npm run dev

Upvotes: 0

Matt
Matt

Reputation: 10312

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.

Upvotes: 5

Related Questions