Skip to main content
Tutorial Free

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

January 22, 2023
1 min read

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.

Enjoyed This Tutorial?

Get access to all premium tutorials, video and text courses, and exclusive Laravel resources. Join our community of 10,000+ developers.

Comments & Discussion

OG
Odong Geofrey ✓ Link copied!

Thanks for you lessons.

W
wolfatadfilm ✓ Link copied!

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

R
rafa1944 ✓ Link copied!

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

MN
MICHAEL NJOGU ✓ Link copied!

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

PK
Povilas Korop ✓ Link copied!

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

SD
Saratou Diallo ✓ Link copied!

What if you are deploying manually using FTP?

M
Modestas ✓ Link copied!

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.

FS
Faruk Savur ✓ Link copied!

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..

M
Modestas ✓ Link copied!

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

FS
Faruk Savur ✓ Link copied!

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

M
Modestas ✓ Link copied!

Not sure I understand what the problem is for you.

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

P
Polfo ✓ Link copied!

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

S
scott ✓ Link copied!

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?

C
CrustFast ✓ Link copied!

I don't know how to put the build folder when I want to upload on a subdomain. does anyone know about this?

M
Modestas ✓ Link copied!

Could you expand a bit more? It doesn't matter if you are uploading it on a subdomain or a main domain - it's still a folder

C
CrustFast ✓ Link copied!

so when I upload a laravel project via cpanel, the contents of the build folder are not read / not loaded

We'd Love Your Feedback

Tell us what you like or what we can improve

Feel free to share anything you like or dislike about this page or the platform in general.