Quickstart steps lead to infinite reload loop if HTTPS enabled

[isaacs]

Prerequisites

• [X] I have written a descriptive issue title
• [X] I have searched existing issues to ensure the bug has not already been reported

Fastify version

3.28.0

Plugin version

2.3.1

Node.js version

17.6.0

Operating system

macOS

Operating system version (i.e. 20.04, 11.3, 10)

21.4.0

Description

Following steps at: https://fastify-vite.dev/quickstart/vue.html result in an infinite reload loop. No idea why.

Steps to Reproduce

1. Install deps:

npm i fastify fastify-vite fastify-vite-vue --save

2. app.js

import Fastify from 'fastify'
import FastifyVite from 'fastify-vite'
import renderer from 'fastify-vite-vue'

import {readFileSync} from 'node:fs'
const https = {
  cert: readFileSync('tier-dev-tailscale.pem'),
  key: readFileSync('tier-dev-tailscale-key.pem'),
}

const root = import.meta.url
const app = Fastify({
  logger: true,
  https,
})

await app.register(FastifyVite, { root, renderer })
await app.vite.commands()
await app.listen(+process.env.PORT || 443, '0.0.0.0')

3. views/index.vue

<template>
  <h1>Hello World</h1>
</template>

<script>
export const path = '/'
</script>

4. package.json file:

{
  "name": "@tier.run/tierweb",
  "version": "0.0.0",
  "type": "module",
  "main": "app.js",
  "dependencies": {
    "fastify": "^3.28.0",
    "fastify-vite": "^2.3.1",
    "fastify-vite-vue": "^2.3.1",
    "pino-pretty": "^7.6.0"
  }
}

5. Run node app.js
6. Open page in browser, results in infinite flashing re-load.

Resulting logs: https://gist.github.com/b3934ff57a86a5cb6b51616ddce2b4c3

Expected Behavior

Should load content once, not infinitely many times as fast as possible.

[galvez]

Thanks for the report, I'm looking into this shortly.

[galvez]

Does it still happen in production mode? node NODE_ENV=production app.js

I'm afraid Vite's development server might not work in HTTPS mode.

[isaacs]

@galvez That results in this error:

$ NODE_ENV=production node app.js
Error: Missing production client/index.html — did you build first?
    at recalcDist (/Users/isaacs/dev/tierdev/tierweb-vue/node_modules/fastify-vite/options.js:91:15)
    at processOptions (/Users/isaacs/dev/tierdev/tierweb-vue/node_modules/fastify-vite/options.js:100:3)
    at fastifyVite (/Users/isaacs/dev/tierdev/tierweb-vue/node_modules/fastify-vite/index.js:32:21)
    at Plugin.exec (/Users/isaacs/dev/tierdev/tierweb-vue/node_modules/avvio/plugin.js:132:19)
    at Boot.loadPlugin (/Users/isaacs/dev/tierdev/tierweb-vue/node_modules/avvio/plugin.js:274:10)

[galvez]

Yes, because to run in production mode first you have to build the app bundle: node app.js build.

In development mode the bundle is generated automatically for development.

[galvez]

Sorry, NODE_ENV=production node app.js build.

[isaacs]

$ NODE_ENV=production node app.js build
Error: Missing production client/index.html — did you build first?
    at recalcDist (/Users/isaacs/dev/tierdev/tierweb-vue/node_modules/fastify-vite/options.js:91:15)
    at processOptions (/Users/isaacs/dev/tierdev/tierweb-vue/node_modules/fastify-vite/options.js:100:3)
    at fastifyVite (/Users/isaacs/dev/tierdev/tierweb-vue/node_modules/fastify-vite/index.js:32:21)
    at Plugin.exec (/Users/isaacs/dev/tierdev/tierweb-vue/node_modules/avvio/plugin.js:132:19)
    at Boot.loadPlugin (/Users/isaacs/dev/tierdev/tierweb-vue/node_modules/avvio/plugin.js:274:10)

[galvez]

Hey @isaacs please refer to the new README which covers the upcoming v3 release in detail.