I recently needed to help someone out who was using MAMP on a MacBook Pro on a Laravel 9 project.
The project was configured to:
- run on MAMP
- the MAMP host was configured to use SSL
- Laravel 9
- Vite
- InertiaJS
The Problem
When running the default project with yarn run dev and accessing the project in the browser via the hostname configured in MAMP, the hot reload feature was not working and the network and console tabs in Developer Tools were polluted with lots of 404 errors about the failure to connect to the Vite Ping URL e.g. __vite_ping to which it keeps trying to reconnect to.
How to fix
You have to configure Vite to run on https. This can be done in a number of ways, but the easiest is to use the @vitejs/plugin-basic-ssl plugin. It’s really easy to get started:
- Add the plugin to your project
- with yarn:
yarn add --dev @vitejs/plugin-basic-ssl - with npm:
npm i @vitejs/plugin-basic-ssl
- with yarn:
- Open the
vite.config.jsfile in your Laravel project - Import the plugin at the top of the file:
import basicSsl from '@vitejs/plugin-basic-ssl'
- Enable the plugin using the defineConfig block e.g.
export default {
plugins: [
basicSsl()
]
}
Note: you might already have other plugins or config options in the defineConfig block, but you just need to make sure you add the called to basicSsl() in the plugins section.
After this when you run your project using yarn run dev it will provide you with a Local URL e.g.
11:15:06 [vite] vite.config.js changed, restarting server...
11:15:06 [vite] server restarted.
> Local: https://localhost:3000/
> Network: use `--host` to exposeOpen that Local URL in your browser and you’ll receive an SSL warning. Accept the risks to accept the SSL certificate generated by the plugin.
Once that’s done when you visit your application dev URL, you’ll see all the Vite 404 errors have disappeared and you’re left with one neat little log that tells you Vite is now connected.
[vite] connecting... client.ts:16:8
[vite] connected. client.ts:53:14Hope this helps!