__vite_ping 404 errors on the Network tab

[henno]

Hi,

Just set up this project by setting web server's document root to /public folder and running npm install and npm run dev in /vite folder. Why am I getting __vite_ping errors in the Network tab?

[andrefelipe]

Try disabling HTTPS for now.

For HTTPS you need to adjust Vite config. Here is a real example I use. I left some paths unadjusted but you will get the example:

import * as fs from 'fs'
import path from 'path'
import { defineConfig, splitVendorChunkPlugin } from 'vite'
import vue from '@vitejs/plugin-vue'
import liveReload from 'vite-plugin-live-reload'

export const themeDir = path.resolve(__dirname, '../../../html/app/themes/tg')
export const themeUrl = '/app/themes/tg'

// https://vitejs.dev/config/
export default defineConfig({

  plugins: [
    vue(),
    liveReload('(app|config|support|views)/**/*.php', {
      root: __dirname,
    }),
    splitVendorChunkPlugin(),
  ],

  root: 'src',
  base: process.env.APP_ENV === 'development'
    ? '/'
    : `${themeUrl}/dist/`,

  build: {
    // output dir for production build
    outDir: `${themeDir}/dist`,
    emptyOutDir: true,

    // emit manifest so PHP can find the hashed files
    manifest: true,

    rollupOptions: {
      // our entry
      input: path.resolve(__dirname, 'src/main.js'),
    },
  },

  server: {
    https: {
      key: fs.readFileSync('/path-to-certificate/mysite.test.key'),
      cert: fs.readFileSync('/path-to-certificate/mysite.test.crt'),
    },
    hmr: {
      host: 'mysite.test',
    },

    // not required now as all scripts are loaded from the same host
    // cors: true,

    // we need a strict port to match on PHP side
    strictPort: true,
    port: 3301,

  },
})

[henno]

Does MAMP need to serve also on the same port 3301 (in your example)? How could Node and MAMP use both be the same port? Or what did you mean by 'match'?

[andrefelipe]

Sorry, I don't use MAMP, but in my case with that setup I just sent: — The site is running on https://mysite.test without any ports; — PHP adds this to the HTML head: <script type="module" crossorigin src="https://mysite.test:3301/main.js"></script>

This is what I mean about matching: — The main.js file is served from Vite server and do not exist on my web server; — That's why it is loaded from the port 3301, that's where the Vite server is running; — PHP needs to hard code that 3301 port so it outputs the script tag correctly, so we need to manually match the port that is in the Vite config and the port that is our PHP code;

[henno]

What do you use to serve PHP?

[andrefelipe]

Laravel Valet

For SQL just install MariaDb straight from Homebrew. In fact Valet install PHP and NGINX straight from Homebrew too.