Clarification of installation/development steps (jekyll --watch vs jekyll --livereload)

[posiczko]

Hello Máximo!

Thank you for your work bringing Vite to the ruby/rails/jekyll worlds. I have a question regarding how to integrate vite in the jekyll context for the purpose of live/hot reloading.

The issue I have boils down to the following:

As far as I can tell, jekyll serve with a standard --watch flag is not watching changes that Vite is producing and is not propagating the changes to the browser. The same changes to the CSS are reloaded in the browser when jekyll --livereload is used.

For reference, I use the following sample Jekyll blog which was derived using these steps. Standard entry points were used with addition of SASS pipeline.

Following your installation & development steps for Jekyll, I tried to run bin/vite dev while running jekyll serve with negative results, i.e. changes to _frontend/minima/*scss were not reflected in the browser. The were compiled by Vite from Jekyll, just not served. I got rid of bin/vite as jekyll seems to be running vite on its own.

Any hints on the proper setup?

[ElMassimo]

Hi Pawel! @posiczko

It's nice that you've done a write up on using jekyll-vite with minima, I had answered a similar question earlier but the name of the issue doesn't help for visibility.

I'll check the repo you provided and see what's happening with the setup. From what you've described, it's likely that Jekyll is not detecting the running Vite dev server.

Try starting Vite first, and the Jekyll process later once Vite has started listening on its port, and see if that causes HMR to work as expected.

I personally use jekyll serve --livereload because that will automatically reload the page when Jekyll finishes rendering any HTML changes.

---

Currently the docs mention the correct order for starting the process, but not why.

If Jekyll starts before Vite is running, it will start rendering immediately and tag helpers will use the manifest to render urls pointing to the compiled assets, since it won't detect a running Vite dev server.

(Though modifying a page later would cause it to be re-rendered, detect the now running Vite dev server, and render the Vite client tags)

This is confusing from a users' point of view, but it can be mitigated with a better setup and additional notes in the docs. The next release will add a Procfile.dev upon installation ensuring it works as expected:

vite: bin/vite dev
jekyll: sleep 3 && bundle exec jekyll serve --livereload

I might add a command to Vite Ruby to allow waiting for the dev server so that it's not flaky as waiting a fixed interval of time:

vite: bin/vite dev
jekyll: bin/vite wait && bundle exec jekyll serve --livereload

[posiczko]

Thank you for speedy reply! Interestingly, enforcing order during startup seems to fix the issue. Both livereload and watch seem to work!

[ElMassimo]

Nice to hear that!

I'll reopen in the meantime as a reminder to document the Procfile approach described above.

[ElMassimo]

Closed in https://github.com/ElMassimo/jekyll-vite/commit/b8adfbb94bc664cc825b08de6d5dac7d7e9e5bd9 and https://github.com/ElMassimo/jekyll-vite/commit/b76fd3f7468f9fae8c4adbbe41bd405bb73472b1.

Also, created jekyll-vite-minima with step-by-step instructions to setup Vite Ruby with the default theme (minima).

@posiczko Linked to your blog post in case folks want to use Vite to process the base stylesheets. Thanks for sharing! 😃