Level 13
Have you checked the .env file to make sure it’s all the same. If your using the env_url and it’s different in either env files then it may point to the wrong location. Also how are you calling the app.js and app.css
Nov 29, 2018
7
Level 1
Project wont load files in public
Hi, first post here, forgive me if it's a beginner mistake. I was working on a project on my laptop with the most recent Laravel version. When I'm on my laptop and I run php artisan serve, my website comes out perfectly with my css and js working. When I do the same thing on my pc, no css and js is loaded, all I have is 404 errors for all my files which are correctly in the public folder, generated by npm run dev.
Here some infos, both PC and laptop are on Windows 10, running XAMPP with the same httpd.conf. On both machines I did the same setup, Composer Install Laravel, composer install in the root of project, npm install, artisan generate:key, artisan migrate --seed, all my data is OK.
It is the first time I'm using Laravel and Php since I'm a student and this bug seems to elude my teachers, so it is possible that I'm missing some key points here. I can't change the structure of project that much since it is a group project with source control, I do not want to break the project of the other members of my team since it's all working great on their machine. I think the issue is maybe with my pc rather than the project since it's working perfectly fine in my deployment server, laptop machine and my teammates PCs too. I didn't find anything helpful in that matter on StackOverflow or here so I thought I'll be making my own post for that.
Any help would be appreciated and if you need more info do not hesitate to tell me so. Thank you !
Level 1
Both .env are the same as for how I call my css and blade in my blade :
<!-- Full Calendar -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="{{ asset('/js/moment.min.js') }}" defer></script>
<script src="{{ asset('/js/fullcalendar.min.js') }}" defer></script>
<link href="{{ asset('css/fullcalendar.min.css') }}" rel="stylesheet">
<script src="{{ asset('/js/locale/fr-ca.js') }}" defer></script>
and here the log in the terminal :
127.0.0.1:51809 [404]: /js/app.js - No such file or directory 127.0.0.1:51810 [404]: /css/app.css - No such file or directory 127.0.0.1:51811 [404]: /css/main.css - No such file or directory 127.0.0.1:51812 [404]: /js/moment.min.js - No such file or directory 127.0.0.1:51813 [404]: /css/fullcalendar.min.css - No such file or directory 127.0.0.1:51814 [404]: /js/fullcalendar.min.js - No such file or directory 127.0.0.1:51815 [404]: /js/locale/fr-ca.js - No such file or directory 127.0.0.1:51816 [404]: /css/fullcalendar.min.css - No such file or directory 127.0.0.1:51817 [404]: /storage/Poule%20Dynasty.png - No such file or directory 127.0.0.1:51818 [404]: /js/moment.min.js - No such file or directory 127.0.0.1:51819 [404]: /storage/background3.jpg - No such file or directory
Level 67
did you run npm run dev on the pc to generate the assets and have them copied to /public? Is /public the root dir (document root) of the site when you run it on the pc? Are you using artisan serve on the pc as well, or do you have a different webserver setup?
Level 1
I was under the impression that npm run dev compile my code in the /ressource dir and send the output to /public directory by itself, Right now in my /public folder i have /css , /js, /storage, /svg, .htaccess , favicon.ico, index.php, mix-manifest.json and robots.txt
I'm using artisan serve and I'm guessing /public is the document root of the site since on my laptop everything loaded correctly
Level 67
I was under the impression that npm run dev compile my code in the /ressource dir and send the output to /public directory by itself
Correct. You just didn't say how you copied the code over to the pc from the laptop. Normally, you'd just clone the git repo, which normally wouldn't contain the compiled assets. So I was just making sure your assets were actually there, which it sounds like they are. Well...maybe. You confirmed that the directories exist (/js, /css, etc) but did you confirm whether the actual files are in them (/css/main.css, /js/moment.min.js, etc)??
Personally, I find the php built in webserver to be less than adequate. Several people have the problem you are having and I'm not sure what they did to fix it. For me, switching to homestead for the webserver fixed all of that and I've been happy with that solution for a few years now. Others are happy with Laravel Valet, but personally I don't like polluting my host OS and like it all contained in a VM. Neither solution would mess with your code or sharing it with your team, as it wouldn't involve any code changes at all. Just how you're serving laravel.
1 like
Level 1
thx for the info, i will look into it
Level 1
UPDATE AND SOLUTION : One of my teacher just got back to me with the solution. It turns out the path of my project had my name in it, which has the special char : 'é'. Once I moved my project to another Path without any special char (C:/Projects), my css and js loaded without any issue. Thanks to @cronix and @skoobi for their help also
Please or to participate in this conversation.