Vite assets are still localhost on production server

If you are using vite.js (for example when using Laravel assets bundler) then running the npm run build command triggers the build process for your project. When you run this command, Vite.js will perform several tasks to prepare your application for production deployment.

If you use Git and upload/deploy your files to production server and you css is not working then check the source code.  If you see something like this on your production server :

<script type="module" src="http://127.0.0.1:4523/@vite/client"></script>
<script type="module" src="http://127.0.0.1:4523/resources/js/app.js"></script></code>

then check if the “hot” file was accidentally uploaded to your server (github) to your Laravel public folder. Delete it and it should work. This file is used when running the dev server but will break production.

To exclude this file being uploaded to github you add it to .gitignore file:

/public/hot