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.

avatar

Thanks for you lessons.

avatar

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

👍 1
avatar

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

avatar

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 example.com instead of subfolder example.com/admin thus causong 404

avatar

Then probably set the .env value of APP_URL=https://yourdomain.com/subfolder

avatar

What if you are deploying manually using FTP?

avatar

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.

avatar

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
avatar

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

avatar

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

avatar

Not sure I understand what the problem is for you.

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

avatar

Is your server configured with APP_ENV=production in your .env file? https://panjeh.medium.com/laravel-app-env-local-app-env-production-difference-aa9662ac81d0

avatar

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