When .html files are served from public directory, page reload is not working

lubomirblazekcz commented 3 years ago

Describe the bug

When you move index.html to public directory, or if you have any other file there, the changes are not reloaded in browser.

Reproduction

Create example.html file in public directory and run vite, then try to change anything in that file. Server will not refresh.

11:20:51 [vite] page reload public/example.html

If you run the file on public/example.html, it works correctly but then you get this warning, which is correct.

files in the public directory are served at the root path.
Instead of /public/example.html, use /example.html.

Page reload should work in both cases - example.html and public/example.html

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

System:
    OS: Windows 10 10.0.19042
    CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
    Memory: 8.46 GB / 15.96 GB
  Binaries:
    Node: 14.15.5 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 7.11.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.906.0), Chromium (90.0.818.51)
    Internet Explorer: 11.0.19041.1
  npmPackages:
    vite: ^2.2.3 => 2.2.3

Used package manager: npm

Before submitting the issue, please make sure you do the following

[x] Read the Contributing Guidelines.
[x] Read the docs.
[x] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[x] Provide a description in this issue that describes the bug.
[x] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
[x] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

lubomirblazekcz commented 3 years ago

Another problem is that when transformIndexHtml is used it only works for public/example.html but not for example.html

CHOYSEN commented 3 years ago

I think this is expected. See https://github.com/vitejs/vite/issues/2132#issuecomment-783468908

patak-dev commented 3 years ago

See comment linked by @CHOYSEN, closing as this is expected.

lubomirblazekcz commented 3 years ago

Sorry but this seems to me as an jssue. If it's working for /public/file.css I would expect this to work also for /file.css

I am using public dir as a workaround for middlewaring files urls from /directory/ to / because I didn't find any other option to do this

patak-dev commented 3 years ago

Could you explain more about the use case you are trying to workaround?

lubomirblazekcz commented 3 years ago

I am using vite as dev server to serve asset files from /public/ directory (or similiar type of directory, /www/ etc.) and source files from /src/

So the structure can look this way: (this is my structure where I don't use build in vite)

www
- index.html
- blog.html
- article.html
- favicon.svg
src
- main.js
- style.css

This is typical vanilla static site project structure. Currently this is only possible if you have your files in root, rather then in www (or diffrent directory). Or if you use public dir, which has it's problems as I said.

I described similiar problem in here https://github.com/vitejs/vite/issues/3354 where I find out that it's possible to create middleware, but that only works for .html files not other assets and build doesn't exactly work with this.

lubomirblazekcz commented 3 years ago

With using build with vite I would expect the final structure (after build) look something like this. Which would be typical php framework structure. Which I want to replicate, because of using Vite for creating templates for PHP applications.

dist (or www, public, etc.)
- assets
- .css, .js
- index.html
- blog.html
- article.html
- favicon.svg
src (or resources, app)
- scripts
- *.js
- styles
- *.css
- templates
- *.html

lubomirblazekcz commented 3 years ago

eg. this is how I am currently using vite with such a structure https://github.com/newlogic-digital/core-starter I'm using vite as a dev server (with the javascript API), but build is handled with gulp

lubomirblazekcz commented 3 years ago

@patak-js disregard my last comments, I was doing this wrong (https://github.com/vitejs/vite/issues/3354#issuecomment-842331283)

I still need to use public dir for my purposes though, because I want to serve *.html files from public and HMR only works on full path /public/file.html not /file.html - that was my primary problem with this issue.

And this seems to be problem with middleware in generaly, once you transform the path from original to different url, HMR works only for the original url.

see example here - https://github.com/evromalarkey/vite-test-middleware

So HMR works for /public/file.ext but not for /file.ext or anyother transformed urls with middleware. Same if you create custom middleware for eg. transforming path eg. from /index.html to /templates/index.html

lubomirblazekcz commented 3 years ago

Ok I am propably a comment spammer today, sorry about that, I managed to workaround this as well.

So if anyone wants to workaround this as me, you can watch for changes with plugin api. You can handle reload in public directory with this aswell.

{
    name: 'reload',
    handleHotUpdate({ file, server }) {
        if (file.endsWith('.html')) {
            server.ws.send({
                type: 'full-reload',
                path: '*'
            });
        }
    },
}

vitejs / vite