Closed henno closed 2 years ago
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,
},
})
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'?
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;
What do you use to serve PHP?
Laravel Valet
For SQL just install MariaDb straight from Homebrew. In fact Valet install PHP and NGINX straight from Homebrew too.
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?