How to Deploy CSS/JS Assets with Vite to Live Server in Laravel

To deploy assets with Vite to the live server, one of the ways is to build them locally and then push the built assets to the repository.

First, make sure that you have @vite Blade directive in your <head>...</head> of the layout, like this:

@vite(['resources/css/app.css', 'resources/js/app.js'])

Then, locally, you need to run this:

npm run build

It will build the assets into the public/assets/build folder, with filenames like app.9c74dca2.css or app.a6b31529.js.

Then, change the default .gitignore that comes with Laravel:

  • You DON'T need to ignore the /public/build - remove it if it's there
  • You DO need to ignore the /public/hot - add it if it's not there

Then, push all the code to production, and you don't need to re-build anything on the server, just do git pull from there.

Alternatively, you can make the front-end build a part of your deployment on the server side, including it in your Continuous Deployment scripts.


Thanks for you lessons.


Thanks for the /public/hot reminder. That has caused me some headache already ;-)

👍 1

You're the best one! Thanks for writing all these ESSENTIAL content at the right moment!


How would you handle the issue if the laravel is being served on a sub folder in nginx...the assets are loading on the root domain i.e instead of subfolder thus causong 404


Then probably set the .env value of APP_URL=


What if you are deploying manually using FTP?


The proccess should be the same. Or close to it. It will just depend on your server configuration and how that is done.

ps. We strongly recommend avoiding FTP deployments.


what is /public/hot?

my project did do build. Necessary .htaccess redirects were made.

After building the project does not work on my computer and I get GET http://[::1]:5173/@vite/client net::ERR_CONNECTION_REFUSED error on the server.

i need videos example..

👍 1

public/hot is generated when you run npm run dev - this is hot builds that will live-reload your site in development.

As for your issue, this is a bit weird... Can you add the full error message? It might be that you have .env misconfiguration for APP_URL


I am sorry. I deleted the public/hot file. but right now I don't know what the .htaccess file will be like.


Not sure I understand what the problem is for you.

Laravel comes with default .htaccess file and it should work just fine


Is your server configured with APP_ENV=production in your .env file?


Using forge/digital ocean. The problem I get with trying to deploy to Digital Ocean after a npm run build is that it recreates the assets in the public folder. When deploying, the public folder on digital ocean is owned by root without write access to everyone, which is probably how it should be. The permissions need to be changed everytime, then changed back. It is a major hassel. Is there any other way to handle this?

Like our articles?

Become a Premium Member for $129/year or $29/month
What else you will get:
  • 60 courses (1084 lessons, total 42 h 44 min)
  • 80 long-form tutorials (one new every week)
  • access to project repositories
  • access to private Discord

Recent Premium Tutorials