Auto update slides on save, using Vite and Deno

[sebmestrallet]

Javascript newbie here, I heard about these shiny tools and wanted to give them a try :

• Vite (vitejs/vite), among other things a fast development server with Hot Module Replacement (HMR) for quick feedback loops between your code and the output
• Deno (denoland/deno), a modern, simplified, batteries included Javascript runtime, by the creator of Node.js

Webpage auto-reloading on file save :

I came across existing projects based on Node.js :

• "Presentations with Reveal.js and Vite", by Gleb Bahmutov, PhD https://glebbahmutov.com/blog/reveal-vite/
  ⤷ Creates a Vite project from a template, then adds some minimal Reveal.js code
• discussion Reveal.js template for Replit.com #3364
  ⤷ A Replit.com template with both Reveal.js & Vite, but the Reveal.js code has drifted significantly (added main.js & style.scss entry points, no more themes)

I wanted auto-reloading & HMR, while using Deno and keeping my existing slides (based on the full hakimel/reveal.js repo).
Here is how I got it working. Skip to the end for the summary.

Installing Deno is very simple, and installing Reveal.js dependencies with Deno too:

# cd to your Reveal.js project then
deno install --allow-scripts

If you have a custom theme, let's say css/theme/source/custom.scss, you want to compile it to CSS & merge the style definitions with theme.scss, layout.scss, reveal.scss, etc

deno run build -- css-themes

Here I got an error: "TypeError: fs.fchmod is not a function" at node_modules/.deno/[email protected]/node_modules/vinyl-fs/lib/file-operations.js:257. This is because Deno 2 is not quite 100% compatible with Node.js, this function is not available. See issues denoland/deno#24314 and denoland/deno#18218.
As workaround, I commented-out this function and its call:

    // Check access, `futimes`, `fchmod` & `fchown` only work if we own
    // the file, or if we are effectively root (`fchown` only when root).
    if (!isOwner(stat)) {
      return callback();
    }

-   if (modeDiff) {
-     return mode();
-   }
    if (timesDiff) {
      return times();
    }
    owner();

-   function mode() {
-     var mode = stat.mode ^ modeDiff;
-
-     fs.fchmod(fd, mode, onFchmod);
-
-     function onFchmod(fchmodErr) {
-       if (!fchmodErr) {
-         file.stat.mode = mode;
-       }
-       if (timesDiff) {
-         return times(fchmodErr);
-       }
-       if (ownerDiff) {
-         return owner(fchmodErr);
-       }
-       callback(fchmodErr);
-     }
-   }

    function times(propagatedErr) {

Now onStat() of vinyl-fs no longer tries to chmod files. CSS themes can be built.

Time to test Vite. Create a vite.config.js in your project root:

import { defineConfig } from "vite";

export default defineConfig({
  optimizeDeps: {
    exclude: ['css', 'examples', 'test', '.git', '.github'], // ignore these folders
  }
});

Then:

deno install npm:vite
deno run --allow-read --allow-write --allow-env --allow-sys --allow-ffi --allow-net --allow-run npm:vite

If you get "Error: Too many open files (os error 24)" (fixed in Deno 2.0.3, see PR denoland/deno#26200)

From issue denoland/deno#17757, one solution is to switch from useFsWatch to usePolling. Edit vite.config.js:

    import { defineConfig } from "vite";

    export default defineConfig({
+     server: {
+       watch: {
+         useFsEvents: false,
+         usePolling: true,
+       },
+    },
      optimizeDeps: {
        exclude: ['css', 'examples', 'test', '.git', '.github'], // ignore these folders
      }
    });

Try again:

deno run --allow-read --allow-write --allow-env --allow-sys --allow-ffi --allow-net --allow-run npm:vite

Open localhost at the specified port, and bingo, the webpage auto-reloads when you save your index.html.

However, you may have noticed that tweaking and saving your dist/theme/custom.css has no effect. This is because dist/ is an output folder for both Reveal.js and Vite, and Vite ignores files inside. Let's edit our vite.config.js:

    import { defineConfig } from "vite";

    export default defineConfig({
+     build: {
+       outDir: "outDir"
+     },
      optimizeDeps: {
        exclude: ['css', 'examples', 'test', '.git', '.github'],
      }
    });

Now, if run, vite build will use another output folder, and dist/theme/custom.css is watched for you to benefit from Hot Module Replacement (see GIF).

Summary

1. Install Deno
2. cd to your hakimel/reveal.js copy, possibly with your custom themes, assets and plugins
3. deno install --allow-scripts
4. deno run build -- css-themes. If fs.fchmod function not recognized, comment-out its definition & it call, then re-run
5. deno install npm:vite
6. Create your vite.config.js that changes the build output directory
7. deno run --allow-read --allow-write --allow-env --allow-sys --allow-ffi --allow-net --allow-run npm:vite
8. Enjoy!

Let me know if you have some tips & tools to improve your Reveal.js dev environment!