Add docs about page keeping auto refreshing

[frog-o]

about every 6 second my page refresh and i have no clue how to turn this off. Just download and followed your tutorial

[brillout]

This is probably a Vite issue. Do you also have this with npm init vite@latest?

[frog-o]

I just tried the latest here is my package.json.
I still have it doing annoying refresh have no clue how to troubleshoot try upgrade typescript to latest beta tried upgrade ts-node. I still very new to node env. I don't undestand at all how ts-node find wich script to execute it pointing to a directory
"scripts": {
"dev": "npm run server",
"prod": "npm run build && npm run server:prod",
"build": "vite build && vite build --ssr",
"server": "ts-node ./server",
"server:prod": "cross-env NODE_ENV=production ts-node ./server"
},
"dependencies": {
"@types/compression": "^1.7.2",
"@types/express": "^4.17.13",
"@types/node": "^17.0.17",
"@vitejs/plugin-vue": "^2.2.0",
"@vue/compiler-sfc": "^3.2.31",
"@vue/server-renderer": "^3.2.31",
"compression": "^1.7.4",
"cross-env": "^7.0.3",
"express": "^4.17.2",
"ts-node": "^10.5.0",
"typescript": "^4.5.5",
"vite": "latest",
"vite-plugin-ssr": "^0.3.54",
"vue": "^3.2.31"
}

[brillout]

As I said, I don't think it's related to vite-plugin-ssr.

[frog-o]

I don't think so either but I think I have an idea of what it is now @brillout,

Even if it not your problem it make a very bad user experience and a very unwelcoming one at that.
All I want to do is help.
I feel this type of thing make your plugin look bad even if it not your problem.

I found this issue after much looking.
Which is the same error i am getting. Vite does not mention it uses websocks in there documentions.

Could you somewhere in your documentation say

if you have problem with page refresh make sure web browser is connecting to the websocket; If it fails it keep trying and refreshing see more about this issue here

I think this is going to happen to anyone run vite in a container.

This is all I am asking for, You said

but as do-one-thing-do-it-well Vite plugin.

I think add info on how to debug this is going to help enforce this point of view.

[brillout]

Good point, I will create a new Troubleshooting section.

[frog-o]

Thankyou a lot

[brillout]

👍 And please let me know if you find other such paper cuts. I do want to polish vps.

I'm going to implement the Troubleshooting section after I release Vike.

[frog-o]

I Just figure things out

I also asked vite for troubleshooting section here
since i believe it is there error.

I found out that the issue I point you to was lock I was going to commit there about how I had the same problem and ask them to add a troubleshoot section.

Most of my problem occur because of 2 things

1.) I am trying to program over a local network I have vite listen to 0.0.0.0
2.) I have it running in a systemd container (I think systemd sets up a nat by default.)

I have to allow systemd to allow traffic from the ports I want to use so far I open up 2.

1. one for vite to listen on
2. another for websocket.

I add this to my config

const config: UserConfig = {
  plugins: [vue(), ssr()],
  server: {
    port: portFrombullet1,
    host:"0.0.0.0",
    watch: {usePolling: true},
    hmr:{port:portFrombullet2},
    strictPort: true
  }
}

This setting I believe are commonly untested because it is consider a security hole. But Ironically IMHO it create one. This is bad for many reason the main one is If you are using a local network you should not have to hook up vite to use the internet and your going to need to listen to the outside world in odder to do it. I could make it a little safer by just listen to one ip address but since I am trying to trouble shoot i figure to listen to them all. It has no domain name and I am running it only when I working on it. And I believe I am behind 2 nats with an uncommon port number. I am using a raspberry pi in headless mode. It has to run in a container in odder for me to use 64-bit or I need to reinstall the system and start from scratch. Working from a container I believe is safer.

There is no such thing a completely secure unless you don't use it and even that not completely safe.

I was getting

TypeError: Cannot read properties of null

from vite hydrate process..

this was the stack trace 

logError (runtime-core.esm-bundler.js:218)
handleError (runtime-core.esm-bundler.js:204)
renderComponentRoot (runtime-core.esm-bundler.js:922)
hydrateSubTree (runtime-core.esm-bundler.js:5002)
componentUpdateFn (runtime-core.esm-bundler.js:5023)
run (reactivity.esm-bundler.js:167)
setupRenderEffect (runtime-core.esm-bundler.js:5156)
mountComponent (runtime-core.esm-bundler.js:4939)
hydrateNode (runtime-core.esm-bundler.js:4124)
hydrateChildren (runtime-core.esm-bundler.js:4257)
hydrateElement (runtime-core.esm-bundler.js:4219)
hydrateNode (runtime-core.esm-bundler.js:4115)
hydrateChildren (runtime-core.esm-bundler.js:4257)
hydrateElement (runtime-core.esm-bundler.js:4219)
hydrateNode (runtime-core.esm-bundler.js:4115)
hydrateSubTree (runtime-core.esm-bundler.js:5009)
componentUpdateFn (runtime-core.esm-bundler.js:5023)
run (reactivity.esm-bundler.js:167)
setupRenderEffect (runtime-core.esm-bundler.js:5156)
mountComponent (runtime-core.esm-bundler.js:4939)
hydrateNode (runtime-core.esm-bundler.js:4124)
hydrateSubTree (runtime-core.esm-bundler.js:5009)
componentUpdateFn (runtime-core.esm-bundler.js:5023)
run (reactivity.esm-bundler.js:167)
setupRenderEffect (runtime-core.esm-bundler.js:5156)
mountComponent (runtime-core.esm-bundler.js:4939)
hydrateNode (runtime-core.esm-bundler.js:4124)
hydrate2 (runtime-core.esm-bundler.js:4039)
mount (runtime-core.esm-bundler.js:3874)
app.mount (runtime-dom.esm-bundler.js:1609)
hydrate (_default.page.client.ts:13)
await in hydrate (async)
(anonymous) (_default.page.client.ts:6)

I found out this was caused by me using clientPort instead of port in hmr server section in my config.

I just post this to let people who might have this problem know there not alone; Maybe I am the only one because I am just weird and won't bow down to how thing are typical done.

Like I said not your problem but thought you might want to know, I am ecstatic I finally able to get this to work.

[brillout]

@frog-o 👍

[frog-o]

something that i wanted to do was add fastify instead of express I had to change index.ts to this
and run

>yarn add fastify and middie @types/aws-lambda

import Fastify from 'fastify'
import middie from 'middie'
import compression from 'compression'
import { createPageRenderer } from 'vite-plugin-ssr'

const isProduction = process.env.NODE_ENV === 'production'
const root = `${__dirname}/..`

startServer()
//I am still learn javscript, node etc but i got rid of use
// and replaced it with register wich i beleave does the same thing.
//frog-o
async function startServer() {
  const app = Fastify()
  await app.register(middie)
  await app.register(compression)

  let viteDevServer
  if (isProduction) {
    app.register(require('fastify-static'), {
    root: `${root}/dist/client`,
    
    })
  } else {
    const vite = require('vite')
    viteDevServer = await vite.createServer({
      root,
      server: { middlewareMode: 'ssr' },
    })
    app.use(viteDevServer.middlewares)
  }

  const renderPage = createPageRenderer({ viteDevServer, isProduction, root })
  app.get('*', async (req, res) => {
    const url = req.url
    const pageContextInit = {
      url,
    }
    const pageContext = await renderPage(pageContextInit)
    const { httpResponse } = pageContext
    if (!httpResponse) return res.status(405)
    const { body, statusCode, contentType } = httpResponse
    res.status(statusCode).type(contentType).send(body)
  })

  const port = parseInt(process.env.PORT ??= "tomyPort")
  const host = process.env.HOST ??= "0.0.0.0"
  app.listen(port,host)
  console.log(`Server running at ${host}:${port}`)

This does not work on you production target. Looking at vite doc dosen't help. Your are doing a lot I don't understand.

• where is index.html
• in the package.json "build": "vite build && vite build --ssr", why is ssr empty sould it not point to _default.page.client.js or something
• in the package.json there "server:prod": "cross-env NODE_ENV=production ts-node ./server" why does it point to dir instead of server.js or server.ts

yarn 3 dose not work in PNP mode a real bummer. I have to add
nodeLinker: "pnpm" in my .yarnrc.yml I report to yarn here

[brillout]

@frog-o Try to find the answers on your own before asking stuff

[frog-o]

I always try to look for the answer first but i do have problem with comprehension and finding things. At times i do overlook things. I think very differently than most so it takes me a lot longer to go through documents and makes finding things a lot more difficult if not impossible. It just a small paper cut i thought you ask about. I never really meant for an answer just letting you know it taking me some time.

…

On Sun, Feb 27, 2022, 9:00 AM Rom ***@***.***> wrote: @frog-o <https://github.com/frog-o> Try to find the answers on your own before asking stuff — Reply to this email directly, view it on GitHub <#266 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALNZ2Z5XL3PLYWHYUPF6BQ3U5IU7NANCNFSM5O4F4MJQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[brillout]

I agree but the problems you mentioned are unrelated to vps

[frog-o]

Please don't get annoyed by this but to me they're absolutely related. It's all about usability of your plugin. It doesn't do the user any good to have a very complicated but powerful plugin if they don't have the knowledge to use the plugin properly documented. And i think everybody wants to use plugin or whatever as quickly as possible. ***I do see why you don't like having issues opened*** it makes your project look bad. I thought the questions i asked should be a separate issue but i really don't want to open another , I think it would just annoy you ***i am greatful for anything you are willing to do.*** I don't what to be like the mouse in('If You Give A Mouse A Cookie')[ https://www.theodysseyonline.com/give-mouse-cookie] I was thinking you could add a nfaq(not so frequently asked questions or i would rather call a QSQ quick start question) to quickly start using your plugin. I thought this would make your project look awesome but than again like I said ***i see things very differently*** I understand if all this is to complicated or just to annoying to do. The last thing i wanted to be is a pest. I think i just end my conversation here and say thanks for whatever you decide to do. Just to give you example of usability problems I am have and how i feel it relates when I asked about

where is index.html

In vite documentation in **getting started**(here) [https://vitejs.dev/guide/#community-templates] it talk about index.html When I scaffold the project like they tell me to (follow the getting started tutorial) with there command ---> it give me the index.html file just file. IMHO this has to be related to something that your plugin is doing. It look like you are doing something other then the default. Now I have to dig though and find out why. How I am supposed to know how to use your plugin if the index.html file not there? How am I supposed to follow the documentation from vite? what a headache. I don't mind reading thing but it would be nice if i could do something instead of spending hours on things tring to figue how it works. It is all related to how do I use your plugin.

[frog-o]

In odder to help with docs of my problem I mention above it is also mention here I am still looking for answers and I thought it might be helpful if anyone is following this.

[brillout]

Closing for lack of interest.