Getting file changes to cause a reload

[planetoftheweb]

When the dev server is running and I modify a file in a directory. Is there a way to configure Vite so that it reloads the page.

Right now, my app reads markdown files to create a slideshow. These are located in

/src/slides

If I modify one of these files whatever is handling HMR doesn't notice, so I have to do a manual browser refresh.

I tried different configuration of the server object.

export default {
  root: "src",
  publicDir: "public",
  server: {
    open: true,
    watch: {
      paths: "/src/slides/*.md",
    },
  },
};

But that doesn't seem to work. The page reloads fine if I modify sass, js, html files, but evidently not md files. Is there a configuration I'm missing somewhere?

[CHOYSEN]

How do you import markdown files? HMR works fine in my case.

// App.vue
import md from './test.md?raw'
console.log(md)

https://vitejs.dev/guide/assets.html#importing-asset-as-string

[planetoftheweb]

I'm not importing the markdown files. This is a reveal.js project, so a plugin is taking care of going through the markdown separately.

  let mySlides = Reveal.getSlides() // get all the slides
  Reveal.hasPlugin('markdown')

  mySlides.forEach(currSlide => {
    //go through each slide
...

My project lets you point to different markdown files by modifying the URL. I guess since I'm not importing the markdown maybe it doesn't know to keep track of changes.

[planetoftheweb]

Also, I'm using vanilla JavaScript, not vue for this project.

[planetoftheweb]

What you suggested was helpful. I can do a conditional load of the external file.

function importMarkdown(mdFileName) {
  return import(`./slides/${mdFileName}.md?raw`);
}

And then when I read the URL I get the filename.

if (getUrlVars().d) {
  let dataFile = getUrlVars().d
  document.querySelector('section').dataset.markdown =
    'slides/' + dataFile + '.md'
  importMarkdown(dataFile)
}

And then the HDR keeps track of the file and reloads it if I modify it, but I don't actually need the file, so it's overkill to read it just to cause a reload.

[CHOYSEN]

Yep, you can also try this:

// vite.config.js
export default {
  plugins: [
    {
      name: 'reload',
      configureServer(server) {
        const { ws, watcher } = server
        watcher.on('change', file => {
          if (file.endsWith('.md')) {
            ws.send({
              type: 'full-reload'
            })
          }
        })
      }
    }
  ]
}

https://vitejs.dev/guide/api-plugin.html#configureserver

[planetoftheweb]

Well dang it. That's just flipping brilliant. Works like a charm. Thanks mate!