Level 122
You shouldn't have anything in public/hot. Its being detected by vite that you are in a hot reload situation.
Aug 9, 2022
24
Level 1
Laravel Vite Deploying to Host
Hi,
I've created a Laravel 9 application. Before Laravel 9 there was webpack.mix. And it was pretty easy to use and deploy. But I couldn't figure it out with Vite. In local there's nothing wrong. Everythings fine. But when it comes to deploying to host, something is wrong.
I ran the command "npm run build". It exported css and javascript to public/build folder. I've uploaded project to my shared hosting. Then I changed the url inside public/hot file to my website url. And then I tried to open the page but it cannot load the js and css files. I looked up to the page source, it tries to load;
<script type="module" src="https://test.xpdevil.com/@vite/client"></script>
<link rel="stylesheet" href="https://test.xpdevil.com/resources/css/admin.css" />
<script type="module" src="https://test.xpdevil.com/resources/js/app.js"></script>
But the css file is located in "public\build\assetsapp.9d89b38c.css". Why is it trying to reach /resources/ path?
And it gives me 404 on https://test.xpdevil.com/@vite/client. Why?
How can I properly deploy Vite into my shared hosting?
Level 1
@Snapey Yeah thanks that problem is fixed but now it gives me these errors: https://prnt.sc/WaxBjeayTsdo
Level 122
@Blitzkrieg from what requests?
Level 15
<script src="@vite/client"> is only added when the @vite directive finds the public/hot file, which is generated when running npm run dev. That should be removed when you stop npm run dev, at least It's never stuck around for me.
If it does stick around, remove it. Since the @vite directive won't load anything from your public/build folder if it finds the public/hot file.
As for the file locations, that should be handled automatically by your public/build/manifest.json file generated when running the npm run build and the @vite directive.
You specify the input files in your vite.config.js file and use those paths as the key, the @vite directive then uses the manifest.json and outputs the correct file paths with the hash included when it renders your blade files.
Example scenario.
I have my CSS file in resources/css/app.css and I add that as my input file in vite.config.js.
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/app.css',
],
refresh: true,
}),
],
});
When I run npm run build. Vite will generate the CSS file in public/build/assets called filename.[hash].css. The filename will be the same as the input filename, and the hash I believe is random. And it will create a manifest.json which contains a JSON object with key-object pairs where the input file is the key, and the JSON object containing the file path and source path, etc.
{
"resources/css/app.css": {
"file": "assets/app.abaae058.css",
"src": "resources/css/app.css",
"isEntry": true
}
}
Now in my blade view, I call the @vite directive with the input file path as the key.
@vite('resources/css/app.css')
And when the Blade is rendered, Laravel's Vite class will read the manifest.json using the key I passed in to look up the file path and check if it should output a <script> or <link> tag. In this scenario, it will output a <link> tag.
<link rel="stylesheet" href="assets/app.[hash].css" />
4 likes
Level 1
@thinkverse Thanks for your answer. I removed the hot file in my host. But now it gives me "Unable to locate file in Vite manifest: resources/css/admin.css." error. Where am i missing?
Level 102
@Blitzkrieg Check if the file exists at /public/build. If not, try npm run build and it should show up. If it does exist, please show the contents of the file
Level 1
@Sinnbeck Yes compiled files are exists in public/build. The manifest file content;
{
"resources/js/app.js": {
"file": "assets/app.ab93cf8a.js",
"src": "resources/js/app.js",
"isEntry": true
},
"resources/css\app.css": {
"file": "assets/app.9d89b38c.css",
"src": "resources/css\app.css"
},
"resources/css\admin.css": {
"file": "assets/admin.92b8384a.css",
"src": "resources/css\admin.css"
}
}
I checked the files, they are exists everyting is looking fine.
Level 15
@Blitzkrieg this seems like the Windows bug? Are you running windows, if so which version of Vite do you have installed? You can check by running npm list vite.
For Windows, it's recommended to run vite@^3.0.4 since that fixed a bug with the CSS paths
1 like
Level 102
@Blitzkrieg Seems like you are running an old version
npm update
npm run build
1 like
Level 1
@Sinnbeck @thinkverse Yeah it was 3.0.3. I updated it to 3.0.5 and now everything is working perfect. Thank you so much for your help.
Level 2
@thinkverse "and the hash I believe is random" - it looks like the hash is based on the content of the built css/js files...if you make a change and rebuild, you get a new hash, but if you revert the change, you get the same hash as before...which is great for both caching and cache-busting #brilliant
1 like
Level 1
use {{ asset('') }} to access public folder
<link rel="stylesheet" href="{{ asset('build/assets/app.[hash].css') }}" />
Level 15
@MiguelRadaza that's inefficient, the hash changes each time you update your styles with new or remove content. So you would each time have to go into your public/build directory and look in the manifest.json file for the hash, or peek in the assets directory and get it there.
Why use that round-about way of adding your assets when the @vite directive does that lookup automatically for you? 🤔
Level 1
I have created a Larvel Vite project. It is working fine in development mode. When I made a production build then vite successfully generated the build folder inside the public directory.
Now, I don't know how to deploy it on the server. Should I have put all Laravel and public folders on my server's root folder and it works?
And how can I check the build package in the local environment without using the php artisan serve command? Just like php -S localhost:8000
1 like
Level 5
@AlokDev Did you figure out what to do? I have used npm run build and I dont know what to do with the files. Files are in public/build/assets. But how do I run them on the server? Theres not guide for this online it seems.
Level 1
@the-dude You should put all of your files in your server. And redirect domain's public directory to your public folder. Are you using shared hosting or what?
Level 1
@Blitzkrieg Hey i have same problem i couldn't deploy assets how can i solve it ?
Level 1
@amer22 How couldn't you deploy assets? Can you be more spesific?
Level 1
@Blitzkrieg i finished my project and build it ( npm run build ) then I go to deploy in cpanel and when I open website I get error 404 with built assests
Level 1
@Blitzkrieg do you have any social media to direct message with u ?
Level 1
@amer22 You can contact me via Discord. XpDeviL#2652
Level 1
@Blitzkrieg I sent a request to u
Level 1
<!--@vite(['resources/css/app.css', 'resources/js/app.js'])-->
Worked for me
<link href="{{ asset('build/assets/app-3cbe0a94.css') }}" rel="stylesheet">
<script src="{{ asset('build/assets/app-c47d7316.js') }}" defer></script>
Level 1
Hi,
I uploaded build folder from public/build and uploaded manually It worked for me
Please or to participate in this conversation.