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 ;-)
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 example.com instead of subfolder example.com/admin thus causong 404
Then probably set the
.env
value ofAPP_URL=https://yourdomain.com/subfolder
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..
public/hot
is generated when you runnpm 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 forAPP_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? https://panjeh.medium.com/laravel-app-env-local-app-env-production-difference-aa9662ac81d0
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?
I don't know how to put the build folder when I want to upload on a subdomain. does anyone know about this?
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
so when I upload a laravel project via cpanel, the contents of the build folder are not read / not loaded